创建javascript对象

原创于 2019-11-07 15:08:08 发布 · 123 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

随便

本文深入探讨JavaScript中创建对象的八种方法，包括使用new操作符、对象字面量、工厂模式、构造函数模式、原型模式、组合使用构造函数和原型模式、动态原型模式及寄生构造函数模式，每种方法的特点及适用场景。

创建Object实例

本文实例来源于《javascript高级编程》
1、方法一：new操作符后加Object构造函数

var person = new Object();//等价于 var person = {};
person.name = "qianbei";
person.age  = 29;
person.sayName = function(){
	alert(this.name); // 被解析为person.name
}

2、方法二：使用对象字面量表示法

var person = {
	name : "qianbei",
	age : 29,
	sayName : function(){
		alert(this.name); // 被解析为person.name
	}
};

虽然构造函数或对象字面量都可以用来创建单个对象，但这些方法有一个明显的缺点，使用同一个接口创建很多对象，会产生大量的重复代码，为了解决这个问题，人们开始使用工厂模式的一种变体。

3、方法三：工厂模式

function createPerson(name,age,job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	}
	return o;
}
var person1 = new createPerson("qianbei",29,"FE");
var person2 = new createPerson("chenchen",18,"FE");

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别问题。

4、方法四：构造函数模式

function Person(name,age,job){//按照惯例，构造函数应该以大写字母开头
	this.name = name;
	this.age  = age;
	this.job = job;
	this.sayName = function(){
		alert(this.name); // 被解析为person.name
	};
}

var person1 = new Person("qianbei",29,"FE");
var person2 = new Person("chenchen",18,"FE");

要创建Person实例，必须使用new操作符，以这种方式调用构造函数实际上会经历以下4个步骤：
1）创建一个新对象
2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
3）执行构造函数的代码（为这个新对象添加属性）
4）返回新对象

在前面例子最后，person1,person2分别保存着Person的一个不同实例，这两个对象都有一个constructor属性，该属性指向person

alert(person1.constructor == Person) //true
alert(person2.constructor == Person) //true

5、方法五：原型模式

function Person(){}
Person.prototype.name = "qianbei";
Person.prototype.age= "18";
Person.prototype.job= "fe";
Person.prototype.sayName=function(){
	return this.name;
};
var person1 = new Person();
alert(person1.age);

6、方法六：组合使用构造函数模式和原型模式(是目前使用最广泛，认同度最高的一种能够创建自定义类型的方法)

function Person(name,age,job){//按照惯例，构造函数应该以大写字母开头
	this.name = name;
	this.age  = age;
	this.job = job;
}
Person.prototype = {
	constructor : Person,
	sayName : function(){
		return this.name;
	};
}
var person1 = new Person("qianbei",18,"FE");
var person2 = new Person("chenchen",20,"FE");
alert(person1.age);
alert(person1.sayName =  person2.sayName) //true

7、方法七：动态原型模式

function Person(name,age,job){//按照惯例，构造函数应该以大写字母开头
	this.name = name;
	this.age  = age;
	this.job = job;
	if(typeof this.sayName != "function"){
		Person.prototype.sayName=function(){
			return this.name;
		};
	}
}
var friend = new Person("qianbei",18,"FE");
alert(friend.sayName());

8、方法八：寄生构造函数模式

function Person(name,age,job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	}
	return o;
}
var person1 = new Person("qianbei",29,"FE");
var person2 = new Person("chenchen",18,"FE");