ES6中Object.assign()方法

本文主要和大家分享，Object.assign方法用於物件的合併，將來源物件（ source ）的所有可枚舉屬性，複製到目標物件（ target ），以下這篇文章主要給大家介紹了關於ES6新增的Object.assign()方法的相關資料，需要的朋友可以參考下，希望能幫助大家。

前言

將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}

相關推薦：

7個ES6的實用技巧分享

ES6 javascriptclass類別的get與set用法實例

ES6中類別的靜態方法有哪些作用

以上是ES6中Object.assign()方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！