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; 所以,你说是不是一样。