當前位置:才華齋>設計>網頁設計>

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

網頁設計 閱讀(1.86W)

  JavaScript中的封裝

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

封裝簡單地說就是讓外界只能訪問物件的共有變數和函式,隱藏細節和資料。

js中有三種方法建立物件,分別為門戶大開型、用命名規範區分私有變數、閉包建立真正的私有變數三種。

1.門戶大開型,是實現物件的最基礎的方法,所有方法與變數都是共有的外界可以訪問。

var Book = function(name){ if(k(name)){ ("error"); throw new Error("name null"); } = name; } otype = { check:function(name){ if(!name){ return true; } }, getName:function(){ return ; } } var book = new Book("哈哈"); //output:哈哈 哈哈 (,ame());

這個例子是門戶大開型的典型,外界能直接訪問物件的屬性和方法。可以注意到屬性和變數都有"this"來建立。

2.用命名規範區分私有變數,該方法是門戶大開型的優化版本,只不過是在私有變數或方法前面用"_"區分,如果有程式設計師有意使用_getName()的方法來呼叫方法,還是無法阻止的,不是真正地將變數隱藏。

3.閉包建立真正的私有變數,該方法利用js中只有函式具有作用域的特性,在建構函式的作用域中定義相關變數,這些變數可以被定義域該作用域中的所有函式訪問。

var Book2 = function(name){ if(check(name)){ ("error"); throw new Error("name null"); } name = name; function check(name){ if(!name){ return true; } } ame = function(){ return name; } } otype = { display:function(){ //無法直接訪問name return "display:"+ame(); } } var book2 = new Book2("哈哈"); //output:undefined "哈哈" "display:哈哈" (,ame(),lay());

可以看到,這個例子中的結果,直接訪問name會返回undefined的結果。可以看到這個例子與門戶大開型的'區別,門戶大開型中的變數使用"this"來建立,而這個例子中使用var來建立,check函式也是如此,使得name與check函式只能在建構函式的作用域中訪問,外界無法直接訪問。

該方法解決了前兩種方法的問題,但是也有一定的弊端。在門戶大開型物件建立模式中,所有方法都建立在原型物件中,因此不管生成多少物件例項,這些方法在記憶體中只存在一份,而採用該方法,每生成一個新的物件都會為每個私有變數和方法建立一個新的副本,故會耗費更多的記憶體。

 JavaScript中的繼承

Book基類:

var Book = function(name){ if(k(name)){ ("error"); throw new Error("name null"); } = name; } otype = { check:function(name){ if(!name){ return true; } }, getName:function(){ return ; } }

繼承方法:

function extend(subClz,superClz){ var F = function(){} otype = otype; otype = new F(); tructor = subClz; rClass = otype; if(tructor == tructor){ tructor = superClz; }

使用空函式F作為橋接,可以避免直接例項化父類時呼叫父類的建構函式帶來額外開銷,而且當父類的建構函式有引數時,想直接通過otype = new superClass();實現父類建構函式的呼叫和原型鏈的繼承是不行的。

rClass = otype; if(tructor == tructor){ tructor = superClz; }

新增這三句可以避免子類繼承父類寫(this,name);而是簡單地寫(this,name)便能實現。

並且在子類重寫父類方法的時候,可以調用到父類的方法:

ame = functiion(){ return (this) + "!!!"; }

ArtBook子類:

var ArtBook = function(name,price){ (this,name); e = price; } extend(ArtBook,Book); rice = function(){ return e; } ame = function(){ return (this)+"!!!"; }