JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數的用法詳解

2022-06-23 22:01:09

isPrototypeOf

作用：檢測一個物件是否是另一個物件的原型。或者說一個物件是否被包含在另一個物件的原型鏈中

var p = {x:1};//定義一個原型物件
var o = Object.create(p);//使用這個原型建立一個物件
p.isPrototypeOf(o);//=>true：o繼承p
Object.prototype.isPrototypeOf(p);//=> true p繼承自Object.prototype

以上範例來自與《JavaScript權威指南》，簡單解釋一下就是每一個JavaScript物件都和原型關聯，每一個物件都從原型繼承屬性。所有通過物件直接量建立的物件都使用Object.prototype作為他們的原型，因此p是繼承自Object.prototype，因此在p的原型鏈中一定存在Object.prototype。

上面還提到了Object.create();該方法建立一個新物件，第一個引數是這個物件的原型，所以上面建立的o物件它的原型就是p；

function Animal(){
    this.species = "動物";
};
var eh = new Animal();
Animal.prototype.isPrototypeOf(eh)//=>true

以上範例是通過new建立了物件eh，使用建構函式Animal的prototype作為它的原型。

綜合上面的兩個例子，我們發現在呼叫isPrototypeOf()的時候有三種方式

p.isPrototypeOf(o);//=>true
Object.prototype.isPrototypeOf(p);
Animal.prototype.isPrototypeOf(eh)//=>true

總結一下就是：
通過Object.create()建立的物件使用第一個引數作為原型
通過物件直接量的物件使用Object.prototype作為原型
通過new建立的物件使用建構函式的prototype屬性作為原型

instanceof

instanceof運運算元希望左運算元是一個物件，右運算元標識物件的類。如果左側物件是右側類的範例，則表示式返回為true，否則返回false。

var d = new Date();
d instanceof Date;//=>true  d是Date的範例
d instanceof Object;//=>true 所有物件都是Object的範例

當通過instanceof判斷一個物件是否是一個類的範例的時候，這個判斷也會包含對父類別的檢測。儘管instanceof的右運算元是建構函式，但計算過程實際是檢測了物件的繼承關係。

instanceOf與isPrototypeOf簡單總結

var d = new Date();
Date.prototype.isPrototypeOf(d);//=>true
d instanceof Date;//=>true

如果Date.prototype是d的原型，那麼d一定是Date的範例。
缺點為無法同物件來獲得型別，只能檢測物件是否屬於類名
在多視窗和多框架的子頁面的web應用中相容性不佳。其中一個典型代表就是instanceof操作符不能視為一個可靠的陣列檢測方法。

hasOwnProperty

檢測集合成員的所屬關係，判斷某個屬性是否存在於某個物件中。可以通過in運運算元，hasOwnProperty()來完成。

in運運算元左側是屬性名，右側是字串，如果物件的自由屬性或者繼承屬性中包含這個屬性則返回true。
物件的hasOwnProperty()方法用來檢測給定的名字是否是物件的自由屬性，如果是繼承屬性則返回false。

function Animal(){}//定義Animal建構函式
  Animal.prototype = {//定義Animal原型
      species:"動物",
      say:function(){
          console.log('i can say word');
      }
  }
 
  function Cat(name,color){//定義建構函式Cat
　　this.name = name;
　　this.color = color;
}
    var F = function(){};
    F.prototype = Animal.prototype;
    Cat.prototype = new F();
    Cat.prototype.constructor = Cat;//Cat繼承Animal 用F空物件作為媒介
 
    var eh = new Cat('lili','white');//範例化物件
 
    console.log('say' in eh)//=>true
    console.log('name' in eh)//=>true
    console.log('color' in eh)//=>true
    console.log('species' in eh)=>true
 
    console.log(eh.hasOwnProperty('say'))=>false  由於say為繼承屬性  非自有屬性
    console.log(eh.hasOwnProperty('species'))=>false 由於species為繼承屬性  非自有屬性
    console.log(eh.hasOwnProperty('name'))=>true
    console.log(eh.hasOwnProperty('color'))=>true
 
    for(var key in eh){
          console.log(key);
      if(eh.hasOwnProperty(key)){
      console.log(key)    //=>species  say name  color
      }  
    }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數的用法詳解

isPrototypeOf

instanceof

instanceOf與isPrototypeOf簡單總結

hasOwnProperty

熱門文章