日期:2014-05-16  浏览次数:20405 次

Js中prototype继承问题升级之jQuery原理实践
直接上代码:

var $ = jQuery = function() {
return  new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init : function() {
this.length = 1;
return this;
},
length : 0,
jquery : '1.1.0',
size : function() {
return this.length;
}
};
jQuery.fn.init.prototype = jQuery.prototype;
alert( $().size() ); //1



var $ = jQuery = function() {
return  jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
init : function() {
this.length = 1;
return this;
},
length : 0,
jquery : '1.1.0',
size : function() {
return this.length;
}
};
alert( $().size() ); //1


以上这两种方式有什么区别吗?我看别人说是第一种实现方式可以达到分割作用域的效果,但是我感觉没有实现啊,因为不管怎么样打印出来的都是1,大家怎么看?

------解决方案--------------------


主要区别在于:

第一段代码中有个关键字“new”,所以呢最后的“$()”是一个实例化对象,这个实例化对象的构造函数是“jQuery.fn.init”,它的原型对象是“jQuery.fn”。此外,这个实例化对象自身有一个length属性(由this.length=1指定),而它的原型对象有length(length:0)、jquery两个属性和init、size两个方法,所以$()实际上是有两个length属性,但是当读取对象属性的时候,会先从对象自身查找有没有这个属性,有的话就立即读取并停止查找,没有的话才会继续向上 在它的原型里找,显然$()对象自身有length属性且值为1,所以最终弹出1。

第二段代中,“$()”只是单纯的执行了一下jQuery.fn.init这个函数,作用是将jQuery.fn的length属性赋值为1并返回jQuery.fn对象。所以,$()=jQuery.fn,它的length自然也是1。


两段代码中“$()”所指向的对象不同,跟作用域关系不大~
------解决方案--------------------
一样,
var $ = jQuery = function() {
    return     new jQuery.fn.init();
}
new jQuery.fn.init();   new + jQuery.fn.init;里面的this 是 jQuery.fn.init.prototype 

var $ = jQuery = function() {
    return     jQuery.fn.init();
}
 jQuery.fn.init();  init 里面的this 是jQuery.fn;

因为jQuery.fn.init.prototype = jQuery.prototype; 所以,你说是不是一样。