JavaScript创建对象的七种方式全面总结


Posted in Javascript onAugust 21, 2017

 JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点

工厂模式

function createPerson(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = createPerson(‘Jiang', ‘student')
var person2 = createPerson(‘X', ‘Doctor')

可以无数次调用这个工厂函数,每次都会返回一个包含两个属性和一个方法的对象

工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题,即不能知道一个对象的类型

构造函数模式

function Person(name, job) {
 this.name = name
 this.job = job
 this.sayName = function() {
  console.log(this.name)
 }
}
var person1 = new Person(‘Jiang', ‘student')
var person2 = new Person(‘X', ‘Doctor')

没有显示的创建对象,使用new来调用这个构造函数,使用new后会自动执行如下操作

创建一个新对象
这个新对象会被执行[[prototype]]链接
这个新对象会绑定到函数调用的this
返回这个对象
使用这个方式创建对象可以检测对象类型

person1 instanceof Object // true
person1 instanceof Person //true
但是使用构造函数创建对象,每个方法都要在每个实例上重新创建一次

原型模式

function Person() {
}
Person.prototype.name = ‘Jiang'
Person.prototype.job = ‘student'
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()

将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法,不必在构造函数中定义对象实例信息。

原型是一个非常重要的概念,在一篇文章看懂proto和prototype的关系及区别中讲的非常详细

更简单的写法

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}
var person1 = new Person()

将Person.prototype设置为等于一个以对象字面量形式创建的对象,但是会导致.constructor不在指向Person了。

使用这种方式,完全重写了默认的Person.prototype对象,因此 .constructor也不会存在这里

Person.prototype.constructor === Person // false

如果需要这个属性的话,可以手动添加

function Person() {
}
Person.prototype = {
 constructor:Person
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}

不过这种方式还是不够好,应为constructor属性默认是不可枚举的,这样直接设置,它将是可枚举的。所以可以时候,Object.defineProperty方法

Object.defineProperty(Person.prototype, ‘constructor', {
 enumerable: false,
 value: Person
})

缺点

使用原型,所有的属性都将被共享,这是个很大的优点,同样会带来一些缺点

原型中所有属性实例是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性也勉强可以,毕竟实例属性可以屏蔽原型属性。但是引用类型值,就会出现问题了

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 friends: [‘Shelby', ‘Court']
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) //[“Shelby”, “Court”, “Van”]
console.log(person1.friends === person2.friends) // true

friends存在与原型中,实例person1和person2指向同一个原型,person1修改了引用的数组,也会反应到实例person2中

组合使用构造函数模式和原型模式

这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点

使用此模式可以让每个实例都会有自己的一份实例属性副本,但同时又共享着对方法的引用

这样的话,即使实例属性修改引用类型的值,也不会影响其他实例的属性值了

function Person(name) {
 this.name = name
 this.friends = [‘Shelby', ‘Court']
}
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) // [“Shelby”, “Court”]
console.log(person1.friends === person2.friends) //false

动态原型模式

动态原型模式将所有信息都封装在了构造函数中,初始化的时候,通过检测某个应该存在的方法时候有效,来决定是否需要初始化原型

function Person(name, job) {
 // 属性
 this.name = name
 this.job = job
// 方法
 if(typeof this.sayName !== ‘function') {
  Person.prototype.sayName = function() {
    console.log(this.name)
  }
 }

}
var person1 = new Person(‘Jiang', ‘Student')
person1.sayName()

只有在sayName方法不存在的时候,才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。

此后原型已经完成初始化,不需要在做什么修改了

这里对原型所做的修改,能够立即在所有实例中得到反映

其次,if语句检查的可以是初始化之后应该存在的任何属性或方法,所以不必用一大堆的if语句检查每一个属性和方法,只要检查一个就行

寄生构造函数模式

这种模式的基本思想就是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新建的对象

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = new Person(‘Jiang', ‘student')
person1.sayName()

这个模式,除了使用new操作符并把使用的包装函数叫做构造函数之外,和工厂模式几乎一样

构造函数如果不返回对象,默认也会返回一个新的对象,通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值

稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性,而且其方法也不引用this。

稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new),或防止数据被其他应用程序改动时使用

稳妥构造函数模式和寄生模式类似,有两点不同:一是创建对象的实例方法不引用this,而是不使用new操作符调用构造函数

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(name)
 }
 return o
}
var person1 = Person(‘Jiang', ‘student')
person1.sayName()

和寄生构造函数模式一样,这样创建出来的对象与构造函数之间没有什么关系,instanceof操作符对他们没有意义

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 #Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
You might like
咖啡常见的种类
2021/03/03 新手入门
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
动态控制Table的js代码
2007/03/07 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
JS判定是否原生方法
2013/07/22 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python 内置函数汇总详解
2019/09/16 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2016年教师节慰问信
2015/12/01 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
HTML+JS实现在线朗读器
2022/02/15 Javascript