JavaScript中创建对象有以下七种方式:
- 工厂模式
- 构造函数模式
- 原型模式
- 构造函数和原型组合模式
- 动态原型模式
- 寄生构造函数模式
- 稳妥函数构造模式
工厂模型
- 示例
function createPerson(name,age,job){
var person=new Object();
person.name=name;
person.age=age;
person.job=job;
person.sayName=function(){
alert(this.name);
}
return person;
}
var person1=createPerson("Lucy",18,"student");
person1.sayName(); //Lucy
var person2=createPerson("Bob",30,"teacher");
person2.sayName(); //Bob
- 优点:
可以创建多个相似对象 - 缺点:
无法确定该对象的类型
构造函数模式
- 示例:
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
}
}
var person1=new Person("Lucy",18,"student");
person1.sayName(); //Lucy
var person2=new Person("Bob",30,"teacher");
person2.sayName(); //Bob
- 优点:
- 可以将对象的实例标识为一种特定的类型,可以通过
instanceof
检测对象实例类型 - 必须使用
new
操作符
- 可以将对象的实例标识为一种特定的类型,可以通过
- 缺点:
不同实例上的同名函数是不相等的,导致具有相同功能的方法在不同的实例上创建多次 - 注意:
- 如果不用
new
来调用构造函数,this对象就会指向Global
对象(在浏览器中就是window
对象) - 构造函数在不返回值的情况下,默认会返回新对象实例
- 如果不用
原型模式
- 示例
function Person(){
}
Person.prototype.name="Lucy";
Person.prototype.age=18;
Person.prototype.job="student";
Person.prototype.sayName=function(){
alert(this.name);
}
var person1=new Person();
person1.sayName(); //Lucy
//Person.prototype.sayName(); Lucy
-
优点:
- 可以让该对象的所有实例共享它所包含的属性和方法
- 可以动态添加原型对象的方法和属性
缺点:
当更改的对象实例的属性值为引用类型时,会出现问题。
function Person(){
}
Person.prototype.name="Lucy";
Person.prototype.age=18;
Person.prototype.job="student";
Person.prototype.sayName=function(){
alert(this.name);
}
Person.prototype.friend=["Linda"];
var person1=new Person();
var person2=new Person();
person1.friend.push("Jack");
console.log(person1.friend); //["Linda", "Jack"]
console.log(person2.friend); //["Linda", "Jack"]
原型中的所有属性是被很多实例共享的,尤其friend
的属性值是引用类型,person1.friend
与person2.friend
指向同一个数组,因此修改person1.friend
后,person1.friend
与person2.friend
的值相等
-
注意:
使用对象字面量重写原型时,会切断现有原型与任何之前已经存在的对象实例时间的联系。示例如下:
function Person(){
}
var person=new Person();
Person.prototype={
constructor:Person,
name:"Lucy",
age:18,
job:"student",
sayName:function(){
alert(this.name);
}
};
person.sayName(); //error
构造函数和原型模式
- 示例
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.friends=["Jack"];
}
Person.prototype.sayName=function(){
alert(this.name);
}
var person1=new Person("Lucy",18,"student");
var person2=new Person("Bob",30,"teacher");
person1.friends.push("Linda");
console.log(person1.friends); //["Jack", "Linda"]
console.log(person2.friends); //["Jack"]
- 优点:
- 解决了原型模式对于引用对象的缺点
- 解决了原型模式没有办法传递参数的缺点
- 解决了构造函数模式不能共享方法的缺点
这是使用最广泛,认同度最高的一种创建自定义类型的方法
动态原型模式
- 示例:
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
if(typeof this.sayName != "function"){
Person.prototype.sayName=function(){
alert(this.name);
}
}
}
var person=new Person("Lucy",18,"student");
person.sayName();
- 优点:
- 只会在除此调用构造函数时执行,完成原型的初始化
- 对原型的修改,会立即在所有实例中得到反映
- 可以使用
instanceof
操作符来确定实例的类型
-
注意:
使用动态原型模式时,不能用对象字面量重写原型
寄生构造函数模式
- 示例:
function Person(name,age,job){
var person=new Object();
person.name=name;
person.age=age;
person.job=job;
person.sayName=function(){
alert(this.name);
}
return person;
}
var person=new Person("Lucy",18,"student");
person.sayName();
- 优点:
可以重写调用构造函数时返回的值 - 缺点:
- 返回的对象与构造函数之间没有关系
- 不能依赖
instanceof
操作符来确定对象类型
-
注意:
尽量避免使用这种模式
稳妥构造函数模式
- 示例:
function Person(name,age,job){
var person=new Object();
// 可以在这里定义私有变量和函数
person.sayName=function(){
alert(name);
}
return person;
}
var person=Person("Lucy",18,"student");
person.sayName();
- 优点:
安全性比较高 - 缺点:
不能通过instanceof
操作符确定实例类型
参考文章:
JavaScript 创建对象的 7 种方法