社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 面向对象的Javascript之三(封装和信息隐藏)_js面向对象

面向对象的Javascript之三(封装和信息隐藏)_js面向对象

WBOY
发布： 2016-05-16 17:56:42
原创
1012 人浏览过

同时，我们知道在面向对象的高级语言中，创建包含私有成员的对象是最基本的特性之一，提供属性和方法对私有成员进行访问来隐藏内部的细节。虽然JS也是面向对象的，但没有内部机制可以直接表明一个成员是公有还是私有的。还是那句话，依靠JS的语言灵活性，我们可以创建公共、私有和特权成员，信息隐藏是我们要实现的目标，而封装是我们实现这个目标的方法。我们还是从一个示例来说明：创建一个类来存储图书数据，并实现可以在网页中显示这些数据。

1. 最简单的是完全暴露对象。使用构造函数创建一个类，其中所有的属性和方法在外部都是可以访问的。

复制代码 代码如下:

var Book = function(isbn, title, author) {
if(isbn == undefined) {
throw new Error("Book constructor requires a isbn.");
}
this.isbn = isbn;
this.title = title || "";
this.author = author || "";
}
Book.prototype.display = function() {
return "Book: ISBN: " + this.isbn + ",Title: " + this.title + ",Author: " + this.author;
}

display方法依赖于isbn是否正确，如果不是你将无法获取图像以及链接。考虑到这点，每本图书isbn必须存在的，而图书的标题和作者是可选的。表面上看只要指定一个isbn参数似乎就能正常运行。但却不能保证isbn的完整性，基于此我们加入isbn的验证，使图书的检查更加健壮。
复制代码 代码如下:

var Book = function(isbn, title, author) {
if(!this.checkIsbn(isbn)) {
throw new Error("Book: invalid ISBN.");
}
this.isbn = isbn;
this.title = title || "";
this.author = author || "";
}
Book.prototype = {
checkIsbn: function(isbn) {
if(isbn == undefined || typeof isbn != "string") return false;
isbn = isbn.replace("-", "");
if(isbn.length != 10 && isbn.length != 13) return false;
var sum = 0;
if(isbn.length == 10) {
if(!isbn.match(\^\d{9}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (10 - i);
}
var checksum = sum % 11;
if(checksum == 10) checksum = "X";
if(isbn.charAt(9) != checksum) return false;
} else {
if(!isbn.match(\^\d{12}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (i % 2 == 0 ? 1 : 3);
}
var checksum = sum % 10;
if(isbn.charAt(12) != checksum) return false;
}
return true;
},
display: function() {
return "Book: ISBN: " + this.isbn + ",Title: " + this.title + ",Author: " + this.author;
}
};

我们添加了checkIsbn()来验证ISBN的有效性，确保display()可以正常运行。但是需求有变化了，每本书可能有多个版本，意味着同一本可能有多个ISBN号存在，需要维护单独的选择版本的算法来控制。同时尽管能检查数据的完整性，但却无法控制外部对内部成员的访问(如对isbn,title,author赋值)，就谈不上保护内部数据了。我们继续改进这个方案，采用接口实现(提供get访问器/set存储器)。
复制代码 代码如下:

var Publication = new Interface("Publication", ["getIsbn", "setIsbn", "checkIsbn", "getTitle", "setTitle", "getAuthor", "setAuthor", "display"]);
var Book = function(isbn, title, author) {
// implements Publication interface
this.setIsbn(isbn);
this.setTitle(title);
this.setAuthor(author);
}
Book.prototype = {
getIsbn: function() {
return this.isbn;
},
setIsbn: function(isbn) {
if(!this.checkIsbn(isbn)) {
throw new Error("Book: Invalid ISBN.");
}
this.isbn = isbn;
},
checkIsbn: function(isbn) {
if(isbn == undefined || typeof isbn != "string") return false;
isbn = isbn.replace("-", "");
if(isbn.length != 10 && isbn.length != 13) return false;
var sum = 0;
if(isbn.length == 10) {
if(!isbn.match(\^\d{9}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (10 - i);
}
var checksum = sum % 11;
if(checksum == 10) checksum = "X";
if(isbn.charAt(9) != checksum) return false;
} else {
if(!isbn.match(\^\d{12}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (i % 2 == 0 ? 1 : 3);
}
var checksum = sum % 10;
if(isbn.charAt(12) != checksum) return false;
}
return true;
},
getTitle: function() {
return this.title;
},
setTitle: function(title) {
this.title = title || "";
},
getAuthor: function() {
return this.author;
},
setAuthor: function(author) {
this.author = author || "";
},
display: function() {
return "Book: ISBN: " + this.isbn + ",Title: " + this.title + ",Author: " + this.author;
}
};

现在就可以通过接口Publication来与外界进行通信。赋值方法也在构造器内部完成，不需要实现两次同样的验证，看似非常完美的完全暴露对象方案了。虽然能通过set存储器来设置属性，但这些属性仍然是公有的，可以直接赋值。但此方案到此已经无能为力了，我会在第二种信息隐藏解决方案中来优化。尽管如此，此方案对于那些没有深刻理解作用域的新手非常容易上手。唯一的不足是不能保护内部数据且存储器增加了多余的不必要代码。
2. 使用命名规则的私有方法。就是使用下划线来标识私有成员，避免无意中对私有成员进行赋值，本质上与完全暴露对象是一样的。但这却避免了第一种方案无意对私有成员进行赋值操作，却依然不能避免有意对私有成员进行设置。只是说定义了一种命名规范，需要团队成员来遵守，不算是一种真正的内部信息隐藏的完美方案。
复制代码 代码如下:

var Publication = new Interface("Publication", ["getIsbn", "setIsbn", "getTitle", "setTitle", "getAuthor", "setAuthor", "display"]);
var Book = function(isbn, title, author) {
// implements Publication interface
this.setIsbn(isbn);
this.setTitle(title);
this.setAuthor(author);
}
Book.prototype = {
getIsbn: function() {
return this._isbn;
},
setIsbn: function(isbn) {
if(!this._checkIsbn(isbn)) {
throw new Error("Book: Invalid ISBN.");
}
this._isbn = isbn;
},
_checkIsbn: function(isbn) {
if(isbn == undefined || typeof isbn != "string") return false;
isbn = isbn.replace("-", "");
if(isbn.length != 10 && isbn.length != 13) return false;
var sum = 0;
if(isbn.length == 10) {
if(!isbn.match(\^\d{9}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (10 - i);
}
var checksum = sum % 11;
if(checksum == 10) checksum = "X";
if(isbn.charAt(9) != checksum) return false;
} else {
if(!isbn.match(\^\d{12}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (i % 2 == 0 ? 1 : 3);
}
var checksum = sum % 10;
if(isbn.charAt(12) != checksum) return false;
}
return true;
},
getTitle: function() {
return this._title;
},
setTitle: function(title) {
this._title = title || "";
},
getAuthor: function() {
return this._author;
},
setAuthor: function(author) {
this._author = author || "";
},
display: function() {
return "Book: ISBN: " + this.getIsbn() + ",Title: " + this.getTitle() + ",Author: " + this.getAuthor();
}
};

注意：除了isbn,title,author属性被加上"_"标识为私有成员外，checkIsbn()也被标识为私有方法。

3. 通过闭包来真正私有化成员。如果对闭包概念中的作用域和嵌套函数不熟悉的朋友，可以参考"面向对象的Javascript之一(初识Javascript)"文章，这里不再详细论述。
复制代码 代码如下:

var Publication = new Interface("Publication", ["getIsbn", "setIsbn", "getTitle", "setTitle", "getAuthor", "setAuthor", "display"]);
var Book = function(newIsbn, newTitle, newAuthor) {
// private attribute
var isbn, title, author;
// private method
function checkIsbn(isbn) {
if(isbn == undefined || typeof isbn != "string") return false;
isbn = isbn.replace("-", "");
if(isbn.length != 10 && isbn.length != 13) return false;
var sum = 0;
if(isbn.length == 10) {
if(!isbn.match(\^\d{9}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (10 - i);
}
var checksum = sum % 11;
if(checksum == 10) checksum = "X";
if(isbn.charAt(9) != checksum) return false;
} else {
if(!isbn.match(\^\d{12}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (i % 2 == 0 ? 1 : 3);
}
var checksum = sum % 10;
if(isbn.charAt(12) != checksum) return false;
}
return true;
}
// previleged method
this.getIsbn = function() {
return isbn;
};
this.setIsbn = function(newIsbn) {
if(!checkIsbn(newIsbn)) {
throw new Error("Book: Invalid ISBN.");
}
isbn = newIsbn;
}
this.getTitle = function() {
return title;
},
this.setTitle = function(newTitle) {
title = newTitle || "";
},
this.getAuthor: function() {
return author;
},
this.setAuthor: function(newAuthor) {
author = newAuthor || "";
}
// implements Publication interface
this.setIsbn(newIsbn);
this.setTitle(newTitle);
this.setAuthor(newAuthor);
}
// public methods
Book.prototype = {
display: function() {
return "Book: ISBN: " + this.getIsbn() + ",Title: " + this.getTitle() + ",Author: " + this.getAuthor();
}
};

这种方案与上一种有哪些不同呢？首先，在构造器中使用var来声明三个私有成员，同样也声明了私有方法checkIsbn()，仅仅在构造器中有效。使用this关键字声明特权方法，即声明在构造器内部但却可以访问私有成员。任何不需要访问私有成员的方法都在Book.prototype中声明(如：display)，也即是将需要访问私有成员的方法声明为特权方法是解决这个问题的关键。但此访问也有一定缺陷，如对每一个实例而言，都要创建一份特权方法的副本，势必需要更多内存。我们继续优化，采用静态成员来解决所面临的问题。顺便提一句：静态成员仅仅属于类，所有的对象仅共用一份副本(在"面向对象的Javascript之二(实现接口)中有说明，参见Interface.ensureImplements方法")，而实例方法是针对对象而言。
复制代码 代码如下:

var Publication = new Interface("Publication", ["getIsbn", "setIsbn", "getTitle", "setTitle", "getAuthor", "setAuthor", "display"]);
var Book = (function() {
// private static attribute
var numsOfBooks = 0;
// private static method
function checkIsbn(isbn) {
if(isbn == undefined || typeof isbn != "string") return false;
isbn = isbn.replace("-", "");
if(isbn.length != 10 && isbn.length != 13) return false;
var sum = 0;
if(isbn.length == 10) {
if(!isbn.match(\^\d{9}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (10 - i);
}
var checksum = sum % 11;
if(checksum == 10) checksum = "X";
if(isbn.charAt(9) != checksum) return false;
} else {
if(!isbn.match(\^\d{12}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (i % 2 == 0 ? 1 : 3);
}
var checksum = sum % 10;
if(isbn.charAt(12) != checksum) return false;
}
return true;
}
// return constructor
return function(newIsbn, newTitle, newAuthor) {
// private attribute
var isbn, title, author;
// previleged method
this.getIsbn = function() {
return isbn;
};
this.setIsbn = function(newIsbn) {
if(!Book.checkIsbn(newIsbn)) {
throw new Error("Book: Invalid ISBN.");
}
isbn = newIsbn;
}
this.getTitle = function() {
return title;
},
this.setTitle = function(newTitle) {
title = newTitle || "";
},
this.getAuthor = function() {
return author;
},
this.setAuthor = function(newAuthor) {
author = newAuthor || "";
}
Book.numsOfBooks++;
if(Book.numsOfBooks > 50) {
throw new Error("Book: at most 50 instances of Book can be created.");
}
// implements Publication interface
this.setIsbn(newIsbn);
this.setTitle(newTitle);
this.setAuthor(newAuthor);
};
})();
// public static methods
Book.convertToTitle = function(title) {
return title.toUpperCase();
}
// public methods
Book.prototype = {
display: function() {
return "Book: ISBN: " + this.getIsbn() + ",Title: " + this.getTitle() + ",Author: " + this.getAuthor();
}
};

这种方案与上种相似，使用var和this来创建私有成员和特权方法。不同之处在于使用闭包来返回构造器，并将checkIsbn声明为私有静态方法。可能有人会问，我为什么要创建私有静态方法，答案在于使所有对象公用一份函数副本而已。我们这里创建的50个实例都只有一个方法副本checkIsbn，且属于类Book。根据需要，你也可以创建公有的静态方法供外部调用(如：convertToTitle)。这里我们继续考虑一个问题，假设以后我们需要对不同的书做限制，比如>最大印发量为500，>最大印发量为1000，也即说需要一个最大印发量的常量。思考一下，利用已有的知识，我们如何声明一个常量呢？其实不难，我们想想，可以利用一个只有访问器的私有特权方法就可以实现。
复制代码 代码如下:

var Publication = new Interface("Publication", ["getIsbn", "setIsbn", "getTitle", "setTitle", "getAuthor", "setAuthor", "display"]);
var Book = (function() {
// private static attribute
var numsOfBooks = 0;
// private static contant
var Constants = {
"MAX_JAVASCRIPT_NUMS": 500,
"MAX_NET_NUMS": 1000
};
// private static previleged method
this.getMaxNums(name) {
return Constants[name.ToUpperCase()];
}
// private static method
function checkIsbn(isbn) {
if(isbn == undefined || typeof isbn != "string") return false;
isbn = isbn.replace("-", "");
if(isbn.length != 10 && isbn.length != 13) return false;
var sum = 0;
if(isbn.length == 10) {
if(!isbn.match(\^\d{9}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (10 - i);
}
var checksum = sum % 11;
if(checksum == 10) checksum = "X";
if(isbn.charAt(9) != checksum) return false;
} else {
if(!isbn.match(\^\d{12}\)) return false;
for(var i = 0;i sum += isbn.charAt(i) * (i % 2 == 0 ? 1 : 3);
}
var checksum = sum % 10;
if(isbn.charAt(12) != checksum) return false;
}
return true;
}
// return constructor
return function(newIsbn, newTitle, newAuthor) {
// private attribute
var isbn, title, author;
// previleged method
this.getIsbn = function() {
return isbn;
};
this.setIsbn = function(newIsbn) {
if(!Book.checkIsbn(newIsbn)) {
throw new Error("Book: Invalid ISBN.");
}
isbn = newIsbn;
}
this.getTitle = function() {
return title;
},
this.setTitle = function(newTitle) {
title = newTitle || "";
},
this.getAuthor = function() {
return author;
},
this.setAuthor = function(newAuthor) {
author = newAuthor || "";
}
Book.numsOfBooks++;
if(Book.numsOfBooks > 50) {
throw new Error("Book: at most 50 instances of Book can be created.");
}
// implements Publication interface
this.setIsbn(newIsbn);
this.setTitle(newTitle);
this.setAuthor(newAuthor);
};
})();
// public static methods
Book.convertToTitle = function(title) {
return title.toUpperCase();
}
// public methods
Book.prototype = {
display: function() {
return "Book: ISBN: " + this.getIsbn() + ",Title: " + this.getTitle() +
",Author: " + this.getAuthor() + ", Maximum: ";
},
showMaxNums: function() {
return Book.getMaxNums("MAX_JAVASCRIPT_NUMS");
}
};

最完美的情况就是你所封装的程序对调用者而言，仅仅需要知道你的接口就可以，根本不关心你如何实现。但问题在于，随着工程量的扩大，你的封装内容必然会增大，在项目发生交接时，对于一个对作用域和闭包等概念不熟悉的成员来说，维护难度会变得如此之大。有些时候应需求响应必须改动源码(这里不一定指改接口)，可能是新增一些细节，即使拿到你的源码却无从下手，那就不好做了。因此，我的建议：封装不要过度，接口一定要清晰，可扩展。
相关标签：
封装 面向对象
来源：php.cn
上一篇：ASP.NET jQuery 实例8 (动态添加内容到DropDownList)_jquery 下一篇：面向对象的Javascript之一(初识Javascript)_js面向对象
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何在 CSS 中使浮动元素垂直堆叠而不是水平堆叠？ 我正在尝试制作一个包含两列的网页，一侧具有主要内容，另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐，所以它水平堆叠，但我希望它垂直堆叠。我当前的代码：.topich...
来自于 2024-04-06 20:45:26
0
2
386
在移动视图中，当用户点击链接时，如何关闭此导航栏？ 当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...
来自于 2024-04-06 19:23:03
0
1
411
Laravel 8 - 如何将 /{editable_text} 路由重定向到 /{user} 路由 我一直在尝试创建重定向路由来引导我访问用户个人资料。重定向路由应该是来自用户数据库的字符串/文本，并且应该重定向到相同的用户个人资料页面。例如，假设我的user1有名为“edita...
来自于 2024-04-06 17:26:11
0
1
410
React子元素无效（发现：具有键{clientVersion}的对象）。如果您想渲染一个子元素集合，请使用数组代替 我有一个多步骤表单，当我尝试提交时会显示此错误。但是，如果我以简单的形式使用createOrganization调度，它就会起作用。是后端问题还是前端问题？我可能做错了什么？我希望...
来自于 2024-04-06 16:25:39
0
1
346
如何让我的图像显示在页面的主显示屏上？ 我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...
来自于 2024-04-06 15:33:12
0
1
433
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板