[js高手之路]原型對象(prototype)與原型鏈相關屬性與方法詳解

來源:互聯網
上載者:User

標籤:tar   pre   undefined   type   調用   bsp   自己   title   com   

一,instanceof:

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

[js高手之路]建構函式的基本特性與優缺點

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

已經分享過了.

 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(‘衛莊‘);12 13         console.log( obj1 instanceof CreateObj ); //true14         console.log( obj2 instanceof CreateObj ); //true15         console.log( obj1 instanceof Object ); //true16         console.log( obj2 instanceof Object ); //true

二、isPrototypeOf:

如果隱式原型__proto__指向調用isPrototypeOf()方法的對象原型( CreateObj ), 那麼這個方法就返回true,如:

1         var obj1 = new CreateObj(‘ghostwu‘);2         var obj2 = new CreateObj(‘衛莊‘);3         console.log( CreateObj.prototype.isPrototypeOf( obj1 ) ); //true4         console.log( CreateObj.prototype.isPrototypeOf( obj2 ) ); //true 

因為obj1,obj2的隱式原型__proto__指向的都是CreateObj.prototype, 有朋友可能會問CreateObj.prototype上面根本就沒有isPrototypeOf這個方法,怎麼可以

調用呢?

是的,沒錯,但是CreateObj.prototype的隱式原型__proto__指向了Object.prototype, 而isPrototypeOf存在Object.prototype上,所以就能夠調用

三、Object.getPrototypeOf

擷取執行個體的隱式原型(__proto__)的指向,因為obj1,obj2的__proto__都指向CreateObj.prototype

1         var obj1 = new CreateObj(‘ghostwu‘);2         var obj2 = new CreateObj(‘衛莊‘);3         console.log( Object.getPrototypeOf( obj1 ) === CreateObj.prototype ); //true4         console.log( Object.getPrototypeOf( obj2 ) === CreateObj.prototype ); //true

四,執行個體訪問屬性和方法時,遵循就近尋找原則

執行個體先在自己身上尋找,有,就停止尋找,如果沒有,就沿著執行個體的__proto__繼續往上尋找,有,就停止尋找,如果沒有就繼續沿著原型鏈一直往上尋找,如果

所有的原型對象上都沒有,那就是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(‘衛莊‘);12 13         console.log( obj1.age ); //20--->來自執行個體14         console.log( obj2.age ); //22--->來自原型對象15 16         delete obj1.age;17         console.log( obj1.age ); //22--->來自原型

五,hasOwnProperty

判斷屬性是執行個體上的還是原型對象上的,如果是執行個體上的,返回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(‘衛莊‘);11         console.log( obj1.age ); //20--->來自執行個體12         console.log( obj1.hasOwnProperty( ‘age‘ ) ); //true13         console.log( obj2.age ); //22--->來自原型對象14         console.log( obj2.hasOwnProperty( ‘age‘ ) ); //false15         delete obj1.age;16         console.log( obj1.age ); //22--->來自原型17         console.log( obj1.hasOwnProperty( ‘age‘ ) ); //false

六、in操作符

判斷屬性是否在執行個體或者原型對象上,只要一個滿足條件,傳回值都是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 ); //true11         var obj2 = new CreateObj(‘衛莊‘);12         console.log( ‘age‘ in obj2 ); //true13         delete obj1.age;14         console.log( ‘age‘ in obj1 ); //true15         console.log( ‘user‘ in obj1 ); //false16         console.log( ‘user‘ in obj2 ); //false

七,結合in和hasOwnProperty的用法,可以封裝一個函數判斷這個屬性是否在原型對象上, 傳回值為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 = 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(‘衛莊‘);13         obj1.age = 10;14         console.log( hasPrototypeProperty( obj1, ‘age‘ ) ); //false15         console.log( hasPrototypeProperty( obj2, ‘age‘ ) ); //true

八、for...in 可以枚舉執行個體和原型對象上的屬性和方法,前提是:該屬性和方法是可以枚舉的

 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,showUserName12         }13         console.log( Object.prototype );14         for( var key in Object.prototype ){15             console.log( key );//枚舉不了, Object.prototype上的屬性和方法預設不可枚舉,枚舉屬性為false16         }

 

[js高手之路]原型對象(prototype)與原型鏈相關屬性與方法詳解

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.