理解JavaScript中的封裝與繼承特性

　　JavaScript中的封裝

　　封裝簡(jiǎn)單地說(shuō)就是讓外界只能訪(fǎng)問(wèn)對象的共有變量和函數，隱藏細節和數據。

　　js中有三種方法創(chuàng )建對象，分別為門(mén)戶(hù)大開(kāi)型、用命名規范區分私有變量、閉包創(chuàng )建真正的私有變量三種。

　　1.門(mén)戶(hù)大開(kāi)型，是實(shí)現對象的最基礎的方法，所有方法與變量都是共有的外界可以訪(fǎng)問(wèn)。

　　var Book = function(name){ if(this.check(name)){ console.log("error"); throw new Error("name null"); } this.name = name; } Book.prototype = { check:function(name){ if(!name){ return true; } }, getName:function(){ return this.name; } } var book = new Book("哈哈"); //output:哈哈 哈哈 console.log(book.name,book.getName());

　　這個(gè)例子是門(mén)戶(hù)大開(kāi)型的典型，外界能直接訪(fǎng)問(wèn)對象的屬性和方法�？梢宰⒁獾綄傩院妥兞慷加�"this"來(lái)創(chuàng )建。

　　2.用命名規范區分私有變量，該方法是門(mén)戶(hù)大開(kāi)型的優(yōu)化版本，只不過(guò)是在私有變量或方法前面用"_"區分，如果有程序員有意使用_getName()的方法來(lái)調用方法，還是無(wú)法阻止的，不是真正地將變量隱藏。

　　3.閉包創(chuàng )建真正的私有變量，該方法利用js中只有函數具有作用域的特性，在構造函數的作用域中定義相關(guān)變量，這些變量可以被定義域該作用域中的所有函數訪(fǎng)問(wèn)。

　　var Book2 = function(name){ if(check(name)){ console.log("error"); throw new Error("name null"); } name = name; function check(name){ if(!name){ return true; } } this.getName = function(){ return name; } } Book2.prototype = { display:function(){ //無(wú)法直接訪(fǎng)問(wèn)name return "display:"+this.getName(); } } var book2 = new Book2("哈哈"); //output:undefined "哈哈" "display:哈哈" console.log(book2.name,book2.getName(),book2.display());

　　可以看到，這個(gè)例子中的結果，直接訪(fǎng)問(wèn)name會(huì )返回undefined的結果�？梢钥吹竭@個(gè)例子與門(mén)戶(hù)大開(kāi)型的區別，門(mén)戶(hù)大開(kāi)型中的變量使用"this"來(lái)創(chuàng )建，而這個(gè)例子中使用var來(lái)創(chuàng )建，check函數也是如此，使得name與check函數只能在構造函數的作用域中訪(fǎng)問(wèn)，外界無(wú)法直接訪(fǎng)問(wèn)。

　　該方法解決了前兩種方法的問(wèn)題，但是也有一定的弊端。在門(mén)戶(hù)大開(kāi)型對象創(chuàng )建模式中，所有方法都創(chuàng )建在原型對象中，因此不管生成多少對象實(shí)例，這些方法在內存中只存在一份，而采用該方法，每生成一個(gè)新的對象都會(huì )為每個(gè)私有變量和方法創(chuàng )建一個(gè)新的副本，故會(huì )耗費更多的內存。

　　JavaScript中的繼承

　　Book基類(lèi)：

　　var Book = function(name){ if(this.check(name)){ console.log("error"); throw new Error("name null"); } this.name = name; } Book.prototype = { check:function(name){ if(!name){ return true; } }, getName:function(){ return this.name; } }

　　繼承方法：

　　function extend(subClz,superClz){ var F = function(){} F.prototype = superClz.prototype; subClz.prototype = new F(); subClz.prototype.constructor = subClz; subClz.superClass = superClz.prototype; if(superClz.prototype.constructor == Object.prototype.constructor){ superClz.prototype.constructor = superClz; }

　　使用空函數F作為橋接，可以避免直接實(shí)例化父類(lèi)時(shí)調用父類(lèi)的構造函數帶來(lái)額外開(kāi)銷(xiāo)，而且當父類(lèi)的構造函數有參數時(shí)，想直接通過(guò)subClass.prototype = new superClass();實(shí)現父類(lèi)構造函數的調用和原型鏈的繼承是不行的。

　　subClz.superClass = superClz.prototype; if(superClz.prototype.constructor == Object.prototype.constructor){ superClz.prototype.constructor = superClz; }

　　添加這三句可以避免子類(lèi)繼承父類(lèi)寫(xiě)Book.call(this,name);而是簡(jiǎn)單地寫(xiě)ArtBook.superClass.Constructor.call(this,name)便能實(shí)現。

　　并且在子類(lèi)重寫(xiě)父類(lèi)方法的時(shí)候，可以調用到父類(lèi)的方法：

　　ArtBook.prototype.getName = functiion(){ return ArtBook.superClass.getName.call(this) + "!!!"; }

　　ArtBook子類(lèi)：

　　var ArtBook = function(name,price){ ArtBook.superClass.Constructor.call(this,name); this.price = price; } extend(ArtBook,Book); ArtBook.prototype.getPrice = function(){ return this.price; } ArtBook.prototype.getName = function(){ return ArtBook.superClass.getName.call(this)+"!!!"; }

【理解JavaScript中的封裝與繼承特性】相關(guān)文章：

對javascript的理解08-08

javascript面向對象中的對象怎么理解09-02

淺談javascript中的單線(xiàn)程理解08-16

有關(guān)深入理解JavaScript中的并行處理的介紹10-14

理解JavaScript原型鏈教程09-02

javascript的閉包概念怎么理解06-15

JavaScript中的with關(guān)鍵字07-24

在Java中執行JavaScript代碼07-14

Javascript中typeof 用法歸納09-27

抽象語(yǔ)法樹(shù)在JavaScript中的應用08-18