jQuery源码二周目#3 回溯处理的设计
2020-08-20 本文已影响0人
柠檬果然酸
回溯处理的设计
jQuery内部维护着一个jQuery对象栈,通过prevObject属性能找到前一个对象。这个对象栈有什么用?
<ul>
<li>内容</li>
<li>内容</li>
</ul>
假如用$('ul').find('li')
找到<ul>
标签下所有的<li>
标签,对所有的<li>
标签绑定click事件之后又想返回到上一个查询给<ul>
标签绑定click事件,这时候对象栈就派上用场。
jQuery.fn = jQuery.prototype = {
init: function(selector, context) {
},
// ...
find: function() {
return this.pushStack();
},
pushStack: function () {
// 创建一个新的jQuery对象
var ret = this.constructor();
ret.prevObject = this;
return ret;
}
}
每次调用find方法的时候会创建一个新的jQuery对象,新的jQuery对象的prevObject属性指向旧的jQuery对象,然后再将新的对象返回。核心方法是pushStack,只有简短的3行代码。
然后调用var jq = $().find()
测试一下似乎没问题,prevObject属性也指向上一个对象
但是继续展开发现原型中的init()
find()
pushStack()
等方法没了
这就是覆盖原型的一个坑,覆盖原型的同时一定要记得重写构造器constructor
jQuery.prototype.constructor = jQuery;