js创建自定义对象的几种方式
(2014-04-02 14:44:54)
标签:
自定义几种方式接口代码 |
(1)创建object对象,为其添加属性方法
eg: var person = new Object();
person.name = "xiaoxiao";
缺点:使用一个接口创建很多对象,会产生大量重复代码
(2)工厂模式
eg : function createPersonal(name,age,job){
var o = new Object();
o.name =
name;
return
0;
} 工厂模式解决了对象相似问题,却没有解决对象识别问题(如何知道对象的类型)
(3)构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
}构造函数模式没有显示的创建对象,直接将方法和属性赋给了this,没有return 语句要创建person的新实例,必须使用new操作符,实际上经历4个步骤:
a 创建一个新对象
b将构造函数的作用域赋给新对象(this指向这个新对象)
c 执行构造函数,为新对象添加属性
d 返回新对象
构造函数模式创建的对象可以识别其类型,但每个方法都要在每个实例上重建一遍
eg: var person1 = new Person(); var person2 = new Person();
person1.name === person2.name
返回true 是因为两者的返回值均是undefined
person1.getName === person2.getName
返回false 修改为== 返回false
因为两对象的函数在内存是不一样
依据返回为false 可以将此公共函数另创建一
全局函数,但是当函数较多时,这种做法不可取
(4)原型模式
function person(){}
person.prototype.name = "xiaoxiao";
person.prototype.age = 24;
person.prototype.job = "engineer";
缺点:原型模式所有参数默认取得相同的值,若属性为引用类型,多个实例之间互相影响,因为引用类型的对象是共享型的,但是如果是基本类型,则每个实例都有自己的区域,而不会相互影响
(5)
function person(name.age){
this.name = name;
}
person.prototype.sayName = function(){alert(this.name);}
构造函数用于定义实例属性,原型用于定义方法和共享属性
这种是比较常用的一种方法
eg: var person = new Object();
person.name = "xiaoxiao";
缺点:使用一个接口创建很多对象,会产生大量重复代码
(2)工厂模式
eg : function createPersonal(name,age,job){
} 工厂模式解决了对象相似问题,却没有解决对象识别问题(如何知道对象的类型)
(3)构造函数模式
function Person(name,age,job){
}构造函数模式没有显示的创建对象,直接将方法和属性赋给了this,没有return 语句要创建person的新实例,必须使用new操作符,实际上经历4个步骤:
a 创建一个新对象
b将构造函数的作用域赋给新对象(this指向这个新对象)
c 执行构造函数,为新对象添加属性
d 返回新对象
构造函数模式创建的对象可以识别其类型,但每个方法都要在每个实例上重建一遍
eg: var person1 = new Person(); var person2 = new Person();
person1.name === person2.name
person1.getName === person2.getName
依据返回为false
(4)原型模式
function person(){}
person.prototype.name = "xiaoxiao";
person.prototype.age = 24;
person.prototype.job = "engineer";
缺点:原型模式所有参数默认取得相同的值,若属性为引用类型,多个实例之间互相影响,因为引用类型的对象是共享型的,但是如果是基本类型,则每个实例都有自己的区域,而不会相互影响
(5)
function person(name.age){
}
person.prototype.sayName = function(){alert(this.name);}
构造函数用于定义实例属性,原型用于定义方法和共享属性
这种是比较常用的一种方法
前一篇:javascript对象调用
后一篇:html CSS

加载中…