jQuery 第一课分析无new构造模式与链式调用

2017-02-08

jQuery 的无 new 构造模式
- 分析
- 尝试
  - 创建一个类
  - 在构造方法里面初始化

jQuery 的无 new 构造模式

我们经常使用 jQuery 的代码如下:

1 2	$('#id').find(xxx).val(); $('#id').html();

分析

从上面我们可以看出 $('#id') 每次都是构造了一个新的实例，但是它没有使用 new 关键字来创建。

尝试

我们尝试自己构建一个这样的一个类吧。

创建一个类

var Demo = function(selector, context) {};
Demo.prototype = {
    hello: function() {
        return 'hello my name is ' + this.name;
    },
    name: 'Demo'
};
var demo = new Demo();
demo.name();
// hello my name is Demo

以上代码就是在javascript中，是类的表现形式。所以，我们创建了一个类名叫Demo的类。这里的Demo.prototype 指的就是Demo类的实例方法有哪些。但是这里，还没有达到我们的目的，因此我们继续…

在构造方法里面初始化

var Demo = function(selector, context) {
    return new Demo();
};
Demo.prototype = {
    hello: function() {
        return 'hello my name is ' + this.name;
    },
    name: 'Demo'
};
var demo = new Demo();
// 不难发现这里会陷入死循环，出现栈溢出错误

在 javascript 中， prototype 是一个类的实例化对象。也就是说我们只要在 prototype 里面创建一个方法，将它自己返回出去，就可以达到实例化效果（我们真是太聪明了）。于是我们就来尝试一下吧…

var Demo = function(selector, context) {
    return Demo.prototype.init();
};
Demo.prototype = {
    init: function() {
        return this;
    },
    hello: function() {
        return 'hello my name is ' + this.name;
    },
    name: 'Demo'
};
Demo().hello();
// hello my name is Demo

perfect 我们就达到了无new的构造模式，直接调用实例化方法的目的。。。。
== 怎么感觉一切都太容易了。。。，我们来测试一下

// 继以上代码
var demo = Demo();
demo.name = 'world!';
var demo1 = Demo();
demo1.hello();
// hello my name is world!

😡 为毛这里的demo1 的 name 就变成了 world! 了啊，不应该是 demo 的 name 是 world! 吗?

咋们仔细分析一下，哦，原来我们在构造函数里面没有使用 new 关键字来实例化对象，在 javascript 中 new 关键字的作用是分配 this 的作用域，没有使用new关键字的话默认指向全局，也就是说我们的作用域没有被隔离，因此它们都是使用了同一个作用域。所以我们这里来稍稍修改一下。

var Demo = function(selector, context) {
    return new Demo.prototype.init();
};
Demo.prototype = {
    init: function() {
        return this;
    },
    hello: function() {
        return 'hello my name is ' + this.name;
    },
    name: 'Demo'
};
Demo().hello();

然后咋们一运行。。。。。坑爹啊，为什么 Demo() 对象找不到 hello方法了。思考了半天解决不了，我们还是来看看 jQuery 的解决方案吧。

1 2	// Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn;

哦，原来如此，它是将 jQuery.fn.init 的实例化对象指向了 jQuery.fn 的实例化对象。(注意，这里的 jQuery.fn 其实就是等于 jQuery.prototype。)所以，我们来继续改造我们的代码。。。

var Demo = function(selector, context) {
    return new Demo.prototype.init();
};
Demo.prototype = {
    init: function() {
        return this;
    },
    hello: function() {
        return 'hello my name is ' + this.name;
    },
    name: 'Demo'
};
Demo.prototype.init.prototype = Demo.prototype;
var demo = Demo();
demo.name = 'world!';
demo.hello();
// hello my name is world!
var demo1 = Demo();
demo1.hello();
// hello my name is Demo

至此，我们就完美参考 jQuery 实现了我们自己的无 new构造方法。

参考来源：