js面向对象中的工厂方式和构造函数

责编:menVScode 2017-06-15 17:34 阅读(823)

        我们还是直接先把工厂方式的代码先写出来,再来分析工厂方式写的面向对象是怎么样的。

function Person(name){
	//1.原料
	var obj = new Object();
	//2.加工
	obj.name = name;
	obj.getName = function(){
		console.log( this.name );
	};
	//3.出厂
	return obj;
}
var p1 = new Person('李雷');//创建实例化对象
p1.getName();
var p2 = new Person('韩梅梅');//创建实例化对象
p2.getName();

        在Person內,创建一个obj对象,obj对象一开始没有属性,也没有方法,就像原料一样,等待着我们去加工。

        给obj对象添加属性或者方法,可看成加工过程;上面的代码给obj对象添加了name属性和getName的函数方法。

        最后呢,用return将obj对象返回出来给我们,这就是出厂了。

        p1,p2就是Person创建出来的了两个实例化对象,然后通过实例化对象可以运行定义好的方法和获取属性值。

        

        上面创建出来面向对象程序,跟系统对象还是有些区别的:1、函数名大小写一样,当然js对变量和函数名大小写是比较敏感;2、有无new关键词的区别。当new关键字

去调用一个函数时,这时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this(隐式返回),一般函数没有return返回值,默认就是undefined,new后面调用的函数叫做构造函数。

var arr = new Array();
var date = new Date();

        将工厂方式改成构造函数,代码就简介多了。

function Person(name){
	this.name = name;
	this.getName = function(){
		console.log(this.name);
	}
}
var p1 = new Person('李雷');
p1.getName();//李雷
var p2 = new Person('韩梅梅');
p2.getName();//韩梅梅

        当我们 alert(p1.getName) 和 alert(p2.getName),结果都是 function(){ console.log(this.name); }。

alert(p1.getName==p2.getName); //false

        但是将p1.getName与p2.getName进行比较得到的 结果是false。因为对象类型的比较,必须要求双方的值与内存地址都要相同,这时候才能为true。关于js中对象引用的问题可以查看这篇文章《js中的对象引用及其存在的问题http://www.menvscode.com/detail/59435e0b3212c03c39993021

        假设一下,如果我们创建好几百个Person的实例化对象,那么内存中也会有好几百个引用地址;那么上千个呢,这样子会极大的消耗内存。解决问题的方案就是运用对象的原型。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码