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

Ajian 發(fā)布于2019-08-20 18:57 / 2445人閱讀

摘要：所以一句話理解的運算規(guī)則為檢測左側(cè)的原型鏈上，是否存在右側(cè)的原型。

上文,通過基本的對象創(chuàng)建問題了解了構(gòu)造函數(shù)，本文，我們接著上文繼續(xù)了解構(gòu)造函數(shù)的基本特性，以及優(yōu)缺點.

每個對象上面都有一個constructor屬性( 嚴格意義上來說，是原型上的，對象是通過查找到原型找到 constructor屬性 ).后面講到原型的時候，我會用示意圖的方式說明

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return this.userName;
 5             }
 6         }
 7         var obj1 = new CreateObj("ghostwu");
 8         var obj2 = new CreateObj("衛(wèi)莊");
 9         console.log( obj1.constructor === CreateObj ); //true
10         console.log( obj2.constructor === CreateObj ); //true

默認情況下，對象的constructor等于實例化對象的構(gòu)造函數(shù), constructor最初的作用是用來標識對象的，但是并不是特別準確，因為constructor能被修改,

識別對象一般用instanceof關(guān)鍵字.

什么是instanceof？

要理解這個關(guān)鍵字，需要搞清楚原型鏈，這里，我提前把他放出來

//假設(shè)instanceof運算符左邊是L，右邊是R
L instanceof R 
//instanceof運算時，通過判斷L的原型鏈上是否存在R.prototype
L.__proto__.__proto__ ..... === R.prototype ？
//如果存在返回true 否則返回false
注意：instanceof運算時會遞歸查找L的原型鏈，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到頂層為止。

所以一句話理解instanceof的運算規(guī)則為：

instanceof檢測左側(cè)的__proto__原型鏈上，是否存在右側(cè)的prototype原型。

console.log( obj1 instanceof Object ); //true
console.log( obj2 instanceof Object ); //true
console.log( obj1 instanceof CreateObj ); //true
console.log( obj2 instanceof CreateObj ); //true

obj1,obj2之所以是Object的實例，因為所有對象繼承自O(shè)bject

借用構(gòu)造函數(shù)

一個空對象，可以借用現(xiàn)有的構(gòu)造函數(shù)，完成屬性和方法的復(fù)制

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return this.userName;
 5             }
 6         }
 7         var obj = new Object();
 8         CreateObj.call( obj, "ghostwu" );
 9         console.log( obj.userName ); //ghostwu
10         console.log( obj.showUserName() ); //ghostwu

構(gòu)造函數(shù)的優(yōu)點與缺點

優(yōu)點就是能夠通過instanceof識別對象，缺點是每次實例化一個對象，都會把屬性和方法復(fù)制一遍

1         var obj1 = new CreateObj("ghostwu");
2         var obj2 = new CreateObj("衛(wèi)莊");
3 
4         console.log( obj1.showUserName === obj2.showUserName ); //false

從以上執(zhí)行結(jié)果，可以看出obj1.showUserName和obj.showUserName不是同一個【在js中，引用類型比較的是地址, 函數(shù)是一種引用類型】，而是存在兩個不同
的內(nèi)存地址，因為每個對象的屬性是不一樣的，這個沒有什么問題，但是方法執(zhí)行的都是一樣的代碼，所以沒有必要復(fù)制，存在多份，浪費內(nèi)存.這就是缺點

怎么解決構(gòu)造函數(shù)的方法復(fù)制多次的問題？

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = showUserName;
 4         }
 5         function showUserName (){
 6             return this.userName;
 7         }
 8         var obj1 = new CreateObj("ghostwu");
 9         var obj2 = new CreateObj("衛(wèi)莊");
10         console.log( obj1.showUserName === obj2.showUserName ); //true

把對象的方法指向同一個全局函數(shù)showUserName, 雖然解決了多次復(fù)制問題，但是全局函數(shù)非常容易被覆蓋，也就是大家經(jīng)常說的污染全局變量.

比較好的解決方案？

通過原型(prototype)對象，把方法寫在構(gòu)造函數(shù)的原型對象上

1         function CreateObj(uName) {
2             this.userName = uName;
3         }
4         CreateObj.prototype.showUserName = function(){
5             return this.userName;
6         }
7         var obj1 = new CreateObj("ghostwu");
8         var obj2 = new CreateObj("衛(wèi)莊");
9         console.log( obj1.showUserName === obj2.showUserName ); //true