快捷導(dǎo)航

簡(jiǎn)單理解JavaScript中的封裝與繼承特性

更新時(shí)間：2016年03月19日 15:07:36 作者：sjpsega

這篇文章主要介紹了JavaScript中的封裝與繼承特性,封裝與繼承是基于對(duì)象編程概念中的基本特性,需要的朋友可以參考下

JavaScript中的封裝
封裝簡(jiǎn)單地說(shuō)就是讓外界只能訪問(wèn)對(duì)象的共有變量和函數(shù)，隱藏細(xì)節(jié)和數(shù)據(jù)。
js中有三種方法創(chuàng)建對(duì)象，分別為門(mén)戶(hù)大開(kāi)型、用命名規(guī)范區(qū)分私有變量、閉包創(chuàng)建真正的私有變量三種。
1.門(mén)戶(hù)大開(kāi)型，是實(shí)現(xiàn)對(duì)象的最基礎(chǔ)的方法，所有方法與變量都是共有的外界可以訪問(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)型的典型，外界能直接訪問(wèn)對(duì)象的屬性和方法?？梢宰⒁獾綄傩院妥兞慷加?this"來(lái)創(chuàng)建。

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

3.閉包創(chuàng)建真正的私有變量，該方法利用js中只有函數(shù)具有作用域的特性，在構(gòu)造函數(shù)的作用域中定義相關(guān)變量，這些變量可以被定義域該作用域中的所有函數(shù)訪問(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ú)法直接訪問(wèn)name 
    return "display:"+this.getName(); 
  } 
} 
var book2 = new Book2("哈哈"); 
//output:undefined "哈哈" "display:哈哈" 
console.log(book2.name,book2.getName(),book2.display());

可以看到，這個(gè)例子中的結(jié)果，直接訪問(wèn)name會(huì)返回undefined的結(jié)果?？梢钥吹竭@個(gè)例子與門(mén)戶(hù)大開(kāi)型的區(qū)別，門(mén)戶(hù)大開(kāi)型中的變量使用"this"來(lái)創(chuàng)建，而這個(gè)例子中使用var來(lái)創(chuàng)建，check函數(shù)也是如此，使得name與check函數(shù)只能在構(gòu)造函數(shù)的作用域中訪問(wèn)，外界無(wú)法直接訪問(wèn)。
該方法解決了前兩種方法的問(wèn)題，但是也有一定的弊端。在門(mén)戶(hù)大開(kāi)型對(duì)象創(chuàng)建模式中，所有方法都創(chuàng)建在原型對(duì)象中，因此不管生成多少對(duì)象實(shí)例，這些方法在內(nèi)存中只存在一份，而采用該方法，每生成一個(gè)新的對(duì)象都會(huì)為每個(gè)私有變量和方法創(chuàng)建一個(gè)新的副本，故會(huì)耗費(fèi)更多的內(nèi)存。

JavaScript中的繼承
Book基類(lèi)：

var Book = function(name){ 
  if(this.check(name)){ 
    console.log(&quot;error&quot;); 
    throw new Error(&quot;name null&quot;); 
  } 
  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; 
}

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

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

添加這三句可以避免子類(lèi)繼承父類(lèi)寫(xiě)B(tài)ook.call(this,name);而是簡(jiǎn)單地寫(xiě)ArtBook.superClass.Constructor.call(this,name)便能實(shí)現(xiàn)。
并且在子類(lèi)重寫(xiě)父類(lèi)方法的時(shí)候，可以調(diào)用到父類(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)+"!!!"; 
 }

您可能感興趣的文章: