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()不会抛出空值或未定义的源值。