成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Ajian / 2443人閱讀

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

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

每個(gè)對(duì)象上面都有一個(gè)constructor屬性( 嚴(yán)格意義上來(lái)說(shuō)，是原型上的，對(duì)象是通過(guò)查找到原型找到 constructor屬性 ).后面講到原型的時(shí)候，我會(huì)用示意圖的方式說(shuō)明

 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

默認(rèn)情況下，對(duì)象的constructor等于實(shí)例化對(duì)象的構(gòu)造函數(shù), constructor最初的作用是用來(lái)標(biāo)識(shí)對(duì)象的，但是并不是特別準(zhǔn)確，因?yàn)閏onstructor能被修改,

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

什么是instanceof？

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

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

所以一句話(huà)理解instanceof的運(yùn)算規(guī)則為：

instanceof檢測(cè)左側(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的實(shí)例，因?yàn)樗袑?duì)象繼承自O(shè)bject

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

一個(gè)空對(duì)象，可以借用現(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)點(diǎn)與缺點(diǎn)

優(yōu)點(diǎn)就是能夠通過(guò)instanceof識(shí)別對(duì)象，缺點(diǎn)是每次實(shí)例化一個(gè)對(duì)象，都會(huì)把屬性和方法復(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不是同一個(gè)【在js中，引用類(lèi)型比較的是地址, 函數(shù)是一種引用類(lèi)型】，而是存在兩個(gè)不同
的內(nèi)存地址，因?yàn)槊總€(gè)對(duì)象的屬性是不一樣的，這個(gè)沒(méi)有什么問(wèn)題，但是方法執(zhí)行的都是一樣的代碼，所以沒(méi)有必要復(fù)制，存在多份，浪費(fèi)內(nèi)存.這就是缺點(diǎn)

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

 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

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

比較好的解決方案？

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84946.html

相關(guān)文章

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

    摘要：一，檢測(cè)左側(cè)的原型鏈上，是否存在右側(cè)的原型我在之前的兩篇文章高手之路構(gòu)造函數(shù)的基本特性與優(yōu)缺點(diǎn)高手之路一步步圖解的原型對(duì)象原型鏈已經(jīng)分享過(guò)了衛(wèi)莊二如果隱式原型指向調(diào)用方法的對(duì)象原型那么這個(gè)方法就返回，如衛(wèi)莊因?yàn)榈碾[式原型指向的都是，有朋友可 一，instanceof： instanceof檢測(cè)左側(cè)的__proto__原型鏈上，是否存在右側(cè)的prototype原型. 我在之前的兩篇文章 ...

    svtter 評(píng)論0 收藏0

  • [js高手之路] es6系列教程 - 新的類(lèi)語(yǔ)法實(shí)戰(zhàn)選項(xiàng)卡

    摘要：其實(shí)的面向?qū)ο蠛芏嘣砗蜋C(jī)制還是的，只不過(guò)把語(yǔ)法改成類(lèi)似和老牌后端語(yǔ)言中的面向?qū)ο笳Z(yǔ)法一用封裝一個(gè)基本的類(lèi)是不是很向和中的類(lèi)其實(shí)本質(zhì)還是原型鏈，我們往下看就知道了首先說(shuō)下語(yǔ)法規(guī)則中的就是類(lèi)名，可以自定義就是構(gòu)造函數(shù)，這個(gè)是關(guān)鍵字，當(dāng)實(shí)例化對(duì) 其實(shí)es6的面向?qū)ο蠛芏嘣砗蜋C(jī)制還是ES5的，只不過(guò)把語(yǔ)法改成類(lèi)似php和java老牌后端語(yǔ)言中的面向?qū)ο笳Z(yǔ)法. 一、用es6封裝一個(gè)基本的類(lèi) ...

    yintaolaowanzi 評(píng)論0 收藏0

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

    摘要：原型對(duì)象的共享特性，可以很方便的為一些內(nèi)置的對(duì)象擴(kuò)展一些方法，比如，數(shù)組去重復(fù)但是，不要隨便往內(nèi)置的對(duì)象上面擴(kuò)展方法，在多人協(xié)作開(kāi)發(fā)，很容易產(chǎn)生覆蓋，以及污染 我們先來(lái)一個(gè)簡(jiǎn)單的構(gòu)造函數(shù)+原型對(duì)象的小程序 1 function CreateObj( uName, uAge ) { 2 this.userName = uName; 3 ...

    chnmagnus 評(píng)論0 收藏0

  • [js高手之路]搞清楚面向?qū)ο?必須要理解對(duì)象在創(chuàng)建過(guò)程中的內(nèi)存表示

    摘要：面向?qū)ο缶幊谭绞?，?duì)于初學(xué)者來(lái)說(shuō)，會(huì)比較難懂要學(xué)會(huì)面向?qū)ο笠约笆褂妹嫦驅(qū)ο缶幊?，理解?duì)象的創(chuàng)建在內(nèi)存中的表示，至關(guān)重要首先，我們來(lái)一段簡(jiǎn)單的對(duì)象創(chuàng)建代碼衛(wèi)莊衛(wèi)莊上例，我們創(chuàng)建了兩個(gè)對(duì)象和如果有多個(gè)類(lèi)似對(duì)象，我們可以通過(guò)函數(shù)封裝，這種函數(shù)封裝 javascript面向?qū)ο缶幊谭绞?，?duì)于初學(xué)者來(lái)說(shuō)，會(huì)比較難懂. 要學(xué)會(huì)面向?qū)ο笠约笆褂妹嫦驅(qū)ο缶幊蹋斫鈱?duì)象的創(chuàng)建在內(nèi)存中的表示，至關(guān)重要. ...

    binta 評(píng)論0 收藏0

  • [js高手之路]this知多少

    摘要：關(guān)鍵字在中的變化非常的靈活，如果用的不好就非常惡心，用的好程序就非常的優(yōu)雅，靈活，飄逸所以掌握的用法，是每一個(gè)前端工程師必知必會(huì)的而且這個(gè)也是一些大公司筆試中常見(jiàn)的考察項(xiàng)第一種單獨(dú)的，指向的是這個(gè)對(duì)象注當(dāng)前的執(zhí)行環(huán)境是所以指向了第二種全局函 this關(guān)鍵字在javascript中的變化非常的靈活，如果用的不好就非常惡心，用的好,程序就非常的優(yōu)雅，靈活，飄逸.所以掌握this的用法，是每...

    APICloud 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<