理解javascript封装
封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。
在JavaScript中，并没有显示的声明私有成员的关键字等。所以要想实现封装/信息隐藏就需要从另外的思路出发。我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性，来达到封装的要求。
基本方式
一般来说，我们学用的有三种方法来达到封装的目的。
使用this.XXX来声明一个变量，然后再声明getXXX、setXXX等取值、赋值的方法。
使用this._XXX来声明一个变量，然后再声明getXXX、setXXX等取值、赋值的方法。
利用“函数作用域”这一个概念来做。
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;
}
};
使用这种方法实现的封装，虽然实现了取值器与赋值器以保护私有属性。但是在实际使用中，私有属性依然可以从外部访问，所以从根本上讲，没有实现封装。
2. 用命名规范进行区别
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;
}
};
使用这种方法与第一种类似，区别在于使用不同的命名来保护私有属性的使用。但是，从实际应用来说其仍然没有实现封装。
3. 使用函数作用域
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的函数中声明的变量是有作用域的，所以使用这种方法可以避免在外部直接访问私有属性。基本达到封装所要求的内容。
这里要注意的是，我们在函数的内部，可以使用this.XXX以及var来声明变量。区别是使用this.XXX声明的变量在外部是可以访问的。使用var声明的变量，由于受到函数作用域的保护，在函数的外部是无法直接访问的。
4. 使用函数作用域的变形
var Book = (function(){
// ...其他静态方法
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;
};
};
})();
这种方法是直接返回一个构造器的执行。且这里的构造器是一个内嵌函数。
这种方法的优点是“在内存中只会存在一份。因为其他静态方法被声明在构造器之外，所以它们不是特权方法。”
判断一个方法是否应该被设计为静态方法的原则是“这个方法是否会访问私有属性”。如果它不需要，那么将其设计为静态方法会更有效率，因为它只会被创建一份。
常量
我们可以使用“只有取值器，没有赋值器”的方式来实现常量。
// 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、利处
封装保护了内部数据的完整性；
封装使对象的重构更轻松；
弱化模块间的耦合，提高对象的可重用性；
有助于避免命名空间冲突；
……
2、弊处
私用方法很难测试；
必须与复杂的作用域链打交道，使错误调度更困难；
容易形成过度封装；
JavaScript并不原生支持封装，所以在JavaScript中实现封装存在复杂性的问题；
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现循环嵌套数据选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了JavaScript通过事件代理高亮显示表格行的方法,涉及javascript事件代理及页面元素的操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了javascript用函数实现对象的方法,涉及javascript函数使用技巧,需要的朋友可以参考下2015-05-05
for...in循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引，下面有个不错的示例大家可以参考下2013-11-11
这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了Javascript无参数和有参数类继承问题解决方法,本文讲解了无参数类继承的问题和有参类继承的问题,并给出了解决方案,需要的朋友可以参考下2015-03-03
本文主要介绍了js中函数的length是多少，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了JavaScript+CSS实现模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章给大家分享了两种Javascript从数组中随机取出不同元素的方法，大家可以都学习学习，这样更能有助于大家的学习和理解，下面来一起看看吧2016-09-09
最近应项目要求，需要对table中的数据进行升序或降序排列，于是研究了一下js，希望对大家有帮助。2011-08-08
最新评论