Javascript 进阶 封装

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/25080573

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中须要复用的方法和属性做到私有且对象间共享。