欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

理解javascript封裝

 更新時間:2016年02月23日 10:21:43   投稿:lijiao  
這篇文章主要幫助大家理解學習javascript封裝,通過封裝可以強制實施信息隱藏,本文為大家分析了封裝的利弊,感興趣的小伙伴們可以參考一下

封裝可以被定義為對對象的內(nèi)部數(shù)據(jù)表現(xiàn)形式和實現(xiàn)細節(jié)進行隱藏。通過封裝可以強制實施信息隱藏。

在JavaScript中,并沒有顯示的聲明私有成員的關(guān)鍵字等。所以要想實現(xiàn)封裝/信息隱藏就需要從另外的思路出發(fā)。我們可以使用閉包的概念來創(chuàng)建只允許從對象內(nèi)部訪問的方法和屬性,來達到封裝的要求。

基本方式
一般來說,我們學用的有三種方法來達到封裝的目的。

使用this.XXX來聲明一個變量,然后再聲明getXXX、setXXX等取值、賦值的方法。
使用this._XXX來聲明一個變量,然后再聲明getXXX、setXXX等取值、賦值的方法。
利用“函數(shù)作用域”這一個概念來做。
1. 門戶大開型

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this.isbn = isbn;
 },
 getIsbn: function(){
  return this.isbn;
 },
 setTitle: function(title){
  this.title = title;
 },
 getTitle: function(){
  return this.title;
 },
 setAuthor: function(author){
  this.author = author;
 },
 getAuthor: function(){
  return this.author;
 }
};

使用這種方法實現(xiàn)的封裝,雖然實現(xiàn)了取值器與賦值器以保護私有屬性。但是在實際使用中,私有屬性依然可以從外部訪問,所以從根本上講,沒有實現(xiàn)封裝。

2. 用命名規(guī)范進行區(qū)別

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this._isbn = isbn;
 },
 getIsbn: function(){
  return this._isbn;
 },
 setTitle: function(title){
  this._title = title;
 },
 getTitle: function(){
  return this._title;
 },
 setAuthor: function(author){
  this._author = author;
 },
 getAuthor: function(){
  return this._author;
 }
};

使用這種方法與第一種類似,區(qū)別在于使用不同的命名來保護私有屬性的使用。但是,從實際應用來說其仍然沒有實現(xiàn)封裝。

3. 使用函數(shù)作用域

var Book = function(newIsbn,newTitle,newAuthor){
 var isbn,title,author;

 this.setIsbn=function(newIsbn){
  isbn = newIsbn;
 };
 this.getIsbn=function(){
  return isbn;
 };
 this.setTitle=function(newTitle){
  title = newTitle;
 };
 this.getTitle=function(){
  return title;
 };
 this.setIsbn=function(newAuthor){
  author = newAuthor;
 };
 this.getIsbn=function(){
  return author;
 };
}

由于在JavaScript的函數(shù)中聲明的變量是有作用域的,所以使用這種方法可以避免在外部直接訪問私有屬性?;具_到封裝所要求的內(nèi)容。

這里要注意的是,我們在函數(shù)的內(nèi)部,可以使用this.XXX以及var來聲明變量。區(qū)別是使用this.XXX聲明的變量在外部是可以訪問的。使用var聲明的變量,由于受到函數(shù)作用域的保護,在函數(shù)的外部是無法直接訪問的。

4. 使用函數(shù)作用域的變形

var Book = (function(){
 // ...其他靜態(tài)方法

 return function(newIsbn,newTitle,newAuthor){
  var isbn,title,author;

  this.setIsbn=function(newIsbn){
   isbn = newIsbn;
  };
  this.getIsbn=function(){
   return isbn;
  };
  this.setTitle=function(newTitle){
   title = newTitle;
  };
  this.getTitle=function(){
   return title;
  };
  this.setIsbn=function(newAuthor){
   author = newAuthor;
  };
  this.getIsbn=function(){
   return author;
  };
 };
})();

這種方法是直接返回一個構(gòu)造器的執(zhí)行。且這里的構(gòu)造器是一個內(nèi)嵌函數(shù)。

這種方法的優(yōu)點是“在內(nèi)存中只會存在一份。因為其他靜態(tài)方法被聲明在構(gòu)造器之外,所以它們不是特權(quán)方法。”

判斷一個方法是否應該被設計為靜態(tài)方法的原則是“這個方法是否會訪問私有屬性”。如果它不需要,那么將其設計為靜態(tài)方法會更有效率,因為它只會被創(chuàng)建一份。

常量
我們可以使用“只有取值器,沒有賦值器”的方式來實現(xiàn)常量。

// 1.
var Book = function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 this.getConstant = function(key){
  return constants[key];
 };
};

Book.getConstant("key1");

// 2.
var Book = (function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 var con = function(){};
 con.getConstant = function(name){
  return constants[name];
 };

 return con;
})();

Book.getConstant("key1");

利弊
1、利處

封裝保護了內(nèi)部數(shù)據(jù)的完整性;
封裝使對象的重構(gòu)更輕松;
弱化模塊間的耦合,提高對象的可重用性;
有助于避免命名空間沖突;
……
2、弊處

私用方法很難測試;
必須與復雜的作用域鏈打交道,使錯誤調(diào)度更困難;
容易形成過度封裝;
JavaScript并不原生支持封裝,所以在JavaScript中實現(xiàn)封裝存在復雜性的問題;

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。

相關(guān)文章

  • Bootstrap 填充Json數(shù)據(jù)的實例代碼

    Bootstrap 填充Json數(shù)據(jù)的實例代碼

    本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01
  • 深入理解JavaScript系列(16) 閉包(Closures)

    深入理解JavaScript系列(16) 閉包(Closures)

    本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包(closure)。閉包其實大家都已經(jīng)談爛了。盡管如此,這里還是要試著從理論角度來討論下閉包,看看ECMAScript中的閉包內(nèi)部究竟是如何工作的
    2012-04-04
  • 詳解cocoscreater預制體prefab

    詳解cocoscreater預制體prefab

    這篇文章主要介紹了詳解cocoscreater預制體prefab的作用和使用方法,對此感興趣的同學,可以回去試一試
    2021-04-04
  • js 綁定鍵盤鼠標事件示例代碼

    js 綁定鍵盤鼠標事件示例代碼

    用jq提交時想同時按回車鍵可以提交,此時就不要用form,需要的朋友可以參考下
    2014-02-02
  • js實現(xiàn)列表向上無限滾動

    js實現(xiàn)列表向上無限滾動

    這篇文章主要為大家詳細介紹了js實現(xiàn)列表向上無限滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • 微信小程序?qū)崿F(xiàn)彈出層效果

    微信小程序?qū)崿F(xiàn)彈出層效果

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)常見彈出層效果 ,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • JavaScript實現(xiàn)字符雨效果

    JavaScript實現(xiàn)字符雨效果

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)字符雨效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果)

    JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果)

    這篇文章主要介紹了JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友一起看看吧
    2016-05-05
  • KnockoutJS 3.X API 第四章之表單value綁定

    KnockoutJS 3.X API 第四章之表單value綁定

    Knockout是一個以數(shù)據(jù)模型(data model)為基礎的能夠幫助你創(chuàng)建富文本,響應顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • JavaScript中新數(shù)組分組方法詳解

    JavaScript中新數(shù)組分組方法詳解

    對數(shù)組中的項目進行分組,你可能已經(jīng)做過很多次了,好消息是,JavaScript?現(xiàn)在有了分組方法,所以你再也不必這樣做了,下面我們就來看看它們的具體使用吧
    2024-02-02

最新評論