1. 程式人生 > 程式設計 >JavaScript中isPrototypeOf函式

JavaScript中isPrototypeOf函式

目錄
  • 1、isPrototypeOf()
    • 示例1,Object類例項:
    • 示例2,自己定義Human類:
    • 示例3,再來看看Object的原型(prototype)是否是human的原型:
    • 示例4,Object.prototype是否是內建類的原型:
    • 示例5,Object也是函式(類):
  • 2、和 instanceof 的區別

    有時看一些框架原始碼的時候,會碰到 isPrototypeOf() 這個函式,那麼這個函式有什麼作用呢?

    1、isPrototypeOf()

    isPrototypeOf() Object函式(類)的下的一個方法,用於判斷當前物件是否為另外一個物件的原型,如果是就返回 true,否則就返回 false

    這個函式理解的關鍵是在原型鏈上,這個據說是的三座大山之一。

    這裡不詳述其中的原理,簡單的來講就是3點:

    • 1. 函式物件,都會天生自帶一個prototype原型屬性。
    • 2. 每一個物件也天生自帶一個屬性__proto__指向生成它的函式物件的prototype
    • 3. 函式物件的prototype也有__proto__指向生成它的函式物件的prototype

    示例1,Object類例項:

    let o = new Object();
    console.log(Object.prototype.isPrototypeOf(o)); // true
    
    
    

    因為o物件是Object

    的例項,所以o物件的原型(__proto__)指向Object的原型(prototype),上面會輸出true。

    示例2,自己定義Human類:

    function Human() {}
    let human = new Human();
     
    console.log(Human.prototype.isPrototypeOf(human)); // true
    
    
    

    這例和上例類似,因為human物件是Human的例項,所以human物件的原型(__proto__)指向Human的原型(prototype),上面會輸出true

    示例3,再來看看Object的原型(prototype)是否是human的原型:

    console.log(Object.prototype.isPrototypeOf(human)); // true
    
    
    

    為什麼呢?,用程式碼可能更好解釋,請看下面推導:

    // 因為 Human 的原型(prototype)中的原型(__proto__)指向 Object 的原型(prototype)
    Human.prototype.__proto__ === Object.prototype
    // 又因為 human 的原型(__proto__)指向 Human 的原型(prototype)
    huamn.__proto__  === Human.prototype
    // 所以human物件的原型(__proto__)的原型(__proto__)指向Object的原型(prototype)
    huamn.__proto__.__proto__  === Object.prototype
    
    
    

    如果檢視human的結構就很容易清楚了:

    JavaScript中isPrototypeOf函式

    Object 的原型(prototype) 是不是就是 human 物件的原型呢?確切的說Object 的原型(prototype)是在 human 的原型鏈上。

    示例4,Object.prototype是否是內建類的原型:

    Script中內建類NumberStringBooleanFunctionArray因為都是繼承Object,所以下面的輸出也都是true

    console.log(Object.prototype.isPrototypeOf(Number)); // true
    console.log(Object.prototype.isPrototypeOf(String)); // true
    console.log(Object.prototype.isPrototypeOf(Boolean)); // true
    console.lhttp://www.cppcns.comog(Object.prototype.isPrototypeOf(Array)); // true
    console.log(Object.prototype.isProteZePLnWBQotypeOf(Fuwww.cppcns.comnction)); // true
    
    
    

    自然Object.prototype也是NumberStringBooleanFunctionArray的例項的原型。

    示例5,Object也是函式(類):

    另外值得一提的是 Function.protothttp://www.cppcns.comype 也是Object的原型,因為Object也是一個函式(類),它們是互相生成的。

    請看下面輸出:

    console.log(Object.prototype.isPrototypeOf(Function)); // true
    console.log(Function.prototype.isPrototypeOf(Object)); // true

    2、和 instanceof 的區別

    instanceof 是用來判斷物件是否屬於某個物件的例項。

    例如:

    function Human() {}
    let human = new Human();
     
    // human 是 Human 的例項,所以結果輸出true
    console.log(human instanceof Human); // true
     
    // 因為所有的類都繼承Object,所以結果也輸出true
    console.log(human instanceof Object); // true
     
    // 因為 human 物件不是陣列,所以結果輸出false
    console.log(human instanceof Array); // false
    
    
    

    再來一些內建類的例子:

    // 【1,2,3] 是 Array 的例項,所以輸出true
    console.log([1,3] instanceof Array); // true
     
    // 方法 function(){} 是 Function的例項,所以輸出true
    console.log(function(){} instanceof Function);
    
    
    

    instanceof 作用的原理就是判斷例項的原型鏈中能否找到類的原型物件(prototype),而 isPrototypeOf 又是判斷類的原型物件(prototype)是否在例項的原型鏈上。

    所以我的理解,這兩個表達的意思是一致的,就是寫法不同,下面兩個輸出應該是一致的:

    console.log(A instanceof B);
    console.log(B.prototype.isPrototypeOf(A));
    
    
    

    小結

    其實要理解 isProtwww.cppcns.comotypeOf 函式,關鍵是要理解原型鏈這個玩意。

    到此這篇關於JavaScriptisPrototypeOf函式的文章就介紹到這了,更多相關JavaScript中isPrototypeOf內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!