一，instanceof：

instanceof檢測(cè)左側(cè)的__proto__原型鏈上，是否存在右側(cè)的prototype原型. 我在之前的兩篇文章

[js高手之路]構(gòu)造函數(shù)的基本特性與優(yōu)缺點(diǎn)

[js高手之路]一步步圖解javascript的原型(prototype)對(duì)象,原型鏈

已經(jīng)分享過了.

1 function CreateObj(uName) { 2 this.userName = uName; 3 this.showUserName = function () { 4 return '100'; 5 } 6 } 7 CreateObj.prototype.showUserName = function () { 8 return this.userName; 9 } 10 var obj1 = new CreateObj('ghostwu'); 11 var obj2 = new CreateObj('衛(wèi)莊'); 12 13 console.log( obj1 instanceof CreateObj ); //true 14 console.log( obj2 instanceof CreateObj ); //true 15 console.log( obj1 instanceof Object ); //true 16 console.log( obj2 instanceof Object ); //true

二、isPrototypeOf:

如果隱式原型__proto__指向調(diào)用isPrototypeOf()方法的對(duì)象原型( CreateObj ), 那么這個(gè)方法就返回true，如:

1 var obj1 = new CreateObj('ghostwu'); 2 var obj2 = new CreateObj('衛(wèi)莊'); 3 console.log( CreateObj.prototype.isPrototypeOf( obj1 ) ); //true 4 console.log( CreateObj.prototype.isPrototypeOf( obj2 ) ); //true

因?yàn)閛bj1,obj2的隱式原型__proto__指向的都是CreateObj.prototype， 有朋友可能會(huì)問CreateObj.prototype上面根本就沒有isPrototypeOf這個(gè)方法，怎么可以

調(diào)用呢？

是的，沒錯(cuò)，但是CreateObj.prototype的隱式原型__proto__指向了Object.prototype, 而isPrototypeOf存在Object.prototype上，所以就能夠調(diào)用

三、Object.getPrototypeOf

獲取實(shí)例的隱式原型(__proto__)的指向，因?yàn)閛bj1,obj2的__proto__都指向CreateObj.prototype

1 var obj1 = new CreateObj('ghostwu'); 2 var obj2 = new CreateObj('衛(wèi)莊'); 3 console.log( Object.getPrototypeOf( obj1 ) === CreateObj.prototype ); //true 4 console.log( Object.getPrototypeOf( obj2 ) === CreateObj.prototype ); //true

四，實(shí)例訪問屬性和方法時(shí)，遵循就近查找原則

實(shí)例先在自己身上查找，有，就停止查找，如果沒有，就沿著實(shí)例的__proto__繼續(xù)往上查找，有，就停止查找，如果沒有就繼續(xù)沿著原型鏈一直往上查找，如果

所有的原型對(duì)象上都沒有，那就是undefined.

1 function CreateObj(uName) { 2 this.userName = uName; 3 } 4 CreateObj.prototype.showUserName = function () { 5 return this.userName; 6 } 7 CreateObj.prototype.age = 22; 8 9 var obj1 = new CreateObj('ghostwu'); 10 obj1.age = 20; 11 var obj2 = new CreateObj('衛(wèi)莊'); 12 13 console.log( obj1.age ); //20--->來自實(shí)例 14 console.log( obj2.age ); //22--->來自原型對(duì)象 15 16 delete obj1.age; 17 console.log( obj1.age ); //22--->來自原型

五，hasOwnProperty

判斷屬性是實(shí)例上的還是原型對(duì)象上的，如果是實(shí)例上的，返回true, 原型上的返回false

1 function CreateObj(uName) { 2 this.userName = uName; 3 } 4 CreateObj.prototype.showUserName = function () { 5 return this.userName; 6 } 7 CreateObj.prototype.age = 22; 8 var obj1 = new CreateObj('ghostwu'); 9 obj1.age = 20; 10 var obj2 = new CreateObj('衛(wèi)莊'); 11 console.log( obj1.age ); //20--->來自實(shí)例 12 console.log( obj1.hasOwnProperty( 'age' ) ); //true 13 console.log( obj2.age ); //22--->來自原型對(duì)象 14 console.log( obj2.hasOwnProperty( 'age' ) ); //false 15 delete obj1.age; 16 console.log( obj1.age ); //22--->來自原型 17 console.log( obj1.hasOwnProperty( 'age' ) ); //false

六、in操作符

判斷屬性是否在實(shí)例或者原型對(duì)象上，只要一個(gè)滿足條件，返回值都是true

1 function CreateObj(uName) { 2 this.userName = uName; 3 } 4 CreateObj.prototype.showUserName = function () { 5 return this.userName; 6 } 7 CreateObj.prototype.age = 22; 8 var obj1 = new CreateObj('ghostwu'); 9 obj1.age = 20; 10 console.log( 'age' in obj1 ); //true 11 var obj2 = new CreateObj('衛(wèi)莊'); 12 console.log( 'age' in obj2 ); //true 13 delete obj1.age; 14 console.log( 'age' in obj1 ); //true 15 console.log( 'user' in obj1 ); //false 16 console.log( 'user' in obj2 ); //false

七，結(jié)合in和hasOwnProperty的用法，可以封裝一個(gè)函數(shù)判斷這個(gè)屬性是否在原型對(duì)象上, 返回值為true:在原型對(duì)象上, false:不在原型對(duì)象上

1 function CreateObj(uName) { 2 this.userName = uName; 3 } 4 CreateObj.prototype.showUserName = function () { 5 return this.userName; 6 } 7 CreateObj.prototype.age = 20; 8 function hasPrototypeProperty( obj, name ){ 9 return !obj.hasOwnProperty( name ) && ( name in obj ); 10 } 11 var obj1 = new CreateObj('ghostwu'); 12 var obj2 = new CreateObj('衛(wèi)莊'); 13 obj1.age = 10; 14 console.log( hasPrototypeProperty( obj1, 'age' ) ); //false 15 console.log( hasPrototypeProperty( obj2, 'age' ) ); //true

八、for...in 可以枚舉實(shí)例和原型對(duì)象上的屬性和方法，前提是：該屬性和方法是可以枚舉的

1 function CreateObj(uName) { 2 this.userName = uName; 3 } 4 CreateObj.prototype.showUserName = function () { 5 return this.userName; 6 } 7 CreateObj.prototype.age = 20; 8 var obj = new CreateObj( 'ghostwu' ); 9 10 for( var key in obj ){ 11 console.log( key ); //userName,age,showUserName 12 } 13 console.log( Object.prototype ); 14 for( var key in Object.prototype ){ 15 console.log( key );//枚舉不了, Object.prototype上的屬性和方法默認(rèn)不可枚舉,枚舉屬性為false 16 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/ghostwu/p/7435562.html

總結(jié)

以上是生活随笔為你收集整理的[js高手之路]原型对象(prototype)与原型链相关属性与方法详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。