理解javascript封裝
封裝可以被定義為對對象的內(nèi)部數(shù)據(jù)表現(xiàn)形式和實現(xiàn)細節(jié)進行隱藏。通過封裝可以強制實施信息隱藏。
在JavaScript中，并沒有顯示的聲明私有成員的關鍵字等。所以要想實現(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)造器之外，所以它們不是特權方法?！?/p>
判斷一個方法是否應該被設計為靜態(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)容，希望對大家的學習有所幫助。
相關文章
微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)循環(huán)嵌套數(shù)據(jù)選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了JavaScript通過事件代理高亮顯示表格行的方法,涉及javascript事件代理及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
javascript用函數(shù)實現(xiàn)對象的方法
這篇文章主要介紹了javascript用函數(shù)實現(xiàn)對象的方法,涉及javascript函數(shù)使用技巧,需要的朋友可以參考下2015-05-05
JavaScript中for..in循環(huán)陷阱介紹
for...in循環(huán)中的循環(huán)計數(shù)器是字符串，而不是數(shù)字它包含當前屬性的名稱或當前數(shù)組元素的索引，下面有個不錯的示例大家可以參考下2013-11-11
javascript利用canvas實現(xiàn)鼠標拖拽功能
這篇文章主要為大家詳細介紹了javascript利用canvas實現(xiàn)鼠標拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
Javascript無參數(shù)和有參數(shù)類繼承問題解決方法
這篇文章主要介紹了Javascript無參數(shù)和有參數(shù)類繼承問題解決方法,本文講解了無參數(shù)類繼承的問題和有參類繼承的問題,并給出了解決方案,需要的朋友可以參考下2015-03-03
本文主要介紹了js中函數(shù)的length是多少，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript+CSS實現(xiàn)模態(tài)框效果
這篇文章主要為大家詳細介紹了JavaScript+CSS實現(xiàn)模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Javascript從數(shù)組中隨機取出不同元素的兩種方法
這篇文章給大家分享了兩種Javascript從數(shù)組中隨機取出不同元素的方法，大家可以都學習學習，這樣更能有助于大家的學習和理解，下面來一起看看吧2016-09-09
最近應項目要求，需要對table中的數(shù)據(jù)進行升序或降序排列，于是研究了一下js，希望對大家有幫助。2011-08-08