稳扎稳打JavaScript(三)——创建对象的几种方式
在JS中,创建对象的方式有很多,而且各有千秋,我们需要根据实际的业务需求选择不同的方式。
1. 工厂模式
这是创建对象最为简单的方式。
1.1. 定义方式
工厂模式的思想是:将对象构建的过程封装在一个函数中。这个函数能创建一个对象,并为他进行初始化赋值,最后返回这个对象。若要新建对象,调用这个工厂函数即可。
// 工厂函数
function createPerson ( name, age ) {
var object = new Object();
object.name = name;
object.age = age;
object.getName = function(){
return object.name;
}
return object;
}
1.2. 对象创建方式
// 创建对象
Person perosn = createPerson("柴毛毛", 18);
1.3. 优点
这种模式唯一的优点就是逻辑简单。
1.4. 缺点
- 创建的对象都是Object类型,没办法知道它的确切类型。
- 对象中所有的函数都需要重复定义,浪费内存。
- 没办法创建该类型的公共属性。
2. 构造函数模式
2.1. 定义方式
function Person( name, age ) {
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
};
}
- 这种模式需要创建一个构造函数;
- 构造函数首字母必须大写,这已经成为不成文的规定,目的是为了提高代码的可读性,只要一看到大写的函数那就说明这是一个构造函数;
- 构造函数中,this就代表即将创建的那个对象;
- 对象的属性直接绑在this上;
- 若构造函数中存在闭包,那么闭包中的this仍然指向即将创建的这个对象。
2.2. 对象创建方式
通过new来创建对象:
var person = new Person("柴毛毛",18);
- JS中的new关键词是专门用来创建对象的,不要以为它多么高级,其实通过new创建对象的过程本质上只是执行了这个构造函数,不过比执行普通函数多加了几个步骤:
- 在函数执行前创建一个对象,并将函数的this指向这个对象;
- 然后正常执行函数代码;
- 最后自动返回这个对象;
2.3. 构造函数模式创建对象的过程
2.3.1. 当外层函数执行结束后:
当构造函数所在的外层函数执行结束后,JS引擎就会为这个构造函数创建两样东西:
- 创建一个构造函数本身的函数对象(暂且叫他A)
- 创建构造函数的原型对象(暂且叫他B) 原型对象B中只有一个constructor属性,指向构造函数对象A;A对象中有一个prototype属性,指向对象B。
这个过程结束后,内存中会产生两个与构造函数相关的对象,分别是构造函数对象 和 构造函数的原型对象,他们之间通过属性constructor和prototype相互关联。
2.3.2. 当执行new Person()时:
- 创建一个普通对象C,将C对象的proto属性指向原型对象B,将C对象的constructor属性指向构造函数对象A;
- 将构造函数中的this指向对象C;
- 依次执行构造函数中的代码;
- 返回对象C;
这个过程结束后,新对象的创建过程就结束了。
2.4. 优点
可以知道对象的类型。 通过2.3我们知道,实例对象中的constructor属性指向了它的构造函数,proto属性指向了它的原型对象,因此完全可以确定该对象的类型。
- 确定对象类型的两种方式:
- (推荐)对象 instanceof 构造函数 (返回true/false)
- (不推荐)对象.constructor(直接获取其构造函数对象)
2.5. 缺点
- 对象中所有的函数都需要重复定义,浪费内存。
3. 原型模式
3.1. 什么是原型?
我们已经知道,当一个函数(暂且叫son函数)的外层函数(father函数)执行结束后,JS引擎会为son函数创建两个相关的对象,分别是 son本身的函数对象 和 son的原型对象。并且这两个对象之间通过属性constructor和prototype相互关联。 当通过new创建对象时,这个对象中的constructor属性 和 proto属性分别会指向 函数对象 和 原型对象。
原型模式中的“原型”就是函数的原型对象。
3.2. 原型的特点
- 每个函数初始化完成后都会创建一个原型对象,即:函数对象和原型对象一一对应;
- 通过new创建的所有对象,都有一个proto属性指向其原型对象;
3.3. 原型能做什么?
正因为原型对象拥有3.2所提高的两个特点,因此它可以存储某一类型的共有属性和方法。 这样每个对象就不必重复定义函数了,并且能实现某些属性共享。
3.4. 如何往原型中添加属性?
我们知道,每个通过构造函数的函数对象都有一个prototype属性,指向它的原型对象,因此我们可以使用这个属性访问构造函数的原型对象,并为它添加属性和方法,就像这样:
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.school = "NJUPT";
- 注意1:虽然对象中也有个proto属性指向原型对象,但这个属性是提供给JS引擎使用的,我们没办法通过代码访问。
- 注意2:在原型中添加的属性和函数将会被该类型的所有对象共享;
- 注意3:原型中的函数的this指向???
3.5. 如何使用原型中的属性?
3.5.1. 访问原型属性
在对象中使用原型属性和使用对象的普通属性一样,不需要任何额外操作:
var person = new Person("柴毛毛",18);
alert(person.school);
当访问person.school时,JS引擎首先从从person对象中找,若找不到,就顺着proto属性去原型中找。
3.5.2. 修改原型属性(基本数据类型)
对象无法修改原型中的任何属性! 若原型对象中有school属性,此时执行下列代码,只会在person对象中添加一个school属性,不会对原型属性有任何影响。
person.school = "BJUPT";
当再次访问person.school时,访问到的就是对象中的school。 只有delete person.school后才能再次访问到原型中的school。 PS:将person.school设为null、undefined并没什么卵用,person.school的结果将仍然是person对象中的school。
3.5.3. 修改原型属性(引用类型)
若原型对象中存在引用类型的属性,那么可以通过对象修改它:
Person.prototype.names = ["chai","mao"];
person.names.push("柴毛毛");
此时,原型中的names将变成[“chai”,”mao”,”柴毛毛”],并且该类型所有对象的names都将改变。
3.5.4. 新增原型属性
3.6. 定义方式
使用原型模式,首先得创建一个构造函数,然后在构造函数的原型对象上添加属性。
function Person () {}
Person.prototype.属性名 = 属性值;
Person.prototype.函数名 = function(){
// ……
}
3.7. 对象创建方式
var person = new Person();
3.8. 优点
由于原型对象被同一类型的所有对象共享,因此可以将函数 和 共享变量 定义在原型上,从而能避免重复创建对象,节约内存空间,并且能实现变量的共享。
3.9. 缺点
也正是因为原型拥有被同一类型的所有对象共享的特点,因此如果将所有属性都定义在原型上,那么就不存在对象的实例属性了。
4. 构造函数+原型模式
通过构造函数创建的对象只有实例属性,没有共享属性;而通过原型模式创建的对象只有共享属性,没有对象的实例属性;因此可以把这两种模式结合起来,取长补短。
4.1. 定义方式
- 实例属性在构造函数中定义: 从而每个对象都有各自不同的实例属性值;
- 共享属性在原型中定义: 从而函数、需要共享的属性可以被同一类型的所有对象共享。
// 在构造函数中定义实例属性
function Person (name,age){
this.name = name;
this.age = age;
}
// 在原型上定义函数
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.getAge = function(){
return this.age;
}
// 在原型上定义共享的属性
Person.prototype.school = "NJUPT";
4.2. 对象创建方式
var person = new Person("柴毛毛",18);
4.3. 优点
这种模式结合了构造函数模式和原型模式的优点:
- 可以知道对象的类型;
- 可以避免函数对象被重复定义,节约内存;
- 可以添加共享属性;
4.4. 缺点
- 这种模式唯一的缺点就是打破了封装性 在面向对象的语言中,一个类所有的函数和属性都定义在类中;而这种方式定义的“类”中,函数 和 共享属性 都被定义在了“类”的外面,因此破坏了面向对象的封装性。
5. 构造函数+原型模式PRO(动态原型模式)
这种方式就是为了解决上面方法“破坏了封装性”的问题的。
5.1. 定义方式
// 在构造函数中定义实例属性
function Person (name,age){
this.name = name;
this.age = age;
if ( typeof this.getName != "function" ) {
// 在原型上定义函数
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.getAge = function(){
return this.age;
}
// 在原型上定义共享的属性
Person.prototype.school = "NJUPT";
}
}
- 上述方式把一个“类”中所有的属性都在“类”内部定义,因此体现了面向对象的“封装性”。
- 当创建Person类的第一个对象时,就会执行到这个if语句块;由于此时Person的原型中并没有任何自定义的属性,因此typeof this.getName将返回”undefined”,而不是”function”,因此就会执行if语句块中的代码;这些属性就会被添加到原型对象中;
- 当第二次创建Person类的对象时,由于原型中已经存在了先前定义的属性,因此typeof this.getName就会返回”function”,从而if语句块就不会执行。
- 问题1:可以使用this.prototype来给原型添加属性吗? 绝对不可以!你的代码若要显示访问原型中的属性,只能通过“构造函数.prototype.xxx”去访问,因为prototype属性只存在于构造函数对象中,实例对象中并没有prototype属性。 此外,实例对象中有一个指向原型对象的proto属性,但这个属性只给JS引擎使用,我们通过代码是调用不到的!这个属性的作用是:当我们通过实例对象调用原型中的属性时,JS引擎就会使用这个指针通往原型对象。
- 问题2:用this.getName来判断原型对象中是否有getName函数合理吗?是否可以用Person.prototype.getName来判断? 这里有两个问题,第一个问题:完全合理。第二个问题:完全可以。下面分别解释。 我们知道,通过构造函数创建对象后,内存中会有三个与之相关的对象:1.构造函数本身的对象A、2.构造函数的原型对象B、3.实例对象C。 构造函数中的this指向实例对象C,因此当执行this.getName时,JS引擎首先在对象C中找,而C刚创建,肯定不会有getName函数,因此JS引擎通过proto属性去原型B中找。
5.2. 对象创建方式
var person = new Person("柴毛毛",18);
5.3. 优点
和原型模式+构造函数模式相比,增加了封装性,更利于理解代码。
5.4. 缺点
一般都用这种方法,完美无缺点!
一般来说,定义“类”就使用原型模式,先前介绍的几种方式都是为了引出原型模式。
下面介绍几种在特殊情况下会用到的定义“类”的模式。
6. 寄生构造函数模式
当我们要给JS原生对象扩充功能的时候,我们可以在原生对象的原型上添加新功能,由于原型上的属性被该类所有对象共享,因此我们就可以在旧对象上使用新功能。但这种做法太危险,假设现在你系统的Array类中没有distinct函数,然后你在Array.prototype上添加了个distinct函数;当你的系统扩展后,也许那个JS库中也向Array.prototype添加了个distinct函数,那你先前添加的那个函数将被覆盖掉,调用这个函数的代码将会出错。因此,不要向原生对象的prototype中添加任何属性! 但如果想要扩展原生对象的功能,就可以使用寄生构造函数模式。
6.1. 定义方式
function MyArray () {
var array = new Array();
array.distinct = function () {
// ……
}
array.sort = function () {
// ……
}
return array;
}
定义方式和工厂模式类似:
- 手动new一个需要扩展的原生JS对象;
- 在这个对象上添加新功能;
- 返回这个对象。
6.2. 调用方式
方式一:直接调用
var array = MyArray();
方式二(推荐):使用new
var array = new MyArray();
为了体现它是一个对象创建的过程,增强可读性,因此建议你仍然使用new来创建对象,那有人不禁要问:这个构造函数违背了构造函数的规则呀,不仅显示创建了一个对象,还显示调用了return语句,难道new调用它仍能正确执行吗? 当然可以!通过new执行一个函数时,JS都会首先创建一个对象,再执行函数中的代码,最后如果没有return语句,就会自动return刚才创建的那个对象;如果有return语句,那么就返回return后面指定的对象。 因此,在这里通过new调用MyArray时,JS引擎会创建一个默认的Object对象,并且将它的proto、constructor分别指向MyArray.prototype和MyArray,然后执行自身的代码。谁知在执行自身代码的过程中又创建了个新对象,并且给新对象添加了属性,最后还返回了这个对象。因此,通过这种模式创建的对象,它的proto、constructor仍然指向Array,因此它的类型是Array,而非MyArray。
6.3. 优点
- 可以在不影响原生对象的基础上增强原生对象的功能 因为这种模式在原生“类型”的对象上添加新功能,而非在原生“类型”的原型上添加,因此不会对原型造成任何影响。 此外,由于创建的对象是原生类型,因此又具有原生类型的所有功能。 这种模式在扩充原生类型的功能方面堪称完美!
6.4. 缺点
- 没办法知道对象的确切类型,只能知道它的原生对象类型。
7. 稳妥构造函数模式
由于this、new等关键字会导致安全漏洞的发生,因此若系统安全性要求很高的话就不能使用这些语法,此时若要创建对象就得使用稳妥构造函数模式。
7.1. 方法定义
function Person ( name, age ) {
var object = new Object();
// object.name = name;
// object.age = age;
object.getName = function(){
return name;
}
object.getAge = function(){
return age;
}
return object;
}
注意这里被注掉的两行代码,对于安全级别较高的属性,不能直接挂载到object对象上(因为直接挂载到object上的属性可以被外界随意修改和访问),而是让它们以局部变量的形式出现在构造函数中,若外界要访问和修改,则在object上添加访问和修改的函数,这样就可以在函数中对修改作限制。 我们知道,函数的局部变量存在于函数的变量对象中,一旦函数执行完成,变量对象中的值只能通过函数内部的闭包来访问。
7.2. 对象创建方式
不能通过new创建,只能当作普通函数调用。
var person = Person("柴毛毛",18);
8. 地球人都知道的方式
最后为了体现完整性,我还是把最最最普通的几种对象创建方式加上。
8.1. 方法一
var object = new Object();
object.xxx = xxx;
// ……
8.2. 方法二
var object = {
xxx : yyy,
zzz : aaa,
……
};
这是JS语法糖,是为了写起来方便而添加的新语法本质上仍然是使用new Object创建对象。
- Oracle 12c DG新特性Far Sync(r10笔记第67天)
- iOS微信特殊字符保护方案
- 简单易学的机器学习算法——谱聚类(Spectal Clustering)
- oracle数据库 如何查询某个表的约束条件
- 结构体存入文件并且取出
- 【Go 语言社区】使用 Redis 实现排行榜功能
- 使用12c PDB整合环境的总结 (r10笔记第66天)
- 【Go 语言社区】Redis(ZADD)简单排名
- C得到文件的大小
- 【Go 语言社区】Go语言实现选择法排序实例
- 【Go 语言社区】Go语言转换所有字符串为大写或者小写的方法
- Go语言按字节截取字符串的方法
- Go语言中字符串的查找方法小结
- 优化算法——遗传算法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Selenium自动化:代码测试与无代码测试
- 个人独立博客搭建教程(win),如何快速搭建博客
- dotnet OpenXML 解压缩文档为文件夹工具
- webpack实战——预处理器(loader)【上篇】
- Mac安装git,brew出现的问题
- dotnet OpenXML 简单聊聊 PPT 文本解析
- R语言作图——Ridgeline plot(山脊图)
- dotnet OpenXML 的 spcPct 和 spcPts 表示距离的不同
- 深入剖析.NETCORE中CORS(跨站资源共享)
- 网络安全实验室平台(基础关)
- Unity 基于excel2json批处理读取Excel表并反序列化
- dotnet OpenXML 文本 Text Line Break 的作用
- CVE-2020-1362 漏洞分析
- wpa_supplicant 框架
- 【LeetCode每日一题】25. Reverse Nodes in k-Group