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 相关文章推荐
JavaScript中number转换成string介绍
Dec 31 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
基于 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
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
python中元类用法实例
2014/10/10 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
学python需要去培训机构吗
2020/07/01 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
住宅使用说明书
2014/05/09 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android