本文主要参考了阮一峰的《Javascript 面向对象编程(一):封装》javascript
一、原始方法(也是最简单的方法)html
var p1 = {}; var person = new Object();
上面两行代码的效果是同样的。java
var p1 = {}; p1.name = '张三'; p1.age = 23; var p2 = {}; p2.name = '翠花'; p2.age = 18;
二、原始方法升级版编程
function Person(name, age) { return { name: name, age: age } } var p1 = Person('张三', 23); var p2 = Person('翠花', 18);
这种方法建立的对象没有任何联系,它的本质和方法1没什么区别。函数
三、构造函数模式(使用this)this
function Person(name, age) { this.name = name; this.age = age; } var p1 = new Person('张三', 23); var p2 = new Person('翠花', 18);
上面的代码实例的constructor属性指向他们的构造函数。spa
p1.constructor == Person //true p2.constructor == Person //true p1 instanceof Person //true p2 instanceof Person //true
而且用instanceof验证确实是Person的实例。prototype
构造方法的问题code
function Person(name, age) { this.name = name; this.age = age; this.takeBus = function() { alert('Take a bus.'); } } var p1 = new Person('张三', 23); var p2 = new Person('翠花', 18);
对上面的方法增长了一个【takeBus】方法以后,表面上看没什么问题,可是:htm
p1.takeBus == p2.takeBus //false
说明p1和p2分别有了一个【takeBus】这个方法,即【takeBus】这个方法并无公用。形成资源浪费。那么,如何公用呢?
四、Prototype模式
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.takeBus = function() { alert('Take a bus.'); } var p1 = new Person('张三', 23); var p2 = new Person('翠花', 18); p1.takeBus == p2.takeBus // true
能够看到使用prototype这种方法使得【Person】实例化获得的对象【takeBus】方法是同一个方法。