JavaScript创建对象的七种方式(推荐)


Posted in Javascript onJune 26, 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 相关文章推荐
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
layui实现动态和静态分页
Apr 28 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 #Javascript
JavaScript的六种继承方式(推荐)
Jun 26 #Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 #Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 #Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 #Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 #Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 #Javascript
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
第五节--克隆
2006/11/16 PHP
PHP 学习路线与时间表
2010/02/21 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
英语演讲稿范文
2014/01/03 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
推荐信格式要求
2014/05/09 职场文书
教师师德承诺书2016
2016/03/25 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis