掌握JavaScript Object.assign方法

### 知识点：`Object.assign()` #### 1. 概述 `Object.assign()`是JavaScript中一个用于对象合并的函数，它属于ECMAScript 6（ES6）标准的一部分。此方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 #### 2. 语法结构 `Object.assign()`的基本语法如下： ```javascript Object.assign(target, ...sources) ``` - `target`：目标对象，所有源对象的属性将被复制到这个对象上。 - `sources`：源对象序列（一个或多个），源对象的可枚举属性将被复制到目标对象上。 #### 3. 使用场景 - **对象合并**：将多个对象的属性合并到一个新对象中。 - **属性复制**：将一个对象中的属性复制到另一个对象中。 - **函数柯里化**：固定函数参数，创建一个新的函数。 - **拷贝自有属性**：只拷贝目标对象自身的可枚举属性，不包括原型链上的属性。 - **类的方法合并**：在创建类时，合并方法到原型对象中。 #### 4. 注意事项 - **深拷贝与浅拷贝**：`Object.assign()`只能进行浅拷贝。如果源对象的属性值是基本类型值，那么拷贝的就是这个属性值；但如果属性值是引用类型，那么拷贝的就是引用地址。 - **只拷贝可枚举属性**：只复制对象自身的（不包括继承的）所有可枚举的属性。 - **目标对象修改**：`Object.assign()`执行的是浅拷贝，对目标对象的修改会影响到源对象。 - **只拷贝属性，不拷贝其他属性**：只拷贝对象的属性（属性值必须是原始值、对象或者函数），不会拷贝对象的原型链、getter/setter或者原型对象上的属性。 - **属性覆盖**：如果有多个源对象，且它们有相同的属性名，则后面的属性会覆盖前面的属性。 #### 5. 示例代码 ```javascript // 示例1：对象合并 const obj1 = { a: 1 }; const obj2 = { b: 2 }; const obj3 = { c: 3 }; const mergedObj = Object.assign({}, obj1, obj2, obj3); // 结果：{ a: 1, b: 2, c: 3 } // 示例2：属性复制 const source = { x: 10 }; const target = {}; Object.assign(target, source); // 结果：target 现在是 { x: 10 } // 示例3：函数柯里化 function add(a, b) { return a + b; } const add10 = Object.assign(add, { b: 10 }); add10(5); // 结果：15 // 示例4：拷贝自有属性 const proto = { x: 10 }; const obj = Object.create(proto); obj.y = 20; Object.assign({}, obj); // 结果：{ y: 20 }，因为x是原型链上的属性，不会被拷贝 // 示例5：类的方法合并 class Base { constructor() { this.baseMethod = function() {}; } } Object.assign(Base.prototype, { newMethod() {}, baseMethod() {} // 覆盖了基类中的baseMethod }); ``` #### 6. 与扩展运算符（...）的区别 扩展运算符（...）也可以用来合并对象，但它的行为与`Object.assign()`有些许不同： - **不可更改性**：扩展运算符在使用时不会改变对象本身，而是创建了一个浅拷贝。 - **属性覆盖**：使用扩展运算符时，后一个对象的属性会覆盖前一个对象的同名属性。 - **函数属性**：使用扩展运算符时，函数属性不会被覆盖，而是会被合并。 - **数组合并**：扩展运算符可以直接用于数组合并，而`Object.assign()`在操作数组时会将其视为普通的对象，只复制数组索引。 ```javascript const source1 = { a: 1 }; const source2 = { a: 2, b: 2 }; const source3 = { a: 3, b: 3, c: 3 }; const combined1 = {...source1, ...source2, ...source3}; // 结果：{ a: 3, b: 3, c: 3 } const combined2 = Object.assign({}, source1, source2, source3); // 结果：{ a: 3, b: 3, c: 3 } ``` 在上述代码中，使用扩展运算符合并对象时，`source2`和`source3`中的`a`属性没有覆盖`source1`中的`a`属性，而是使最终的对象拥有了最大的`a`值。而使用`Object.assign()`时，遵循的是后者的属性覆盖前者的规则。 #### 7. 兼容性 `Object.assign()`在IE11中不受支持。在不支持ES6的环境中，可以通过polyfill实现`Object.assign()`的功能。 #### 8. 文件列表分析 根据给定文件列表`main.js`和`README.txt`，可以推断： - `main.js`可能包含`Object.assign()`的实际使用示例或实现`Object.assign()`功能的polyfill代码。 - `README.txt`可能包含关于项目、文件、库的说明或者是`Object.assign()`方法的使用指南和注意事项。