JavaScript 创建对象的方式

本文主要参考了阮一峰的《Javascript 面向对象编程（一）：封装》

1、原始方法(也是最简单的方法)

var p1 = {};
var person = new Object();

上面两行代码的效果是一样的。

var p1 = {};
p1.name = '张三';
p1.age = 23;

var p2 = {};
p2.name = '翠花';
p2.age = 18;

2、原始方法升级版

function Person(name, age) {
    return {
        name: name,
        age: age
    }  
}
var p1 = Person('张三', 23);
var p2 = Person('翠花', 18);

这种方法创建的对象没有任何联系，它的本质和方法1没什么区别。

3、构造函数模式(使用this)

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p1 = new Person('张三', 23);
var p2 = new Person('翠花', 18);

上面的代码实例的constructor属性指向他们的构造函数。

p1.constructor == Person //true
p2.constructor == Person //true

p1 instanceof Person //true
p2 instanceof Person //true

并且用instanceof验证确实是Person的实例。

构造方法的问题

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】方法之后，表面上看没什么问题，但是：

p1.takeBus == p2.takeBus //false

说明p1和p2分别有了一个【takeBus】这个方法，即【takeBus】这个方法并没有公用。造成资源浪费。那么，如何公用呢？

4、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】方法是同一个方法。