JavaScript创建对象方式总结

今天阅读了JavaScript高级程序设计的第6章，关于对象创建的方式，这里做下总结，巩固下知识

JavaScript创建对象的五种方式：

一、通过字面量或Object构造函数创建

1、示例：

// 通过Object构造函数来创建
var person = new Object();
person.name = "mary";
person.age = 28;
person.sayHello = function() {
alert(this.name + "say hello world");
}

console.log(person.constructor.name);    // Object

// 通过字面量来创建
var person = {
name: "mary",
age: 28,
sayHello: function() {
alert(this.name + "say hello world");
}
}

console.log(person.constructor.name);    // Object

 

2、优点：简单灵活

3、缺点：

1）无法识别对象类型，通过person.constructor属性（该属性是从Object.prototype中继承来的）可以看到，不管是通过构造函数，还是字面量（底层也是使用new Object来创建对象的），对象构造器属性均为Object。

2）每次创建相同对象需要写大量的重复代码，每创建一个对象均需要重复的书写name、age、sayHello

 

 二、通过工厂模式创建

1、示例：

function createPerson(name, age) {
var person = new Object();
person.name = name;
person.age = age;
person.sayHello = function() {
alert(this.name + "say hello world");
}
return person;
}

var person = createPerson("mary",28);
console.log(person.constructor.name);    // Object

2、优点：不用每次创建对象时，都写一批重复的代码（通过字面量创建的），也就是创建对象的时候原先需要数行才能完成的工作，现在只需要一行即可

3、缺点：仍然无法识别对象的类型，创建的对象构造器指向的函数仍然都是Object

 

 三、通过构造函数模式创建

1、示例：

function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
alert(this.name + "say hello world");
}
}

var person = new Person("mary", 28);
console.log(person.constructor.name);    // Person

2、优点：可以识别对象的类型，person实例的constructor属性指向构造函数Person，也就解决了对象的识别问题

3、缺点：每次创建对象时，都实例化对象的属性，其中sayHello为函数对象，这将导致相同功能的代码，重复多余的创建对象，进而产生大量的内存浪费

 

 四、通过原型模式创建

1、示例

function Person() {}

Person.prototype.name = "mary";
Person.prototype.age = 28;
Person.sayHello = function() {
alert(this.name + "say hello world");
}

var person = new Person();

2、优点：每次实例化对象时，仅在对象首次创建时，初始化原型对象，也就是sayHello函数对象仅创建一次，节省了不少内存资源

3、缺点：所有的实例对象共享原型对象的属性，如果原型对象中包含对象的引用，其中一个实例改变了引用对象的值，将影响到其它所有的实例对象

function Person() {
}

Person.prototype.books = ["Java编程思想", "JavaScript权威指南"];
Person.prototype.name = "person";

var mary = new Person();
mary.books.push("JavaScript高级程序设计");
mary.name = "mary";
console.log(mary.books);    // ["Java编程思想", "JavaScript权威指南", "JavaScript高级程序设计"]
console.log(mary.name);     // mary

var tony = new Person();
console.log(tony.books);    // ["Java编程思想", "JavaScript权威指南", "JavaScript高级程序设计"]
console.log(tony.name);     // person

可以看到Person的原型对象中定义了一个数组引用属性和字符串属性，当mary实例更改了数组引用属性的值时，tony实例的属性也被更改了，但当mary对象更改name属性时，却不影响tony实例，因为相当于mary自己重新定义了name属性

 

 五、动态原型模式

1、示例：

function Person(name) {
this.name = name;
if(typeof this.sayHello != "function") {
console.log("init person prototype property");
Person.prototype.sayHello = function() {
alert(this.name + "say hello");
}
}
}

var mary = new Person("mary");
var tony = new Person("tony");

// init person prototype property

2、优点：有过类似java面向对象语言经验的，会觉得javascript的原型模式创建对象语法很怪，写法松散，这样我们可以采用动态原型模式，将构造函数的原型代码书写在构造函数内部，通过判断语句，来保证仅在第一次调用构造函数的时候，初始化对象。

3、缺点：构造函数中的代码变得略复杂