无 new 构造与链式调用

无 new 构造

最简单的想法

(function(window) {
var jQuery = function() {
return new _jQuery();
}; var _jQuery = function() {}; window.jQuery = window.$ = jQuery;
})(window);

这个实现挺好的,能达到无 new 构造的要求,不过并不利于扩展,比如下面这段代码:

jQuery.prototype.test = function() {
console.log("test");
};

在原版 jQuery 下是这样的结果:

无 new 构造与链式调用

在我这个简化山寨版下是这样:

无 new 构造与链式调用

小小改动

(function(window) {
var jQuery = function() {
return new jQuery();
}; window.jQuery = window.$ = jQuery;
})(window);

彻底歇菜,死循环了:

无 new 构造与链式调用

this 的指向

这段代码是我打瞌睡的时候写的,真照着 jQuery 源码来写是写不出来的:

(function(window) {
var jQuery = function() {
return jQuery.prototype.init();
}; jQuery.prototype.init = function() {
return this;
}; window.jQuery = window.$ = jQuery;
})(window);

跑上面的测试都没有问题,非常完美,最起码我开始写出来的时候是这么认为的,不过我又写了段测试,就发现问题了:

$() === $();

结果竟然是 true

$() === $.prototype;

再看这个,结果也是 true,就明白是为什么了,同时 this 指向也搞清楚了,指向的是 jQuery.prototype

new 起来

(function(window) {
var jQuery = function() {
return new jQuery.prototype.init();
}; jQuery.prototype.init = function() {}; window.jQuery = window.$ = jQuery;
})(window);

还存在一个问题就是,返回的是 jQuery.prototype.init 的一个实例,jQuery 原型上的方法一个都访问不了。

原型链修复

(function(window) {
var jQuery = function() {
return new jQuery.prototype.init();
}; jQuery.prototype.init = function() {}; jQuery.prototype.init.prototype = jQuery.prototype; window.jQuery = window.$ = jQuery;
})(window);

链式调用

这个看起来高大上,实现起来其实很简单,每个方法返回 this 就行了:

(function(window) {
var jQuery = function() {
return new jQuery.prototype.init();
}; jQuery.prototype.init = function() {}; jQuery.prototype.init.prototype = jQuery.prototype; jQuery.prototype.test = function() {
return this;
} window.jQuery = window.$ = jQuery;
})(window);

代码地址

https://github.com/oldmanscode/jq_step_by_step/blob/master/step2.js

上一篇:Linux配置日志服务器


下一篇:每天一个linux命令(54)--watch命令