值、原型和属性的区别答案

【问题标题】：Difference of the value, prototype and property值、原型和属性的区别
【发布时间】：2012-08-22 00:51:57
【问题描述】：

好的！首先，这个问题来自一个在 jQuery 世界中挖掘得太深（并且可能迷失方向）的人。

在我的研究中，我发现 jquery 的主要模式是这样的（如果需要更正，欢迎您）：

(function (window, undefined) {

   jQuery = function (arg) {
      // The jQuery object is actually just the init constructor 'enhanced'
      return new jQuery.fn.init(arg);
   },
   jQuery.fn = jQuery.prototype = {
      constructor: jQuery,
      init: function (selector, context, rootjQuery) {
         // get the selected DOM el.
         // and returns an array
      },
      method: function () {
         doSomeThing();
         return this;
      },
      method2: function () {
         doSomeThing();
         return this;,
         method3: function () {
            doSomeThing();
            return this;
         };

         jQuery.fn.init.prototype = jQuery.fn;

         jQuery.extend = jQuery.fn.extend = function () {

            //defines the extend method 
         };
         // extends the jQuery function and adds some static methods 
         jQuery.extend({
            method: function () {}

         })

      })

当$ 启动时，jQuery.prototype.init 启动并返回一个元素数组。但我不明白它是如何添加像.css 或.hide 等的jQuery 方法的。到这个数组。

我得到了静态方法。但是无法通过所有这些方法获得它的返回方式和元素数组。

【问题讨论】：

标签： javascript jquery oop reverse-engineering

【解决方案1】：

我也不喜欢这种模式。他们有一个 init 函数，它是所有 jQuery 实例的构造函数 - jQuery 函数本身只是使用 new 创建对象的包装器：

function jQuery(…) { return new init(…); }

然后，他们将这些实例的方法添加到 init.prototype 对象。此对象在jQuery.fn 处作为接口公开。此外，他们将 jQuery 函数的 prototype 属性设置为该对象 - 对于那些不使用 fn 属性的人。现在你有

jQuery.prototype = jQuery.fn = […]init.prototype

但他们也做了两件[奇怪的]事情：

覆盖原型对象的constructor属性，将其设置为jQuery函数
在jQuery.fn 上公开init 函数 - 它自己的原型。这可能允许Extending $.fn.init function，但非常令人困惑

我认为他们需要/想要做这一切以防万一，但他们的代码一团糟——从对象文字开始，然后分配 init 原型。

【讨论】：

是否覆盖了构造函数，它们如何获得this，即返回的值指向 jQuery？...不，这是#2 奇怪的事情的原因...什么是 # 1 个奇怪的东西？
这本质上是一个让 inits this 看起来像 jQuery this 的 hack
不，原型对象上的constructor property 与功能无关。而且我不知道您在说“getting inits this to look like a jQuery this”时是什么意思——这只是通常的“类”模式
不要忘记无尽的原型循环，f.ex：new $.fn.init.prototype.init.prototype.init.prototype.init('body');
当然，尽管…prototype.constructor.… 也有这样的反向引用

【解决方案2】：

如果您将 API 视为方法的外部集合，而将 jQuery 函数视为包装器，则更容易理解。

基本上是这样构造的：

function a() { return new b();}
a.prototype.method = function() { return this; }
function b() {}
b.prototype = a.prototype;

除了a 是jQuery 和b 是jQuery.prototype.init。

我确信 Resig 有他的理由将 api 构造函数放在 init 原型中，但我看不到它们。除了 Bergi 提到的之外，还有一些奇怪的地方：

1) 模式需要从jQuery.fn.init.prototype 到jQuery.prototype 的参考副本，这会导致奇怪的无限循环：

var $body = new $.fn.init.prototype.init.prototype.init.prototype.init('body');

2) 每个 jQuery 集合实际上都是jQuery.fn.init 的一个实例，但是由于它们引用了相同的原型对象，它欺骗我们“认为”该集合是jQuery 的一个实例。你可以像这样做同样的巫术：

function a(){}
function b(){}
a.prototype = b.prototype;
console.log( new b instanceof a); // true
console.log( new a instanceof b); // true

旁注：我个人使用了以下构造函数模式，结果相似，没有奇怪：

var a = function(arg) {
    if (!(this instanceof a)) {
        return new a(arg);
    }
};
a.prototype.method = function(){ return this; };

【讨论】：