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 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
微信小程序实现签到功能
Oct 31 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
HTML+JS实现在线朗读器
Feb 15 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP中的正规表达式(一)
2006/10/09 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
javascript中怎么做对象的类型判断
2013/11/11 Javascript
js同源策略详解
2015/05/21 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
Python3读取zip文件信息的方法
2015/05/22 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
PyQt5响应回车事件的方法
2019/06/25 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
见习期自我鉴定
2013/11/07 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
接待员岗位责任制
2014/02/10 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书