日期:2014-05-16  浏览次数:20506 次

JavaScript中对象创建方式

一、最基本的创建方式

var obj = new Object();
obj.name = "zhangsan";
obj.age = 22;
obj.sayHello = function(){
      alert("hello,I'm "+this.name);
}

?可以这样调用:

obj.sayHello();//hello,I'm zhangsan

?优点:创建简单,容易理解

?缺点:如果想创建更多的相同类型的对象,每创建对象时都要去重新定义属性和方法

????????? 代码量加大,不易维护。

????????? 不能创建指定类型的对象,都是object类型的。

?

二、工厂方法模式

把对象的创建过程封装在函数里面

function createObject(name,age){
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.sayHello = function(){
		alert("hello,I'm "+this.name);
	}
	return obj;
}
	
var o2 = createObject("zhangsan",33);

o2.sayHello();

?优点:对象的创建方式变得简易了。创建对象只需调用该方法

?缺点:依然没有解决直接创建方式所带来的“不能创建指定类型的对象”问题

?

三、构造函数模式

function Person(name,age){
	this.name = name;
	this.age = age;
	this.sayHello = function(){
		alert("hello,I'm "+name);
	}
}

var obj = new Person("zhangsan",22);
obj.sayHello();

?优点:解决了前面两种创建方式没有解决的问题,可以创建指定的对象类型

alert(obj instanceof Person); //true
alert(typeof obj);  //object

?缺点:以上所有方式都存在的一个问题就是:每创建一个实例对象,都会创建一个Function的实例,即代码:

sayhello=function(){
      alert("hello,I'm "+this.name);
}
//上面代码等同于

sayHello = new Function(){
        alert("hello,I'm "+this.name);
}

?这样造成资源的浪费,一种解决方案就是把方法提取出来

function Person(name,age){
	this.name = name;
	this.age = age;
	this.sayHello = sayHello;
}

function sayHello(){
	alert("hello,I'm "+this.name);
}

?旧问题解决的,但是新的问题也接踵而来,因为这个全局的sayhello 方法本是为Person类型的对象服务的,但却又放在全局作用域中(在浏览器中可以理解为window对象的作用域)

?还有一个问题就是他的封装性失去意义。这样就衍生了下面一中模式

?

四、原型模式

先看代码:

function Person(){
}
Person.prototype.name = "zhangsana";
Person.prototype.age = 22;
Person.prototype.sayHello = function(){
	alert("hello,I'm "+this.name);
}
var obj1 = new Person();
obj1.sayHello();

?prototype作为每个函数都有的属性,指向一个对象,该对象为特定类型的所有实例共享属性和方法的对象,也就是说,拿上面代码说就是但凡有Person构造方法new 出来的对象都共享name,age,sayHello,而且这下属性和方法内存中只存在一份。附一张草图以便理解,有时间继续写。。。(参考书籍:Professional JavaScript for web Developers Second Edition? Nicholas C. Zalas)

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?