Javascript Object.assign( )用法及代碼示例

JavaScript中的對象和對象構造函數？
在麵向對象編程的生活世界中，我們已經知道類和對象的重要性，但是與其他編程語言不同，JavaScript沒有其他語言所具有的傳統類。但是JavaScript具有對象和構造函數，它們在大多數情況下以相同的方式工作以執行相同的操作。
構造函數是與“new”關鍵字一起使用的常規JavaScript函數。構造函數在JavaScript中有兩種類型，即內置構造函數(數組和對象)和自定義構造函數(定義特定對象的屬性和方法)。
當我們需要一種創建可以多次使用而不必每次都重新定義對象的對象“type”的構造函數時，構造函數會很有用，這可以使用Object Constructor函數來實現。按照慣例，大寫的構造函數名稱會將其與常規函數區分開。
例如，考慮以下代碼：

function Automobile(color) {
  this.color=color;
}

var vehicle1 = new Automobile ("red");

函數“Automobile()”是一個對象構造函數，其屬性和方法即“color”在其內部聲明為關鍵字“this”。然後使用關鍵字“new”將使用對象構造函數定義的對象轉換為即時對象。

調用新的Automobile()時，JavaScript執行以下兩項操作：

1. 它創建一個新的新對象(實例)Automobile()並將其分配給變量。
2. 它將對象的構造函數屬性“color”設置為Automobile。

Object.assign()方法
在對象構造函數方法中，有一個方法Object.assign()，該方法用於將值和屬性從一個或多個源對象複製到目標對象。因為它同時使用源上的[[Get]]和目標上的[[Set]]，所以它會調用getter和setter。它返回具有從目標對象複製的屬性和值的目標對象。 Object.assign()不會拋出空值或未定義的源值。
應用範圍：

• Object.assign()用於克隆對象。
• Object.assign()用於合並具有相同屬性的對象。

用法:

Object.assign(target, ...sources)

使用的參數：

1. target：是目標對象，必須從中複製值和屬性。
2. sources : 這是必須將值和屬性複製到的源對象。

返回值：
Object.assign()返回目標對象。

下麵提供上述函數的示例。

例子：

Input : var obj1 = { a: 10 };
        var new_obj = Object.assign({}, obj1);
        console.log(new_obj);
Output : Object { a: 10 }

Explanation: Here in this example the properties of object "obj1" i.e. { a: 10 } is copied to the target object "new_obj".

Input : var obj1 = { a: 10 };
        var obj2 = { b: 20 };
        var obj3 = { c: 30 };
        var new_obj = Object.assign(o1, o2, o3);
        console.log(new_obj);
Output : Object { a: 10, b: 20, c: 30 }

Explanation: Here in this example the properties of three source objects "obj1, obj2, obj3" are copied to the target object "new_obj".

Input : var obj1 = { a: 10, b: 10, c: 10 };
        var obj2 = { b: 20, c: 20 };
        var obj3 = { c: 30 };
        var new_obj = Object.assign({}, obj1, obj2, obj3);
        console.log(new_obj); 
Output : Object { a: 10, b: 20, c: 30 }

Explanation: Here in this example the properties of three source objects "obj1, obj2, obj3" are copied to the target object "new_obj"  and the target object gets the overwritten values.

下麵提供了上述函數的代碼。

代碼1：

<script> 
<!-- creating an object constructor and assigning values to it -->
const obj1 = { a: 1 }; 
  
<!--creating a target object and copying values and properties to it using object.assign() method -->
const new_obj = Object.assign({}, obj1); 
  
<!-- Displaying the target object -->
console.log(new_obj); 
</script>

輸出：

Object { a: 1 }

代碼2：

<script> 
<!-- creating 3 object constructors and assigning values to it -->
var obj1 = { a: 10 }; 
var obj2 = { b: 20 }; 
var obj3 = { c: 30 }; 
  
<!--creating a target object and copying values and properties to it using object.assign() method -->
var new_obj = Object.assign({}, obj1, obj2, obj3); 
  
<!-- Displaying the target object -->
console.log(new_obj); 
</script>

輸出：

Object { a: 10, b: 20, c: 30 }

代碼3：

<script> 
  
<!-- creating 3 object constructors and assigning values to it -->
var obj1 = { a: 10, b: 10, c: 10 }; 
var obj2 = { b: 20, c: 20 }; 
var obj3 = { c: 30 }; 
  
<!--creating a target object and copying values and properties to it using object.assign() method -->
var new_obj = Object.assign({}, obj1, obj2, obj3); 
  
<!-- Displaying the target object -->
console.log(new_obj); 
</script>

輸出：

Object { a: 10, b: 20, c: 30 }

說明：在上麵的代碼中，屬性隨後被其他具有相同屬性的對象以相同的參數順序覆蓋。

錯誤和異常

• 如果該屬性不可寫，則引發TypeError。
• 僅當在引發錯誤之前添加屬性時，才能更改目標對象。
• Object.assign()不會拋出空值或未定義的源值。