文章 jQuery诞生记-原理与机制 读后感

要点总结：

• 关于new： （原文出处：详解new function(){}和function(){}()）

1. 只要new表达式之后的constructor返回（return）一个引用对象（数组，对象，函数等），都将覆盖new创建的匿名对象（我的理解：this还是那个this，但new以后的返回却不是那个this）;
2. 如果返回（return）一个原始类型（无return时其实为return原始类型undefined），那么就返回new创建的匿名对象（我的理解：返回的是this）。

关于第1种情况的代码示例：

var o = new function() {return "圆心"};
alert(o); //将返回显示“[object object] ”

关于第2种情况的代码示例：

var o = new function() {return new String("圆心")};
alert(o); //返回的是“圆心”

---

• 关于jQuery原理

总体思路：

1. 原生的获取对象或对对象的处理都太繁琐，用函数将其包装，使其简单化。
2. 将对元素的处理方法通过原型继承的方式进行定义。

原文中有一段文字表述可能有问题：

上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的原型对象，尼玛$.fn.init的prototype原型现在就是个光杆司令啊，哟，正好，$.fn对应的原型方法，除了init没用外，其他hide(), each()就是我们需要的。因此，我们需要加上这么一行：

我觉得应该改为：

上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的this对象，$()的这个返回值没法访问hide和each方法，why？因为这个返回值的原型对象是$.fn.init.prototype，也就是F.prototype.init.prototype，而hide和each方法是定义在$.fn，也就是F.prototype上，所以根据原型链的查找机理，$()的这个返回值是访问不到hide和each方法的。 因此，我们需要加上这么一行：

好了，现在我们用代码的方式进行演进讲解：

1. 原生

var button = document.getElementById("button")
var image1 = document.getElementById("image1")
var image2 = document.getElementById("image2")

button.onclick = function() {
    image1.style.display = "none";
    image2.style.display = "none";
};

2. 化繁为简，进行包装

var $ = function(id) {
    return document.getElementById(id);
};

$("button").onclick = function() {
    $("image1").style.display = "none";
    $("image2").style.display = "none";
};

3. 样式处理还是繁琐，继续简化，封装一个方法到元素对象上去

var $ = function(id) {
    return document.getElementById(id);
};

HTMLElement.prototype.hide = function() {
    this.style.display = "none";
};

$("button").onclick = function() {
    $("image1").hide();
    $("image2").hide();
};

4. IE6~IE8浏览器不认识HTMLElement，上述方法不通用。改进思路：Function的原型扩展大家都认识，创建一个函数，然后通过new这个函数返回HTML元素，再将hide方法绑定到该函数的原型上。

var F = function(id) {
    return document.getElementById(id);
};
F.prototype.hide = function() {
    this.style.display = "none";
};

new F("button").onclick = function() {
    new F("image1").hide();
    new F("image2").hide(); 
};

5. 上述方案有问题，原因请参见文章开头关于new的解释：
   new F()返回的不是this对象了，而是DOM对象。其原型对象是构造函数.prototype，而该构造函数已经不是F了。所以new F()的返回值根本访问不到hide方法。

6. 那就用this来做桥接，new F()还是返回this，DOM对象以属性的方式绑定到this上。原型对象上的hide方法可以通过点的方式访问到DOM对象

var F = function(id) {
    this.element = document.getElementById(id);
};
F.prototype.hide = function() {
    this.element.style.display = "none";
};
new F("button").element.onclick = function() {
    new F("image1").hide();
    new F("image2").hide(); 
};

7. 上面的方法，元素的获取直接在F方法中，但是，实际情况，考虑到兼容性实现，元素获取可能会相当复杂，同时方法私有，不能重利用。因此，可以把元素获取方法放在原型上，便于管理和重用。代码如下：

var F = function(id) {
    return this.getElementById(id);
};
F.prototype.getElementById = function(id) {
    this.element = document.getElementById(id);
    return this;
};
F.prototype.hide = function() {
    this.element.style.display = "none";
};
new F("button").element.onclick = function() {
    new F("image1").hide();
    new F("image2").hide(); 
};

8. 能不能不用new

var F = function(id) {
   return this.getElementById(id);
};
F.prototype.getElementById = function(id) {
    this.element = document.getElementById(id);
    return this;
};
F.prototype.hide = function() {
    this.element.style.display = "none";
};

var $ = function(id) {
    return new F(id);
};

$("button").element.onclick = function() {
    $("image1").hide();
    $("image2").hide();    
};

9. 获取元素不仅仅只用id，还有class等其他方式

var F = function(selector, context) {
    return this.getNodeList(selector, context);
};
/**
替换掉特殊的getElementById，使用通用的获取list的方式
*/
F.prototype.getNodeList = function(selector, context) {
    context = context || document;
    this.element = context.querySelectorAll(selector);
    return this;
};
var $ = function(selector, context) {
    return new F(selector, context);
};
/**
以下代码有些问题，因为现在是操作list了。不过可以用来理解流程。
*/
$("button").element.onclick = function() {
    $("image1").hide();
    $("image2").hide();    
};

10. 解决上面提出的问题，遍历list

var F = function(selector, context) {
    return this.getNodeList(selector, context);
};
F.prototype.getNodeList = function(selector, context) {
    context = context || document;
    this.element = context.querySelectorAll(selector);
    return this;
};
F.prototype.each = function(fn) {
    var i=0, length = this.element.length;
    for (; i<length; i+=1) {
        fn.call(this.element[i], i, this.element[i]);
    }
    return this;
};
F.prototype.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
var $ = function(selector, context) {
    return new F(selector, context);
};
$("button").element[0].onclick = function() {
    $("img").hide();  
};

11. $("button").element[0] 看上去不爽

var F = function(selector, context) {
    return this.init(selector, context);
};
//这个方法已经不是获取list了，应该将名字getNodeList换成更准确的init
F.prototype.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        /**
          每一个DOM对象都以 属性：对象 的方式保存在了this中;
          这个属性名=nodeList中每个DOM对象的索引值
        */
        this[i] = nodeList[i];
    }
    return this;
};
F.prototype.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
F.prototype.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
var $ = function(selector, context) {
    return new F(selector, context);
};
//这时可以不用$("button").element[0]了
$("button")[0].onclick = function() {
    $("img").hide();  
};

12. F名字看着不爽，能不能换一个：F → $.fn

var $.fn = function(selector, context) {
    return this.init(selector, context);
};
$.fn.prototype.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];
    }
    return this;
};
$.fn.prototype.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.prototype.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
var $ = function(selector, context) {
    return new $.fn(selector, context);
};
$("button")[0].onclick = function() {
    $("img").hide();  
};

12. 每次扩展新方法，都要 $.fn.prototype.functionName=function(){} 吗？作为插件，每次扩展方法都要访问高级属性prototype好吗？插件应该把这一类难的高级的帮我们隐藏掉，那我们给他们重新起个名字吧，就让 $.fn = F.prototype 吧

var F = function(selector, context) {
    return this.init(selector, context);
};
var $ = function(selector, context) {
    return new F(selector, context);
};
$.fn = F.prototype;
$.fn.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];
    }
    return this;
};
$.fn.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
$("button")[0].onclick = function() {
    $("img").hide();  
};

13. 我们看这段代码

var F = function(selector, context) {
    return this.init(selector, context);
};
var $ = function(selector, context) {
    return new F(selector, context);
};

明显可以合并简化

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};

然后我们再重新审视整段代码发现，除了在其他地方用到了 F.prototype，F在其他地方没有任何使用，也就是说F可以随便定义，那我们可以用把F.prototype改成$.prototype，然后把原来的F定义删除，于是代码变成了

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};
$.fn = $.prototype;
$.fn.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];
    }
    return this;
};
$.fn.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
$("button")[0].onclick = function() {
    $("img").hide();  
};

14. 但是这个时候我们发现

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};

这段代码是有问题的，问题解释请看我这篇文章开始处这段文字

上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的this对象，$()的这个返回值没法访问hide和each方法，why？因为这个返回值的原型对象是$.fn.init.prototype，也就是F.prototype.init.prototype，而hide和each方法是定义在$.fn，也就是F.prototype上，所以根据原型链的查找机理，$()的这个返回值是访问不到hide和each方法的。 因此，我们需要加上这么一行：

那怎么办呢？在指回去不就得了 $.fn.init.prototype = $.fn

于是整段代码变成了现在这样

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};
$.fn = $.prototype;
$.fn.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];    
    }
    return this;
};
$.fn.init.prototype = $.fn;
$.fn.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
$("button")[0].onclick = function() {
    $("img").hide();  
};

15. 在init方法中，判断第一个参数，如果是节点，直接 this[0] = this_node
16. 每个扩展方法都要 $.fn.functionName, 太繁琐

$.fn.extend({
    css: function() {},
    attr: function() {},
    data: function() {},
    // ...
});

---

over!