JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)怎么使用

本篇內(nèi)容主要講解“JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)怎么使用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)怎么使用”吧!

isPrototypeOf

作用：檢測(cè)一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型?；蛘哒f(shuō)一個(gè)對(duì)象是否被包含在另一個(gè)對(duì)象的原型鏈中

var p = {x:1};//定義一個(gè)原型對(duì)象
var o = Object.create(p);//使用這個(gè)原型創(chuàng)建一個(gè)對(duì)象
p.isPrototypeOf(o);//=>true：o繼承p
Object.prototype.isPrototypeOf(p);//=> true p繼承自O(shè)bject.prototype

簡(jiǎn)單解釋一下就是每一個(gè)JavaScript對(duì)象都和原型關(guān)聯(lián)，每一個(gè)對(duì)象都從原型繼承屬性。所有通過(guò)對(duì)象直接量創(chuàng)建的對(duì)象都使用Object.prototype作為他們的原型，因此p是繼承自Object.prototype，因此在p的原型鏈中一定存在Object.prototype。

上面還提到了Object.create();該方法創(chuàng)建一個(gè)新對(duì)象，第一個(gè)參數(shù)是這個(gè)對(duì)象的原型，所以上面創(chuàng)建的o對(duì)象它的原型就是p；

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

以上實(shí)例是通過(guò)new創(chuàng)建了對(duì)象eh，使用構(gòu)造函數(shù)Animal的prototype作為它的原型。

綜合上面的兩個(gè)例子，我們發(fā)現(xiàn)在調(diào)用isPrototypeOf()的時(shí)候有三種方式

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

總結(jié)一下就是：
通過(guò)Object.create()創(chuàng)建的對(duì)象使用第一個(gè)參數(shù)作為原型
通過(guò)對(duì)象直接量的對(duì)象使用Object.prototype作為原型
通過(guò)new創(chuàng)建的對(duì)象使用構(gòu)造函數(shù)的prototype屬性作為原型

instanceof

instanceof運(yùn)算符希望左操作數(shù)是一個(gè)對(duì)象，右操作數(shù)標(biāo)識(shí)對(duì)象的類。如果左側(cè)對(duì)象是右側(cè)類的實(shí)例，則表達(dá)式返回為true，否則返回false。

var d = new Date();
d instanceof Date;//=>true  d是Date的實(shí)例
d instanceof Object;//=>true 所有對(duì)象都是Object的實(shí)例

當(dāng)通過(guò)instanceof判斷一個(gè)對(duì)象是否是一個(gè)類的實(shí)例的時(shí)候，這個(gè)判斷也會(huì)包含對(duì)父類的檢測(cè)。盡管instanceof的右操作數(shù)是構(gòu)造函數(shù)，但計(jì)算過(guò)程實(shí)際是檢測(cè)了對(duì)象的繼承關(guān)系。

instanceOf與isPrototypeOf簡(jiǎn)單總結(jié)

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

• 如果Date.prototype是d的原型，那么d一定是Date的實(shí)例。

• 缺點(diǎn)為無(wú)法同對(duì)象來(lái)獲得類型，只能檢測(cè)對(duì)象是否屬于類名

• 在多窗口和多框架的子頁(yè)面的web應(yīng)用中兼容性不佳。其中一個(gè)典型代表就是instanceof操作符不能視為一個(gè)可靠的數(shù)組檢測(cè)方法。

hasOwnProperty

檢測(cè)集合成員的所屬關(guān)系，判斷某個(gè)屬性是否存在于某個(gè)對(duì)象中?？梢酝ㄟ^(guò)in運(yùn)算符，hasOwnProperty()來(lái)完成。

in運(yùn)算符左側(cè)是屬性名，右側(cè)是字符串，如果對(duì)象的自由屬性或者繼承屬性中包含這個(gè)屬性則返回true。
對(duì)象的hasOwnProperty()方法用來(lái)檢測(cè)給定的名字是否是對(duì)象的自由屬性，如果是繼承屬性則返回false。

function Animal(){}//定義Animal構(gòu)造函數(shù)
  Animal.prototype = {//定義Animal原型
      species:"動(dòng)物",
      say:function(){
          console.log('i can say word');
      }
  }
 
  function Cat(name,color){//定義構(gòu)造函數(shù)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空對(duì)象作為媒介
 
    var eh = new Cat('lili','white');//實(shí)例化對(duì)象
 
    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
      }  
    }

到此，相信大家對(duì)“JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！