javascript创建对象的几种模式

本文探讨了JavaScript中创建对象的不同模式,包括原始模式、工厂模式、构造函数模式等,并重点介绍了混合构造函数原型模式及动态原型模式的优势。

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

原始模式:

定义:

var obj=new Object();
obj.word01='Hello';
obj.word02='world!';
obj.say=function(){
	alert(this.word01+' '+this.word02);
}

调用:

obj.say();

原始模式的不足:可能需要创建多个实例。

解决方法:工厂模式。

工厂模式

定义一:

function factory(arg01){
var obj=new Object();
  obj.word01='Hello';
  obj.word02='world!';
  obj.arg=arg01;
  obj.say=function(){
      alert(this.word01+' '+this.word02+' '+this.arg);
  }
return obj;
}

定义一的不足:每次调用函数factory(),都要创建新函数say(),意味着每个对象都有自己的 say() 版本。而事实上,每个对象都共享同一个函数。解决办法:在工厂函数外面定义对象的方法:

function factory(arg01){
var obj=new Object();
  obj.word01='Hello';
  obj.word02='world!';
  obj.arg=arg01;
  obj.say=say;
return obj;
}
function say(){//无法给这个函数传递参数
      alert(this.word01+' '+this.word02+' '+this.arg);
  }


调用:

var instance=factory('工厂模式,我是传递进来的参数');
instance.say();

结果:

工厂模式的不足:从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。

解决方法:构造函数模式。

构造函数模式

定义:

function construct(arg01){
  this.word01='Hello';
  this.word02='world!';
  this.arg=arg01;
  this.say=function(){
      alert(this.word01+' '+this.word02+' '+this.arg);
  }
}

调用:

var obj01=new construct("构造函数模式,我是传递进来的参数");
obj01.say();

构造函数模式产生的问题与工厂模式一样,也会产生对象方法的一个副本,你也可以向工厂模式那样在外部定义对象的方法。但这样又同样会产生语义上面的问题。

解决方法:原型模式

原型模式

定义

function obj(){};
obj.prototype.word01='Hello';
obj.prototype.word02='world!';
obj.prototype.drivers=new Array("Mike","John")
obj.prototype.say=function(){
      alert(this.word01+' '+this.word02+' '+this.drivers);
    }
调用:

var inst=new obj();
inst.drivers.push("我是实例化后新增的参数值");
inst.say();

存在的问题:构造函数无法传递参数,另外,如果对象的属性指向了另一个对象(像这里指向了一个数组),那么这个属性指向的另对象会被对象的多个实例所共享。

由于创建对象时有这么多问题,你一定会想,是否有种合理的创建对象的方法呢?答案是有,需要联合使用构造函数和原型方式。

                                                                                       混合的构造函数和原型模式

定义:

function() obj(){
  this.word01='Hello';
  this.word02='world!';
  this.drivers=new Array("Mike","John");
}
obj.prototype.say=function(){
alert(this.word01+' '+this.word02+' '+this.drivers);
}
var obj01=new obj();

var obj02=new obj();
obj01.drivers.push('实例化后传参');
obj01.say();
obj02.say();


这种方式唯一的缺点就是觉得不够完美;

解决办法:动态原型模式

                                                                                                         动态原型模式


定义:

function obj(){
  this.word01='Hello';
  this.word02='world!';
  this.drivers=new Array("Mike","John");
  if(typeof obj._init=='undefined'){ 
obj.prototype.say=function(){ 
   alert(this.word01+' '+this.word02+' '+this.drivers); 
    return this;
    } 
 obj._init=true; 
  }
}


return this;

的作用就是实现链式操作。
以上方法中最常用的就是混合的构造函数原型模式和动态原型模式。

 

var obj={
fn01:function() {
  this.word01='Hello';
  this.word02='world!';
  this.drivers=new Array("Mike","John");
  if(typeof obj._init=='undefined'){
    obj.prototype.say=function(){
    alert(this.word01+' '+this.word02+' '+this.drivers);
    return this;
    }
    obj._init=true
}


}

继承:通过原型累实现:

将一个对象A的实例赋给另一个对象B的prototype属性

那么对象B就拥有了对象A的所有实例属性和实例方法。当让也可以重写。



                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值