ES6中新增的Object.assign()方法详解


Posted in Javascript onSeptember 22, 2017

前言

将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作。下面这篇文章将介绍ES6的Object.assign()属性,可以用于对象复制。

在JavaScript生态系统中,对象复制有另外一个术语: extend。下面是两个JS库提供的extend接口:

Prototype: Object.extend(destination, source)

Underscore.js: _.extend(destination, *sources)

Object.assign()介绍

ES6提供了Object.assign() ,用于合并/复制对象的属性。

Object.assign(target, source_1, ..., source_n)

它会修改target对象,然后将它返回:先将source_1对象的所有可枚举属性复制给target,然后依次复制source_1等的属性。

1. 属性名可以为字符串或者Symbol

在ES6中,对象的属性名可以是字符串或者Symbol。因为Symbol值具有唯一性,这就意味着Symbol作为对象的属性名时,可以保证不会出现同名的属性。对象属性名为字符串或者Symbol时,Object.assign()都支持。

2. 属性复制通过赋值实现

target对象的属性是通过复制来创建的,这就意味着,如果target有setters方法时,它们将会被调用。

另一种方案是通过定义来实现,这样将会创建新的自有属性,不会调用setters方法。其实,另一个版本的Object.assign()的提案正是采用这种方法。不过,这个提议在ES6中被拒绝了,也许之后的版本会再考虑。

Object.assign()使用示例

1. 初始化对象属性

构造器正是为了初始化对象的属性,通常,我们不得不多次重复属性的名字。示例代码的constructor中,x与y均重复了两次:

class Point
{
 constructor(x, y)
 {
  this.x = x;
  this.y = y;
 }
}

如果可以的话,个人偏爱将所有冗余都省去。(事实上,CoffeeScript与TypeScript都有语法解决构造器中属性名重复的问题。):

class Point
{
 constructor(this.x, this.y){}
}

至少,Object.assign()可以帮助我们减少一些重复:

class Point
{
 constructor(x, y)
 {
  Object.assign(this, { x, y });
 }
}

在ES6中, { x, y }{ x: x, y: y }的缩写。

2. 为对象添加方法

ECMAScript 5, you use a function expression to add a method to an object:

在ES5中,需要使用function关键字定义对象的新增方法:

MyClass.prototype.foo = function(arg1, arg2)
{
 //...
};

在ES6中,对象方法的定义更加简洁,不需要使用function关键字。这时,可以使用Object.assign()为对象新增方法:

Object.assign(MyClass.prototype,
{
 foo(arg1, arg2)
 {
  //...
 }
});

3. 复制对象

使用Object.assign()深度复制对象,包括其prototype

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1,y:2}

console.log(copy) // 输出{x:1,y:2}

仅复制自身属性:

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({}, obj);

console.log(copy) // 输出{x:1}

总结

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

参考

  • Object properties in JavaScript
  • Properties in JavaScript: definition versus assignment
  • Callable entities in ECMAScript 6

原文: ECMAScript 6: merging objects via Object.assign()

译者: Fundebug

Javascript 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
React组件中的this的具体使用
Feb 28 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vee-Validate的使用方法详解
Sep 22 #Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
Node.js自定义实现文件路由功能
Sep 22 #Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 #Javascript
javascript计算渐变颜色的实例
Sep 22 #Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 #Javascript
原生JS实现日历组件的示例代码
Sep 22 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
javascript的console.log()用法小结
2012/05/31 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
layui的select联动实现代码
2019/09/28 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python yield使用方法示例
2013/12/04 Python
python求众数问题实例
2014/09/26 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python的exec、eval使用分析
2017/12/11 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
2014年实习班主任工作总结
2014/11/08 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
情人节单身感言
2015/08/03 职场文书
企业法人任命书
2015/09/21 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers