ES6之Object.assign()详解

niceforbear 发布于2019-08-21 16:40 / 848人阅读

摘要：另外，本文版权归原作者所有，翻译仅用于学习。因为值具有唯一性，这就意味着作为对象的属性名时，可以保证不会出现同名的属性。不过，这个提议在中被拒绝了，也许之后的版本会再考虑。事实上，与都有语法解决构造器中属性名重复的问题。

译者按: 这篇博客将介绍ES6新增的Object.assign()方法。

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

译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

将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

版权声明:
转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/201...

GPU服务器海外云主机 ES6 es6-系列 ES6入门 es6 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88583.html

ES6入门之对象的新增方法

showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都会转换数据类型，...

zhou_you 2019-05-22 19:25 评论0 收藏0
ES6入门之对象的新增方法

showImg(https://segmentfault.com/img/remote/1460000019258913?w=2933&h=1955); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都...

Keven 2019-08-26 13:52 评论0 收藏0
ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...

snowLu 2019-08-21 11:55 评论0 收藏0
ES6语法之对象的扩展

摘要：方法的第一个参数是目标对象，后面的参数都是源对象。这个对象的任何变化，都会反映到目标对象上面。方法将和合并成一个新对象，如果两者有同名属性，则的属性值会覆盖的属性值。否则，对象的该属性很可能不起作用。对象字面量简写法你可能写过这样的代码：使用和所分配的变量名称相同的名称初始化对象。 let type = quartz; let color = rose; let carat = 2...

SillyMonkey 2019-08-21 18:32 评论0 收藏0
ES6之对象的扩展(上)

摘要：狭义的对象字面量形式是中我最喜欢的一种结构，因为其灵活。今天准备介绍中对象的扩展相关的知识点，由于煲剧晚了，先写一半，剩下的下次再介绍。狭义的对象字面量形式是JavaScript中我最喜欢的一种结构，因为其灵活。今天准备介绍ES6中对象的扩展相关的知识点，由于煲剧晚了，先写一半，剩下的下次再介绍。主要知识点: 对象属性的简写动态 · 属性名 Object.is(value1,...

sarva 2019-08-22 17:08 评论0 收藏0