首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JavaScript中对象创造方式

2012-10-30 
JavaScript中对象创建方式一、最基本的创建方式var obj new Object()obj.name zhangsanobj.age 2

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); //truealert(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)

JavaScript中对象创造方式

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

热点排行