jquery之无new创建

一、最基本的创建对象的做法

var jQuery = function () {
    // 构造函数
}

jQuery.prototype = {
    version: '1.1.1',
    name: function() {
        console.log(this.version);
    }
}

var a = new jQuery();

a.name(); // "1.1.1"

        这是在js里最基本的构建一个类的做法，但是如果当用户输入的是var a = jQuery(); ,就会出错。我们要让用户不需要进行new来创建，这样可以提升体验。

var jQuery = function(selector, context) {
    return new jQuery(selector, context);
}

jQuery.prototype = {
    name:function() {
        // name方法
    }
}


jQuery();

这是想法中应该这么写，但是明显的问题，死循环了。那么jQuery是怎么解决的呢？在jQuery中，使用jQuery.prototype.init来创建实例，这样就能防止死循环的问题。

var jQuery = function (selector, context) {
    return new jQuery.prototype.init(selector, context);
}

jQuery.prototype = {
  constructor: jQuery,
  init: function(selector, context) {
    return this;
  },
  name: function () {
    console.log("name调用");
  }
}

当我们调用name方法的时候报错了，因为我们实例化的是jQuery.prototype.init，这上面不会挂载jQuery的方法，同时通过原型链也访问不到。那么jQuery是怎么解决的呢？看下面的一行代码，也是我觉得很点睛之笔的地方。

var jQuery = function (selector, context) {
    return new jQuery.prototype.init(selector, context);
}

jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(selector, context) {
    return this;
  },
  name: function () {
    console.log("name调用");
  }
}

jQuery.fn.init.prototype = jQuery.prototype;

jQuery().name(); //  name调用

我们通过把jQuery.fn.init的原型指向jQuery.prototype，这样我们在使用的时候就能够通过实例化的对象访问到挂载在jQuery.prototype上的属性。

我们可以将静态方法也就是我们的工具方法挂载在jQuery上，我们调用的时候不需要去实例化，而是可以直接去调用。将对象的方法挂载到jQuery.prototype上，我们系需要实例化之后才能够使用，针对的this的操作。