JS学习笔记-OO疑问之对象创建
最后更新于:2022-04-01 10:13:11
## 问一、引入工厂,解决重复代码
前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码。
解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复)
~~~
function createObject(name,age){
var obj =new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.run = function(){
return this.name + this.age + '处理中...';
};
return obj; //返回对象引用
};
~~~
## 问二、引入构造函数,解决对象识别
上面方法虽然解决了避免重复代码出现的问题,但也带来了无法识别具体对象的问题,方法内部使用new Object的方式,最后返回该对象引用,调用该方法创建的对象返回的全部都是Object的引用,因此使用typeof或instanceof操作符时都无法区分具体对象。
解决:构造函数(改良后的工厂方法)
~~~
function Box(name,age){ //创建对象
this.name = name;
this.age = age;
this.run = function(){
return this.name + this.age + '处理中...';
};
};
~~~
比较:细心的童鞋就该发现了,该方法与问一中的工厂模式不同之处就在于:省略了newObject()的明文执行过程;省略了return语句,这些都由后台自动执行。
而构造函数区别普通函数的地方在于其调用方式,必须用new运算符或对象冒充方式调用。
## 问三、引入prototype属性对象,解决对象之间的共享问题
每一个对象都会有一个prototype,同时它也是一个对象。使用目的是为了解决共享问题,调用同一个构造函数创建的该对象会共享prototype中的属性和方法。
解决:使用原型模式解决共享
~~~
function Box() {} //声明一个构造函数
Box.prototype.name = 'Lee'; //在原型里添加属性
Box.prototype.age = 100;
Box.prototype.run = function () { //在原型里添加方法
return this.name + this.age + '处理中...';
};
~~~
比较:
构造函数创建
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-02-17_56c43e67d1ce1.jpg)
使用原型创建
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-02-17_56c43e67e8882.jpg)
细节:在调用属性或方法时,采用就近原则,先查找实例中是否存在,否的话查找原型,可使用isPrototypeOf(),hasOwnPrototy(),in操作符进行相关测试。
## 问四、使用组合,解决共享及传参
原型模式创建对象省略了构造函数传参初始化的过程,这既是它的缺点又是它的优点,缺点是对象初始化的值一样,并且如果原型属性中包含有引用类型,则对一个对象进行更改,其他对象的对应属性也会跟着更改了。
解决:组合构造函数+原型模式(解决共享和传参的问题)
~~~
function Box(name, age) { //不共享的使用构造函数
this.name = name;
this.age = age;
this. family = ['父亲', '母亲', '妹妹'];
};
Box.prototype = { //共享的使用原型模式
constructor : Box,
run : function () {
return this.name + this.age + this.family;
}
};
~~~
细节:这种方式其实就是将构造函数与原型一起使用,对要创建的对象分析,将需要共享的内容放入原型中,不需要的则放在构造函数里。这样也就是组合了。
优化:这样分开式的写法难免有些怪异,我们将这两部分合并
动态原型模式(第一次调用共享方法时进行初始化原型,以后就不会初始化了)
~~~
function Box(name ,age) { //将所有信息封装到函数体内
this.name = name;
this.age = age;
if (typeof this.run != 'function') {//仅在第一次调用的初始化
Box.prototype.run = function () {
return this.name +this.age + '处理中...';
};
}
}
~~~
## 中结:
在学习JS中,还是很需要对正统面向对象语言的理解的,在这里我们学习了使用构造函数以及原型来创建对象,理解了二者的概念,对于后面的JS中面向对象深入学习会很有帮助,各种不同的创建方式是为了解决不同情况的问题,理解了这些才能按需使用。