[js高手之路]使用原型對象(prototype)需要注意的地方

chnmagnus 發布于2019-08-20 19:06 / 2505人閱讀

摘要：原型對象的共享特性，可以很方便的為一些內置的對象擴展一些方法，比如，數組去重復但是，不要隨便往內置的對象上面擴展方法，在多人協作開發，很容易產生覆蓋，以及污染

我們先來一個簡單的構造函數+原型對象的小程序

 1         function CreateObj( uName, uAge ) {
 2             this.userName = uName;
 3             this.userAge = uAge;
 4         }
 5         CreateObj.prototype.showUserName = function () {
 6             return this.userName;
 7         }
 8         CreateObj.prototype.showUserAge = function () {
 9             return this.userAge;
10         }

這個程序，沒有什么問題，但是非常的冗余，每次擴展一個方法，都要寫一次原型對象，我們可以把原型對象prototype當做一個字面量對象，所有的方法都在字面

量對象中擴展，可以達到同樣的效果：

 1         CreateObj.prototype = {
 2             showUserAge : function(){
 3                 return this.userAge;
 4             },
 5             showUserName : function(){
 6                 return this.userName;
 7             },
 8         }
 9         var obj1 = new CreateObj( "ghostwu", 22 );
10         var obj2 = new CreateObj( "衛莊", 24 );
11         console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
12         console.log( obj2.showUserName(), obj2.showUserAge() ); //衛莊 24

但是這種原型(prototype)對象的寫法，屬于重寫了CreateObj的默認原型對象，造成的第一個問題就是constructor不再指向CreateObj.

沒有重寫之前，constructor指向CreateObj

 1         function CreateObj( uName, uAge ) {
 2             this.userName = uName;
 3             this.userAge = uAge;
 4         }
 5         CreateObj.prototype.showUserName = function () {
 6             return this.userName;
 7         }
 8         CreateObj.prototype.showUserAge = function () {
 9             return this.userAge;
10         }
11         console.log( CreateObj.prototype.constructor === CreateObj ); //true

重寫之后,constructor指向Object

 1         CreateObj.prototype = {
 2             showUserAge : function(){
 3                 return this.userAge;
 4             },
 5             showUserName : function(){
 6                 return this.userName;
 7             },
 8         }
 9         console.log( CreateObj.prototype.constructor === CreateObj ); //false
10         console.log( CreateObj.prototype.constructor === Object ); //true

所以說，constructor不能準確的標識對象，因為他會被修改

我們之前寫的程序，基本都是在原型對象(prototype)上擴展完了方法之后，再實例化對象，我們看下，先實例化對象，再在原型對象(prototype)上擴展函數，

實例對象是否能正常的調用到擴展的方法？

1         function CreateObj( uName, uAge ) {
2             this.userName = uName;
3             this.userAge = uAge;
4         }
5         var obj1 = new CreateObj( "ghostwu", 22 );
6         CreateObj.prototype.showUserName = function(){
7             return this.userName;
8         }
9         console.log( obj1.showUserName() ); //ghostwu

可以正常調用，但是，如果原型對象是重寫的，就調用不到了

 1         function CreateObj( uName, uAge ) {
 2             this.userName = uName;
 3             this.userAge = uAge;
 4         }
 5         var obj1 = new CreateObj( "ghostwu", 22 );
 6         CreateObj.prototype = {
 7             showUserName : function(){
 8                 return this.userName;
 9             }
10         }
11         console.log( obj1.showUserName() ); //報錯

因為重寫了原型對象之后，同時實例化又是在重寫之前發生的，所以實例的隱式原型__proto__不會指向重寫的原型對象，所以就調用不到

另一個問題，如果在原型對象(prototype)上有引用類型，千萬小心，因為多個實例共用原型對象，只要有一個實例改變了引用類型的值，其他實例全部會收到

改變之后的結果。

1         function CreateObj(){}
2         CreateObj.prototype = {
3             name : "ghostwu",
4             skills : [ "php", "javascript", "linux" ]
5         };
6         var obj1 = new CreateObj();
7         obj1.skills.push( "python" );
8         var obj2 = new CreateObj();
9         console.log( obj2.skills ); //"php", "javascript", "linux", "python"

原型對象（prototype）的共享特性，可以很方便的為一些內置的對象擴展一些方法，比如，數組去重復

 1         Array.prototype.unique = function(){
 2             var res = [];
 3             for( var i = 0, len = this.length; i < len; i++ ){
 4                 if( res.indexOf( this[i] ) == -1 ) {
 5                    res.push( this[i] ); 
 6                 }
 7             }
 8             return res;
 9         }
10         var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ];
11         console.log( arr.unique() ); //10, 20, 30, 40

但是，不要隨便往內置的對象上面擴展方法，在多人協作開發，很容易產生覆蓋，以及污染.

GPU云服務器云服務器 prototype原型 spark實戰高手之路 js的prototype js原型鏈的繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85147.html

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

摘要：一，檢測左側的原型鏈上，是否存在右側的原型我在之前的兩篇文章高手之路構造函數的基本特性與優缺點高手之路一步步圖解的原型對象原型鏈已經分享過了衛莊二如果隱式原型指向調用方法的對象原型那么這個方法就返回，如衛莊因為的隱式原型指向的都是，有朋友可一，instanceof： instanceof檢測左側的__proto__原型鏈上，是否存在右側的prototype原型. 我在之前的兩篇文章 ...

svtter 2019-08-20 19:02 評論0 收藏0
[js高手之路]構造函數的基本特性與優缺點

摘要：所以一句話理解的運算規則為檢測左側的原型鏈上，是否存在右側的原型。上文,通過基本的對象創建問題了解了構造函數，本文，我們接著上文繼續了解構造函數的基本特性，以及優缺點. 每個對象上面都有一個constructor屬性( 嚴格意義上來說，是原型上的，對象是通過查找到原型找到 constructor屬性 ).后面講到原型的時候，我會用示意圖的方式說明 1 functio...

Ajian 2019-08-20 18:57 評論0 收藏0
[js高手之路] es6系列教程 - 新的類語法實戰選項卡

摘要：其實的面向對象很多原理和機制還是的，只不過把語法改成類似和老牌后端語言中的面向對象語法一用封裝一個基本的類是不是很向和中的類其實本質還是原型鏈，我們往下看就知道了首先說下語法規則中的就是類名，可以自定義就是構造函數，這個是關鍵字，當實例化對其實es6的面向對象很多原理和機制還是ES5的，只不過把語法改成類似php和java老牌后端語言中的面向對象語法. 一、用es6封裝一個基本的類 ...

yintaolaowanzi 2019-08-21 16:17 評論0 收藏0
[js高手之路]js單頁hash路由原理與應用實戰

摘要：什么是路由通俗點說，就是不同的顯示不同的內容什么是單頁應用單頁，英文縮寫為，就是把各種功能做在一個頁面內那所謂的單頁路由應用就是在一個頁面內，通過切換地址欄的來實現切換內容的變化如何知道切換了呢當后面的錨文本發生變化時，會觸發事件。什么是路由？通俗點說，就是不同的URL顯示不同的內容什么是單頁應用? 單頁，英文縮寫為SPA( Single Page Application)，就是...

tinna 2019-08-20 18:56 評論0 收藏0
面向對象的JavaScript（如何一步步成為js高手）

摘要：雖然，也是面向疾苦的語言，但是，它和靜態類型語言的面向接口編程不一而足。對象對他自己的行為負責，其他對象不關心它的內部實現。 ‘工欲善其事，必先利其器’，在深入學習JavaScript之前，我認為我們很有必要了解以下，JavaScript這門面向對象的動態語言到底是一門什么樣的語言。 JavaScript vs 其他面向對象語言它沒有使用像Java等傳統的面向對象語言的類式繼承，而...

peixn 2019-08-21 18:35 評論0 收藏0