原型鏈

我們來(lái)回顧一下什么是原型

• 我們知道js中所有的對(duì)象、函數(shù)、數(shù)組都可以看成對(duì)象，也就是一切皆是對(duì)象

• 所有的對(duì)象身上都有一個(gè)__proto__屬性，他叫隱式原型，指向了構(gòu)造這個(gè)對(duì)象（如obj）的構(gòu)造函數(shù)（例如Constructor）的原型對(duì)象即Constructor.prototype，也就是說(shuō)obj.__proto__===Constructor.prototype,這兩個(gè)指針指向的其實(shí)是同一塊堆空間

• 在構(gòu)造函數(shù)的原型對(duì)象prototype（Constructor.prototype）中,一般包含constructor屬性和__proto__屬性。

• 其中constructor包含函數(shù)的一些信息如argments、caller、length、name 和prototype指向構(gòu)造函數(shù)的原型對(duì)象自身以及__scope__即閉包屬性（其中有函數(shù)需要使用的外部變量以及全局上下文，以偽數(shù)組的形式儲(chǔ)存在scope閉包對(duì)象中），另外__proto__的話(huà)，其實(shí)就是把Constructor.prototype看成new出來(lái)的對(duì)象實(shí)例，__proto__就是指向Constructor.prototype的構(gòu)造函數(shù)（如Superconstructor）的實(shí)例對(duì)象即Superconstructor.prototype

• 具體可以參照下圖：

• 

然后是原型鏈

• 由于對(duì)象（如obj）的隱式原型（obj.__proto__）指向構(gòu)造函數(shù)的prototype(如Constructor.prototype)，

• 而這個(gè)prototype(如Constructor.prototype)里面又有一個(gè)__proto__,它指向了prototype的構(gòu)造函數(shù)的prototype(如Superconstructor.prototype)，

• 然后Superconstructor.prototype.__proto__指向了Object.prototype

• 這樣就形成了一個(gè)簡(jiǎn)單的鏈?zhǔn)浇Y(jié)構(gòu)，這個(gè)條鏈的最后是Object.prototype.__proto__為null

以上就是原型鏈的構(gòu)成

原型鏈的使用

當(dāng)你使用一個(gè)對(duì)象的屬性或方法時(shí)，會(huì)先在該對(duì)象上查找已有屬性，如果沒(méi)有，就找到__proto__,找原型身上的屬性，如果原型沒(méi)有，那就再找原型的原型身上是否存在待查找屬性，知道找到或者找到原型鏈的頂端null

關(guān)于原型鏈一些有意思的東西

我們知道typeof可以用于判斷變量的數(shù)據(jù)類(lèi)型，但是對(duì)于復(fù)雜數(shù)據(jù)類(lèi)型，它只能判斷出對(duì)象、數(shù)組或函數(shù)，這對(duì)于我們的使用來(lái)說(shuō)是不夠的

所以我們可以用instanceof來(lái)判斷引用數(shù)據(jù)類(lèi)型的對(duì)象類(lèi)型

typeof A //'function'
obj instanceof A //true
obj instanceof Object //true

在使用時(shí)我發(fā)現(xiàn)一個(gè)有趣的問(wèn)題

Function instanceof Object //true
Object instanceof Function //true

這是為什么呢？

我們嘗試使用

Function.__proto__===Object.prototype //false

發(fā)現(xiàn)得到的是false，也就是Function并不是Object new出來(lái)的

但是嘗試

Object.__proto__===Function.prototype //true

卻發(fā)現(xiàn)Object是由Function new出來(lái)的

接著我們分析一下instanceof的工作原理， 我們嘗試用函數(shù)instance_of來(lái)手寫(xiě)instanceof關(guān)鍵字

function instance_of(L, R) {
    var O = R.prototype; 
    L = L.__proto__;
    while (true) {    
        if (L === null)      
             return false;   
        if (O === L) 
             return true;   
        L = L.__proto__;  
    }
}

對(duì)于以上代碼分析,我們其實(shí)是在找左值的原型鏈上是否存在右值的原型

于是我們嘗試

Function.__proto__===Function.prototype //true
Function.__proto__.__proto__===Object.prototype //true

發(fā)現(xiàn)原來(lái)Function.prototype是由Object new出來(lái)的，同時(shí)Function也是可以由自己new出來(lái)

• 綜上，Function由Function new出來(lái)，Object由Function new出來(lái)，Function.prototype由Object new出來(lái)

最后是關(guān)于new關(guān)鍵字

當(dāng)代碼 new Foo(...) 執(zhí)行時(shí)，會(huì)發(fā)生以下事情：

• 一個(gè)繼承自 Foo.prototype 的新對(duì)象被創(chuàng)建（類(lèi)似于Object.create）。
• 使用指定的參數(shù)調(diào)用構(gòu)造函數(shù) Foo，并將 this 綁定到新創(chuàng)建的對(duì)象。new Foo不帶括號(hào)就是沒(méi)有指定參數(shù)列表，Foo 不帶任何參數(shù)調(diào)用。
• 由構(gòu)造函數(shù)返回對(duì)象，作為 new 表達(dá)式的結(jié)果。如果構(gòu)造函數(shù)沒(méi)有顯式返回一個(gè)對(duì)象，則使用步驟 1 創(chuàng)建的對(duì)象。（一般情況下，構(gòu)造函數(shù)不返回值，但是可以選擇主動(dòng)返回對(duì)象，來(lái)覆蓋正常的對(duì)象創(chuàng)建步驟）

嘗試用newFun手寫(xiě)new關(guān)鍵字

function newFun(Constructor) {
    var obj = {};
    obj.__proto__ = Constructor.prototype;
    return Constructor.apply(obj);    
};

使用Object.create

function newFun() {
    Constructor = [].shift.call(arguments);// 取出第一個(gè)參數(shù)Constructor
    var obj = Object.create(Constructor);    
    return Constructor.apply(obj, arguments);// 使用參數(shù)調(diào)用
};

• 補(bǔ)充一點(diǎn)題外話(huà)

  let a = {
      k:10,
      hh(){
          console.log(this);
      }
  }
  let b = {
      k:9,
      a
  }
  b.a.hh();

  使用對(duì)象鏈?zhǔn)秸{(diào)用hh()函數(shù)，它的this指向通過(guò)隱式綁定還是指向直接調(diào)用它的對(duì)象a,而不是間接調(diào)用的對(duì)象b

到此這篇關(guān)于JavaScript中Function與Object的關(guān)系的文章就介紹到這了,更多相關(guān)JavaScript Function Object內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論