JavaScript 中的 Object.assign()

JavaScript 中的对象和对象构造函数？
在面向对象编程的现实世界中，我们已经知道类和对象的重要性，但与其他编程语言不同，JavaScript 没有其他语言中看到的传统类。但是 JavaScript 有对象和构造函数，它们大多以相同的方式执行相同类型的操作。
构造函数是与“new”关键字一起使用的通用 JavaScript 函数。 JavaScript 中的构造函数有两种类型，即内置构造函数（数组和对象）和自定义构造函数（为特定对象定义属性和方法）。
当我们需要一种方法来创建可以多次使用的对象“类型”而不必每次都重新定义对象时，构造函数会很有用，这可以使用对象构造函数来实现。将构造函数的名称大写以将它们与常规函数区分开来是一种惯例。
例如，考虑以下代码：

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

var vehicle1 = new Automobile ("red");

函数“Automobile()”是一个对象构造函数，它的属性和方法，即“color”是通过在它的前面加上关键字“this”来声明的。使用对象构造函数定义的对象然后使用关键字“new”成为即时对象。
当 new Automobile() 被调用时，JavaScript 做了两件事：

1. 它创建一个新的对象（实例）汽车（）并将其分配给一个变量。
2. 它将对象的构造函数属性（即“颜色”）设置为汽车。

Object.assign() 方法
在 Object 构造方法中，有一个方法 Object.assign() 用于将值和属性从一个或多个源对象复制到目标对象。它调用 getter 和 setter，因为它在源上使用 [[Get]] 并在目标上使用 [[Set]]。它返回具有从目标对象复制的属性和值的目标对象。 Object.assign() 不会抛出 null 或未定义的源值。
应用：

• Object.assign() 用于克隆对象。
• Object.assign() 用于合并具有相同属性的对象。

句法：

Object.assign(target, ...sources)

使用的参数：

1. 目标：它是必须将值和属性复制到的目标对象。
2. 来源：它是必须从中复制值和属性的源对象。

返回值：
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(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". The value of any pre-existing key-value pair that existed in the previous object will be over-written.

For example: obj1.b which has value of 10 will now be overwritten with obj2.b which has a value of 20

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：

html

<!-- 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 -->
<!--Here, obj1 is the source object-->
const new_obj = Object.assign({}, obj1);
 
<!-- Displaying the target object -->
console.log(new_obj);

输出 ：

Object { a: 1 }

代码 2：

html

<!-- 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);

输出 ：

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

代码 3：

html

 
<!-- 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);

输出 ：

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

解释：在上面的代码中，属性被稍后以相同参数顺序具有相同属性的其他对象覆盖。
错误和异常

• 如果属性不可写，则会引发 TypeError。
• 只有在引发错误之前添加了属性，才能更改目标对象。
• Object.assign() 不会抛出 null 或未定义的源值。

支持的浏览器：

• 谷歌浏览器 6.0 及以上
• Internet Explorer 9.0 及更高版本
• Mozilla 4.0 及更高版本
• Opera 11.1 及更高版本
• Safari 5.0 及以上