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

2021-08-07 11:28:10 字數 2995 閱讀 2032

上文,通過基本的物件建立問題了解了建構函式,本文,我們接著上文繼續了解建構函式的基本特性,以及優缺點.

每個物件上面都有乙個constructor屬性( 嚴格意義上來說,是原型上的,物件是通過查詢到原型找到 constructor屬性 ).後面講到原型的時候,我會用示意圖的方式說明

1

function

createobj(uname) 6}

7var obj1 = new createobj('ghostwu');

8var obj2 = new createobj('衛莊');

9 console.log( obj1.constructor === createobj ); //

true

10 console.log( obj2.constructor === createobj ); //

true

預設情況下,物件的constructor等於例項化物件的建構函式, constructor最初的作用是用來標識物件的,但是並不是特別準確,因為constructor能被修改,

識別物件一般用instanceof關鍵字.

什麼是instanceof?

要理解這個關鍵字,需要搞清楚原型鏈,這裡,我提前把他放出來

//假設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的運算規則為:

instanceof檢測左側的__proto__原型鏈上,是否存在右側的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的例項,因為所有物件繼承自object

借用建構函式

乙個空物件,可以借用現有的建構函式,完成屬性和方法的複製

1

function

createobj(uname) 6}

7var obj = new

object();

8 createobj.call( obj, 'ghostwu');

9 console.log( obj.username ); //

ghostwu

10 console.log( obj.showusername() ); //

ghostwu

建構函式的優點與缺點

優點就是能夠通過instanceof識別物件,缺點是每次例項化乙個物件,都會把屬性和方法複製一遍

1

var obj1 = new createobj('ghostwu');

2var obj2 = new createobj('衛莊');

34 console.log( obj1.showusername === obj2.showusername ); //

false

從以上執行結果,可以看出obj1.showusername和obj.showusername不是同乙個【在js中,引用型別比較的是位址, 函式是一種引用型別】,而是存在兩個不同

的記憶體位址,因為每個物件的屬性是不一樣的,這個沒有什麼問題,但是方法執行的都是一樣的**,所以沒有必要複製,存在多份,浪費記憶體.這就是缺點

怎麼解決建構函式的方法複製多次的問題?

1

function

createobj(uname)

5function

showusername ()

8var obj1 = new createobj('ghostwu');

9var obj2 = new createobj('衛莊');

10 console.log( obj1.showusername === obj2.showusername ); //

true

把物件的方法指向同乙個全域性函式showusername, 雖然解決了多次複製問題,但是全域性函式非常容易被覆蓋,也就是大家經常說的汙染全域性變數.

比較好的解決方案?

通過原型(prototype)物件,把方法寫在建構函式的原型物件上

1

function

createobj(uname)

4 createobj.prototype.showusername = function()7

var obj1 = new createobj('ghostwu');

8var obj2 = new createobj('衛莊');

9 console.log( obj1.showusername === obj2.showusername ); //

true

什麼是原型物件,以及原型鏈?且聽下回分解

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

上文,通過基本的物件建立問題了解了建構函式,本文,我們接著上文繼續了解建構函式的基本特性,以及優缺點.每個物件上面都有乙個constructor屬性 嚴格意義上來說,是原型上的,物件是通過查詢到原型找到 constructor屬性 後面講到原型的時候,我會用示意圖的方式說明 1 function c...

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

上文,通過基本的物件建立問題了解了建構函式,本文,我們接著上文繼續了解建構函式的基本特性,以及優缺點.每個物件上面都有乙個constructor屬性 嚴格意義上來說,是原型上的,物件是通過查詢到原型找到 constructor屬性 後面講到原型的時候,我會用示意圖的方式說明 1 function c...

JS的建構函式

建構函式 使自己的物件多次複製,同時例項根據設定的訪問等級可以訪問其內部的屬性和方法 當物件被例項化後,建構函式會立即執行它所包含的任何 function myobject msg 特權方法 公有方法 能被外部公開訪問,這個方法每次例項化都要重新構造而 prototype 是原型共享,所有例項化後,...