【前端】创建对象的方法

创建对象的方法


参考文献全部来源于《javascript高级程序设计》

创建对象最简单的两种方法

  • object构造函数
  • 对象字面量

对象字面量的方法


var person = {
     name: "dongjc",
     age: 32,
     Introduce: function () { console.log("My name is " + this.name + ".I'm " + this.age); }
 };
 
person.worker = 'coding'; //丰富成员信息
person.Introduce();  //调用对象里面的方法

object构造函数(new方法)

var box=new Object();

box.name='苏';
box.age=22;
box.run=function(){return this.name+this,age}

其实现阶段你们用这两种方式好像就够用了,但是实际上要想代码规范或者创建对象方便还缺不了下面说的这几种方法。

创建对象的更常用或者更好用的方法

工厂模式

方法: 设计一个函数用来创建类似的对象。


function createObject(name,age){
	var obj=new Object;
	obj.name=name;
	obj.age=age;
	obj.run=function(){
		return this.name+this.age;
	}
	return obj;
}
//调用:
var a=createObject('苏',22);

补充一下:这个函数一定要返回得到对象的引用,将得到的对象作为返回值。

这个方法也是有点问题的——没办法识别这个创建出来的对象是谁的实例对象。


var a=createObject('苏',22);
var b=createObject('苏',22);
console.log(a instanceof Object);  //true,任何类型的对象都属于object
console.log(b instanceof Object);  //true

构造函数模式

方法: 通过构造函数创建实例对象。

function Box(name,age){
	this.name=name;
	this.age=age;
	this.run=function(){
		return this.name+this.age;
	}
}

这个方法跟上面的工厂模式会有一点相似,但是区别在哪里呢?

  1. 构造函数没有new Object();但后台会自动创建obj=new Object();
  2. this就相当于obj;function其实就是一个对象。这个会涉及到原形链的问题。
  3. 不用像普通函数那样调用,直接new出来就行了。
  4. 这个方法可以识别对象的创建来源
var a=new Box('苏',22);
var b=new Box('王',22);
console.log(a instanceof Object)//true
console.log(b instanceof Object)//true
console.log(a instanceof Box);  //true
console.log(b instanceof Box);  //true

但是存在一个问题,就是通过构造函数创建对象时,当一个构造函数被实例化多次时,构造函数里的方法也被实例化了多次,同一类型的不同对象之间并不共用同一函数,造成了内存的浪费。

比如:

var a=new Box('苏',22);
var b=new Box('苏',22);
console.log(a.run()==b.run());  //true
console.log(a.run==b.run);      //false 引用地址不同

原型方法

利用prototype,proto,constructor进行创建。

function Box(){};
Box.prototype.name='苏';
Box.prototype.age=22;
Box.prototype.run=function(){
	return this.name+this.age;
}
var a=new Box();
var b=new Box();
alert(a.run==b.run)  //true

但是这个就没有办法传参。可在实例里来添加或覆盖原型属性:

var a=Box();
a.name='王';
a.age=23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值