Javascript创建自定义对象

本文介绍了JavaScript中五种创建对象的方法,包括工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式以及稳妥构造函数模式。每种模式都详细讲解了其特点和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

虽然Object构造函数或对象字面量都可以用老创建单个对象,但这些方式都有个明显的缺点:实用同一个接口创建很多对象,会产生大量重复代码。为解决这个问题,人们开始使用类似共产模式的方式

1.工厂模式

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=createPerson("tom",9,"student");

var person2=createPerson("Greg",27,"Doctor");

函数createPerson()能够根据接收的参数来创建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,而每次调用它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,却没有解决怎样知道一个对象的类型。随着javascript的发展,又一个模式出现了。

2.构造函数模式

function Person(name,age,job){

this.name=name;

this.age=age;

this.job=job;

this.sayName=function(){

alert(this.name);

};

}

var person1=new Person("tom",9,"student");

var person2=new Person("Greg",27,"Doctor");

要创建Person的新实例,必须使用new操作符。以这种方式调用构造函数会经历以下四个步骤:

(1)、创建一个对象;

(2)、将构造函数的作用域赋给新对象(因此this指向了这个新对象);

(3)、执行构造函数中的代码(为这个新对象添加属性);

(4)、返回新对象。

创建自定义的构造函数意味着可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。

2.1将构造函数当做函数

构造函数与其他函数的唯一区别就是调用他们的方式不同。不过,构造函数毕竟是函数,不存在定义构造函数的特殊语法。任何函数,只要通过new操作符来调用,那她就可以作为构造函数;而任何函数,如果不通过new操作符来调用,那他跟普通函数不会有什么两样。例如。

//当做构造函数来来调用

var person=new Person("Greg",27,"Doctor");

person.sayName();//Greg

//作为普通函数调用

Person("Greg",27,"Doctor");//添加到window

windo.sayName();//Greg

//在另一个对象的作用域中调用

var o=new Object();

Person.call(o,"Greg",9,"Doctor");

o.sayName();//Greg

2.2构造函数的问题

如上,创建的两个对象,他们的同名函数是不相等的,然而,创建两个完成同样任务的Function实例的确没有必要;况且有this对象在,根本不用在执行代码前就把函数绑定到特定对象上。因此,可以像下面这样,通过把函数定义转移到构造函数外部来解决这个问题(这是终于明白为什么有人说指针是c语言的精髓了)

function Person(name,age,job){

this.name=name;

this.age=age;

this.job=job;

this.sayName=sayName;

}

function sayName(){

alert(this.name);

}

这样确实解决了两个函数做同一件事的问题,可是问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,这然全局作用域有点名不副实。更让人无法接受的是:如果对象需要需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在这些问题可以使用原型模式来解决。

3.原型模式

function Person(){}

Person.prototype.name='tom';

Person.prototype.age=29;

Person.prototype.job="Software Engineer";

Person.prototype.sayName=function(){

alert(this.name);

};

var person1=new Person();

person1.sayName();//tom

var person2=new Person();

person2.sayName();//tom

在使用原型模式时需注意,如果我们给新创建的对象添加的属性在原型中也有,那么以后定义这个为准。

原型模式也不是没有问题。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型模式的最大问题。

原型模式的最大问题是由其共享的本性所导致的。

原型中的所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去,毕竟,通过在实例上添加一个同名属性可以隐藏原型中的对应属性,然而,对于包含引用类型值得属性来说,问题比较突出了

function Person(){}

Person.prototype={

conctructor:Person,

name:"tom",

age:29,

job:"Software Engineer",

friends:["eric","jassy"],

sayName:function(){

alert(this.name);

}

};

var person1=new Person();

var person2=new Person();


person1.friends.push("Van");


alert(person1.friends);//eric,jassy,Van

alert(person2.friends);//eric,jassy,Van

看到了吧。。。


4.组合使用构造函数模式和原型模式

构造函数模式用于定义实例属性,而原型模式则用于定义方法和共享的属性。

function Person(name,age,job){

this.name=name;

this.age=age;

this.job=job;

this.friends=['eric',"jassy"];

}

Person.prototype={

constructor:Person,

sayName:function(){

alert(this.name);

}

}


5.动态原型模式

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 friend=new Person("Eric",29,"Software Engineer");

friend.sayName();

使用动态原型模式时,不能使用对象字面量重写原型,如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新原型之间的联系


6.寄生构造函数模式

通常,在前述几种模式都不适用的情况下,可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又像是很典型的构造函数

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 friend=new Person("Eric",29,"SoftWare Engineer");

friend.sayName();//Eric

在这个例子中,Person创建了一个新对象,并以相应的属性和方法初始化该对象,然后又返回了这个对象。除了使用new操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。构造函数在不返回值得情况下,默认会返回新对象实例,而通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值。

这个模式可以再特殊的情况下用来为对象创建构造函数。假设我们想创建一盒具有额外方法的特殊数组,由于不能直接修改Array构造函数,因此可以使用这个模式。

function SpecialArray(){

//创建数组

var values=new Array();

//添加值

values.push.apply(values,arguments);

//添加方法

values.toPipedString=function(){

return this.join("|");

};


//返回数组

return values;

}

var colors=new SpecialArray("red","blue","green");

alert(colors.toPipedString())//red|blue|green

首先,返回的对象与构造函数或者构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与在构造函数外部创建的对象没有什么区别,为此,不能依赖instanceof操作符来确定对象类型


7,稳妥构造函数模式

所谓稳妥对象,指的是没有公共属性,而且其他方法也不引用this的对象。

function Person(name,age,job){

//创建要返回的对象

var o=new Object();

//可以再这里定义私有变量和函数


//

添加方法

o.sayName=function(){

alert(name);


//返回对象

return o;

};

注意,这种模式创建的对象中,除了使用sayName方法外,没有其他方法访问name的值。可以像下面使用稳妥的Person构造函数

var friend=Person("Eric",29,"Software Engineer");

friend.sayName();

这样,变量friend中保存的是一个稳妥对象,而除了sayName()方法外,没有别的方式可以访问传入到构造函数中的原始数据。稳妥构造函数模式提供这种感觉安全性,使得他非常适合在某些安全执行环境下使用。

}


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值