什么是封装?
封装就是隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别;将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成“类”,其中数据和函数都是类的成员。
封装的目的是增强安全性和简化编程,使用者不必了解具体的实现细节,而只是要通过外部接口,以特定的访问权限来使用类的成员。
如何封装?
js中处处是对象,面向对象的第一步当然就是封装了,由于Js中没有类的概念,所以封装起来也比较麻烦,下面介绍两种js的封装。
1、使用约定优先的原则,将所有的私有变量以_开头
<script type="text/javascript"> /** * 使用约定优先的原则,把所有的私有变量都使用_开头 */ var Person = function (no, name, age) { this.setNo(no); this.setName(name); this.setAge(age); } Person.prototype = { constructor: Person, checkNo: function (no) { if (!no.constructor == "string" || no.length != 4) throw new Error("学号必须为4位"); }, setNo: function (no) { this.checkNo(no); this._no = no; }, getNo: function () { return this._no; }, setName: function (name) { this._name = name; }, getName: function () { return this._name; }, setAge: function (age) { this._age = age; }, getAge: function () { return this._age; }, toString: function () { return "no = " + this._no + " , name = " + this._name + " , age = " + this._age; } }; var p1 = new Person("0001", "鸿洋", "22"); console.log(p1.toString()); //no = 0001 , name = 鸿洋 , age = 22 p1.setNo("0003"); console.log(p1.toString()); //no = 0003 , name = 鸿洋 , age = 22 p1.no = "0004"; p1._no = "0004"; console.log(p1.toString()); //no = 0004 , name = 鸿洋 , age = 22 </script>
看完代码,是不是有种被坑的感觉,仅仅把所有的变量以_开头,其实还是可以直接访问的,这能叫封装么,当然了,说了是约定优先嘛,这种方式还是不错的,最起码成员变量的getter,setter方法都是prototype中,并非存在对象中,总体来说还是个不错的选择。
如果你觉得,这不行,必须严格实现封装,那么看第二种方式。
2、严格实现封装
<script type="text/javascript"> /** * 使用这种方式虽然可以严格实现封装,但是带来的问题是get和set方法都不能存储在prototype中,都是存储在对象中的 * 这样无形中就增加了开销 */ var Person = function (no, name, age) { var _no , _name, _age ; var checkNo = function (no) { if (!no.constructor == "string" || no.length != 4) throw new Error("学号必须为4位"); }; this.setNo = function (no) { checkNo(no); _no = no; }; this.getNo = function () { return _no; } this.setName = function (name) { _name = name; } this.getName = function () { return _name; } this.setAge = function (age) { _age = age; } this. getAge = function () { return _age; } this.setNo(no); this.setName(name); this.setAge(age); } Person.prototype = { constructor: Person, toString: function () { return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge(); } } ; var p1 = new Person("0001", "鸿洋", "22"); console.log(p1.toString()); //no = 0001 , name = 鸿洋 , age = 22 p1.setNo("0003"); console.log(p1.toString()); //no = 0003 , name = 鸿洋 , age = 22 p1.no = "0004"; console.log(p1.toString()); //no = 0003 , name = 鸿洋 , age = 22 </script>
看上面的代码,去掉了this.属性名,严格的实现了封装,只能通过getter,setter访问成员变量了,但是存在一个问题,所有的方法都存在对象中,增加了内存的开销。
3、以闭包的方式封装
<script type="text/javascript"> /** *使用这种方式虽然可以严格实现封装,但是带来的问题是get和set方法都不能存储在prototype中,都是存储在对象中的 *这样无形中就增加了开销 * */ var Person = (function () { var checkNo = function (no) { if (!no.constructor == "string" || no.length != 4) throw new Error("学号必须为4位"); }; //共享变量 var times = 0; return function (no, name, age) { console.log(times++); // 0 ,1 , 2 var no , name , age; this.setNo = function (no) { checkNo(no); this._no = no; }; this.getNo = function () { return this._no; } this.setName = function (name) { this._name = name; } this.getName = function () { return this._name; } this.setAge = function (age) { this._age = age; } this. getAge = function () { return this._age; } this.setNo(no); this.setName(name); this.setAge(age); } })(); Person.prototype = { constructor: Person, toString: function () { return "no = " + this._no + " , name = " + this._name + " , age = " + this._age; } } ; var p1 = new Person("0001", "鸿洋", "22"); var p2 = new Person("0002", "abc", "23"); var p3 = new Person("0003", "aobama", "24"); console.log(p1.toString()); //no = 0001 , name = 鸿洋 , age = 22 console.log(p2.toString()); //no = 0002 , name = abc , age = 23 console.log(p3.toString()); //no = 0003 , name = aobama , age = 24 </script>
上述代码,js引擎加载完后,会直接执行Student = 立即执行函数,然后此函数返回了一个子函数,这个子函数才是new Student所调用的构造函数。
又因为子函数中保持了对立即执行函数中checkNo(no) ,times的引用,(很明显的闭包)所以对于checkNo和times,是所有Student对象所共有的。
创建3个对象后,times分别为0,1,2 。这种方式的好处是,可以使Student中需要复用的方法和属性做到私有且对象间共享。
以上就是什么是javascript封装?的详细内容,更多请关注易知道|edz.cc其它相关文章!