JS分离构造器

通过new操作符构建一个对象，一般经过四步：

  A.创建一个新对象

  B.将构造函数的作用域赋给新对象（所以this就指向了这个新对象）

  C.执行构造函数中的代码

  D.返回这个新对象

最后一点就说明了，我们只要返回一个新对象即可。其实new操作符主要是把原型链跟实例的this关联起来，这才是最关键的一点，所以我们如果需要原型链就必须要new操作符来进行处理。否则this则变成window对象了。

 

我们来剖析下jQuery的这个结构,以下是我们常见的类式写法:

var $$ = ajQuery = function(selector) {    this.selector = selector;    return this}ajQuery.fn = ajQuery.prototype = {    selectorName:function(){        return this.selector;    },    constructor: ajQuery}var a = new $$('aaa');  //实例化a.selectorName() //aaa //得到选择器名字

 

首先改造jQuery无new的格式，我们可以通过instanceof判断this是否为当前实例：

var $$ = ajQuery = function(selector) {    if(!(this instanceof ajQuery)){        return new ajQuery(selector);    }    this.selector = selector;    return this}

 

但是注意千万不要像下面这样写：

var $$ = ajQuery = function(selector) {    this.selector = selector;    return new ajQuery(selector);}Uncaught RangeError: Maximum call stack size exceeded

这样会无限递归自己，从而造成死循环并且溢出。

jQuery为了避免出现这种死循环的问题，采取的手段是把原型上的一个init方法作为构造器

var $$ = ajQuery = function(selector) {    //把原型上的init作为构造器    return new ajQuery.fn.init( selector );}ajQuery.fn = ajQuery.prototype = {    name: 'aaron',    init: function() {        console.log(this)    },    constructor: ajQuery}

这样确实解决了循环递归的问题，但是又问题来了，init是ajQuery原型上作为构造器的一个方法，那么其this就不是ajQuery了，所以this就完全引用不到ajQuery的原型了，所以这里通过new把init方法与ajQuery给分离成2个独立的构造器。

内容转自慕课网http://www.imooc.com/code/3398