由Jquery創(chuàng)建對(duì)象引發(fā)的思考

Harpsichord1207 發(fā)布于2019-08-20 10:47 / 310人閱讀

摘要：具有相同的所有構(gòu)造器的對(duì)象都具有相同的類型最后中的中有對(duì)于使用函數(shù)名這樣的方式創(chuàng)建對(duì)象有無是一樣的。對(duì)于使用函數(shù)名創(chuàng)建對(duì)象和無返回值一樣因?yàn)槟J(rèn)就會(huì)返回。

讀到j(luò)query源碼時(shí)我有以下疑惑

問題1 Jquery 中創(chuàng)建對(duì)象的奧秘
問題2 JavaScript中this的指向問題
問題3 return this 的作用
問題4 instanceof / 對(duì)象和類之間的關(guān)系

//代碼1(Jquery 創(chuàng)建對(duì)象)

var iQuery=function (){
    name="iQuery";   //4
    return new iQuery.prototype.init();   //1
};
iQuery.prototype={
    init : function(){
        name="iQueryPrototypeInit";   //5
        return this;   //2
    },

    name : "iQueryPrototype"   //6
};

iQuery.prototype.init.prototype=iQuery.prototype;   //3

這時(shí)我有問題了，//1 處有無new的區(qū)別。//2 處有無 return this 的區(qū)別。 //3處的作用
在這里我通過對(duì)//代碼1 進(jìn)行分解來回答問題1 到問題4

//代碼2 我將 //代碼1 中的 //3 處去掉 //2 處去掉 //1 處去掉

var iQuery=function (){
    name="iQuery";
    return iQuery.prototype.init();
};
iQuery.prototype={
    init : function(){
        name="iQueryPrototypeInit";   //5
    },

    name : "iQueryPrototype"
};

iQuery().name; //結(jié)果為  VM105:1 Uncaught TypeError: Cannot read property name of undefined(…)

分析: iQuery.prototype.init() 是調(diào)用了init函數(shù)，由于函數(shù)沒有返回值，所以只返回了控制 return iQuery.prototype.init() 也沒有返回值iQuery().name;會(huì)有以上錯(cuò)誤提示

//代碼3

var iQuery=function (){
    name="iQuery";   //4
    return new iQuery.prototype.init();   //1
};
iQuery.prototype={
    init : function(){
        name="iQueryPrototypeInit";   //5
    },

    name : "iQueryPrototype"   //6
};

iQuery().name;  //結(jié)果為  undefined 這里并不提示錯(cuò)誤，而是說name沒有定義;

分析: //4處 name為iQuery 的局部變量，//5 處name是init的局部變量。
執(zhí)行iQuery()時(shí)創(chuàng)建了一個(gè)init的對(duì)象，這時(shí)init是構(gòu)造函數(shù)，執(zhí)行時(shí)流程

1 創(chuàng)建一個(gè)對(duì)象
2 返回新建的對(duì)象
這就是有無 new 的區(qū)別

//代碼4 多了個(gè)this

    var iQuery=function (){
        name="iQuery";   //4
        return new iQuery.prototype.init();   //1
    };
    iQuery.prototype={
        init : function(){
            this.name="iQueryPrototypeInit";   //5
        },
    
        name : "iQueryPrototype"   //6
    };

iQuery().name;  //結(jié)果為  `iQueryPrototypeInit`

分析: 執(zhí)行 iQuery().name;執(zhí)行流程

1 創(chuàng)建一個(gè)對(duì)象
2 讓 this 引用這個(gè)對(duì)象
3 為 this 所引用的對(duì)象添加屬性 name
4 返回 this 所引用的對(duì)象

iQuery() instanceof iQuery  //false
iQuery() instanceof iQuery.prototype  //VM125:1 Uncaught TypeError: Right-hand side of "instanceof" is not callable(…)

說 iQuery.prototype 是一個(gè)對(duì)象 instanceof 右邊必須是類，即函數(shù)名

iQuery() instanceof iQuery.prototype.init;  //true

這里調(diào)用 iQuery() 是創(chuàng)建了init的一個(gè)對(duì)象。

//代碼5 多了//2

var iQuery=function (){
    name="iQuery";   //4
    return new iQuery.prototype.init();   //1
};
iQuery.prototype={
    init : function(){
        this.name="iQueryPrototypeInit";   //5
        return this;   //2
    },

    name : "iQueryPrototype"   //6
};

iQuery().name;  //結(jié)果為  iQueryPrototypeInit

分析: 執(zhí)行 iQuery().name;執(zhí)行流程

1 創(chuàng)建一個(gè)對(duì)象
2 讓 this 引用這個(gè)對(duì)象
3 為 this 所引用的對(duì)象添加屬性 name
4 返回 this 所引用的對(duì)象

iQuery() instanceof iQuery  //false
iQuery() instanceof iQuery.prototype  //VM125:1 Uncaught TypeError: Right-hand side of "instanceof" is not callable(…)

說 iQuery.prototype 是一個(gè)對(duì)象 instanceof 右邊必須是類，即函數(shù)名

iQuery() instanceof iQuery.prototype.init;  //true

這里調(diào)用 iQuery() 是創(chuàng)建了init的一個(gè)對(duì)象。

總結(jié)1 如果使用new創(chuàng)建對(duì)象加不加 return this 是一樣的。

//代碼6 去掉//1 處的 new //2處有 return this

var iQuery=function (){
    name="iQuery";   //4
    return iQuery.prototype.init();   //1
};
iQuery.prototype={
    init : function(){
        this.name="iQueryPrototypeInit";   //5
        return this;   //2
    },

    name : "iQueryPrototype"   //6
};
iQuery().name;   // iQueryPrototypeInit

如果去掉 //5

iQuery().name;   // iQueryPrototype

分析: 執(zhí)行 iQuery() 返回了 iQuery.prototype 這個(gè)由字面常量創(chuàng)建的對(duì)象

如果沒有去掉 //5 則給 iQuery.prototype 添加了 name 屬性覆蓋了原有的name
在這里 iQuery.prototype.init() 是 iQuery.prototype 這個(gè)對(duì)象調(diào)用了 init 函數(shù)
所以 init 的 this 指向了 iQuery.prototype

結(jié)論2: 函數(shù)中的 this 始終指向直接調(diào)用它的對(duì)象，注意是直接，為什么說是直接請(qǐng)看 //代碼6

//代碼7

var iQuery=function (){
    name="iQuery";   //4
    return iQuery.prototype.init();   //1
};
iQuery.prototype={
    init : function(){
        return this;   //2
    },

    name : "iQueryPrototype"   //6
};

var temp ={};
temp.name="temp";
temp.sayName=iQuery().init;  // 等價(jià)于 temp.sayName=iQuery.prototype.init;
temp.name;   // 結(jié)果  temp
temp.sayName.name;   // 結(jié)果  temp

分析: 執(zhí)行 temp.sayName=iQuery().init; 為對(duì)象 temp 添加了一個(gè) sayName 方法，sayName 引用了 iQuery().init/temp.sayName=iQuery.prototype.init這時(shí) init 中的 return this 這個(gè) this 指向 temp 因?yàn)槭?temp 直接調(diào)用 init

總結(jié):JavaScript中的 this 是上下文這個(gè)上下文特指是函數(shù)的上下文，就是函數(shù)所屬的對(duì)象JavaScript中的 bind,call,apply 方法都能切換函數(shù)的上下文，這和代碼 //6 的原理相同都是改變 this 的指向，所以叫做上下文切換

//代碼8 (本文最重要的點(diǎn)) 對(duì)象和類之間的關(guān)系(instanceof)

var iQuery=function (){
    name="iQuery";   //4
    return new iQuery.prototype.init();   //1
};
iQuery.prototype={
    init : function(){
    },

    name : "iQueryPrototype"   //6
};

iQuery.prototype.init.prototype=iQuery.prototype;   //3

// 注意增加了 //3
這時(shí)執(zhí)行：

a: iQuery() instanceof iQuery().init; //true
b: iQuery() instanceof iQuery; //true;

如果去掉 //3
c: iQuery() instanceof iQuery; //false;

分析: 我調(diào)用 iQuery() 創(chuàng)建的明明是構(gòu)造器 init 的對(duì)象啊 a:的結(jié)果才是符合邏輯的結(jié)果，b: 是什么鬼啊，和他有毛關(guān)系啊

  請(qǐng)看  //代碼9  //代碼10

//代碼9

var pro={};
var A=function(){};
A.prototype=pro;
var B=function(){};
B.prototype=pro;
var a=new A();
var b=new B();
執(zhí)行:
a instanceof A;   //true
a instanceof B;   //true
b instanceof A;   //true
b instanceof B;   //true

//代碼10

var pro={};
var A=function(){};
A.prototype=pro;
var B=function(){};
B.prototype=pro;
var a=new A();
var b=new B();
var C=function(){};
C.prototype=a;
var c=new C();

c instanceof A;   //true
c instanceof B;   //true
c instanceof C;   //true

分析: 看到這里大家一定會(huì)明白Jquery的設(shè)計(jì)者為什么加 iQuery.prototype.init.prototype=iQuery.prototype;

雖然源碼中用了 fn 但是 fn 就是 Jquery.prototype我給出我的結(jié)論

結(jié)論3: JavaScript 中的對(duì)象和類(即構(gòu)造器) 之間除了對(duì)象的_proto_ 屬性指向了類(構(gòu)造器)指定的 prototype之外，對(duì)象和類之間沒有更多的關(guān)系。類型完全由 prototype 決定。具有相同 prototype 的所有構(gòu)造器的對(duì)象都具有相同的類型

最后: Jquery中的init中有 return this 對(duì)于使用 new 函數(shù)名() 這樣的方式創(chuàng)建對(duì)象有無 return this 是一樣的。那Jquery為什么加啊，因?yàn)?b>Jquery中的很多其它方法可以進(jìn)行鏈?zhǔn)秸{(diào)用，這些方法中通過 return this 返回由init創(chuàng)建的對(duì)象，為了保持一致所以init中的 return this 真的可以去掉。對(duì)于使用 new 函數(shù)名() 創(chuàng)建對(duì)象 return this 和無返回值一樣因?yàn)槟J(rèn)就會(huì)返回 this。 return 基本類型，則 return 會(huì)被忽略依然 return this。如果 return 引用類型 那么返回結(jié)果就是引用類型的對(duì)象。