封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。

在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");

利弊

利处

  • 封装保护了内部数据的完整性;
  • 封装使对象的重构更轻松;
  • 弱化模块间的耦合,提高对象的可重用性;
  • 有助于避免命名空间冲突;
  • ……

弊处

  • 私用方法很难测试;
  • 必须与复杂的作用域链打交道,使错误调度更困难;
  • 容易形成过度封装;
  • JavaScript并不原生支持封装,所以在JavaScript中实现封装存在复杂性的问题;
  • ……

『JavaScript』封装的更多相关文章

  1. [原创] 【2014.12.02更新网盘链接】基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装

    [原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...

  2. 『JavaScript』核心

    弱类型语言 JavaScript是一种弱类型的语言.变量可以根据所赋的值改变类型.原始类型之间也可以进行类型转换.其弱类型的物质为其带来了极大的灵活性. 注意:原始类型使用值传递,复合类型使用引用传递 ...

  3. 『JavaScript』new关键字

    原文 new关键字做了什么 在JavaScript中,使用new关键字后,意味着做了如下四件事情: 创建一个新的对象,这个对象的类型是object: 设置这个新的对象的内部.可访问性和[[protot ...

  4. 『JavaScript』模仿接口

    JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...

  5. 转:『代码』JS封装 Ajax级联下拉列表

    在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...

  6. 『TensorFlow』专题汇总

    TensorFlow:官方文档 TensorFlow:项目地址 本篇列出文章对于全零新手不太合适,可以尝试TensorFlow入门系列博客,搭配其他资料进行学习. Keras使用tf.Session训 ...

  7. 『TensorFlow』批处理类

    『教程』Batch Normalization 层介绍 基础知识 下面有莫凡的对于批处理的解释: fc_mean,fc_var = tf.nn.moments( Wx_plus_b, axes=[0] ...

  8. 『TensorFlow』读书笔记_VGGNet

    VGGNet网络介绍 VGG系列结构图, 『cs231n』卷积神经网络工程实践技巧_下 1,全部使用3*3的卷积核和2*2的池化核,通过不断加深网络结构来提升性能. 所有卷积层都是同样大小的filte ...

  9. 『TensorFlow』命令行参数解析

    argparse很强大,但是我们未必需要使用这么繁杂的东西,TensorFlow自己封装了一个简化版本的解析方式,实际上是对argparse的封装 脚本化调用tensorflow的标准范式: impo ...

随机推荐

  1. POJ 1503 大整数

    之前做的大整数,都是一位一位操作. 优化方案:压缩方案. 模板: + - *  操作符重载 #include<cstdio> #include<iostream> #inclu ...

  2. Node.js使用MySQL数据库中对RowDataPacket对象的使用

    使用Node.js开发使用MySQL数据库的网站,在查询后返回一RowDataPacket类型的对象 原先使用toString()方法一直得到仅为object的字符串,无法使用 后思考,才发现忽略了其 ...

  3. 基于bootstrap模态框的二次封装

    一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...

  4. 使用vue自定义组件以及动态时间

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 【luogu P4568 [JLOI2011]飞行路线】 题解

    题目链接:https://www.luogu.org/problemnew/show/P4568 卡了一晚上,算是分层图最短路的模板.注意卡SPFA,所以我写了个SLF优化. 同时 AC400祭!~ ...

  6. 【luogu P1972 [SDOI2009]HH的项链】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1972 真是不懂为什么要卡莫队! #include <cmath> #include <cs ...

  7. Windows下安装PCL点云库

    原文链接:http://blog.csdn.net/u012337034/article/details/38270109 简介:         在Windows下安装PCL点云库的方法大概有两种: ...

  8. C# 通过socket实现UDP 通信

    UDP不属于面向连接的通信,在选择使用协议的时候,选择UDP必须要谨慎.在网络质量令人十分不满意的环境下,UDP协议数据包丢失会比较严重.但是由于UDP的特性:它不属于连接型协议,因而具有资源消耗小, ...

  9. Extjs 4.2 panel 添加 click 事件及右键菜单

    listeners: { render: function(c) { c.body.on('click', function() { //TODO 添加点击事件功能 }); c.body.on('co ...

  10. 整理下react中常见的坑

    其实有些也不能算是坑,有些是react的规定,或者是react的模式和平常的js处理的方式不同罢了 1.setState()是异步的this.setState()会调用render方法,但并不会立即改 ...