Array.prototype.concat() 和 Object.assign() 的区别

Posted 2020-12-11 永不言弃！

先来看看下面两段代码

let arr1 = [‘a‘, ‘b‘];
let arr2 = [‘a‘, ‘c‘];
let arr3 = arr1.concat(arr2);
// arr3: [‘a‘, ‘b‘, ‘a‘, ‘c‘]

let obj1 = {name: ‘张三‘, age: 22};
let obj2 = {name: ‘李四‘, sex: ‘boy‘};
let obj3 = Object.assgin(obj1, obj2);
// obj3: {name: ‘李四‘, age: 22, sex: ‘boy‘}

很显然，他们都出色地完成了多个目标的合并，但是仔细一看，还是有着一些不同之处：

concat() 方法与其说是合并，更像是拼接，把多个目标按顺序拼接到一起

Object.assgin() 方法则更倾向于合并，它同样按照顺序进行合并，不同之处是重名的属性，会保留最新的

 

这是他们最为初步的不同，再把这几个数组和对象进行逐个打印观察：

arr1: [‘a‘, ‘b‘]
arr2: [‘a‘, ‘c‘]
arr3: [‘a‘, ‘b‘, ‘a‘, ‘c‘]

obj1: {name: ‘李四‘, age: 22, sex: ‘boy‘}
obj2: {name: ‘李四‘, sex: ‘boy‘}
obj3: {name: ‘李四‘, age: 22, sex: ‘boy‘}

很好，我们又发现新的不同了：

concat 方法是创建一个新的数组，不会对参与拼接的数组内部进行直接的操作，他们本身不会发生改变

Object.assgin() 方法，第一个参数是源对象，其他参数对象的任务，就是把他们的属性都赋值到这个源对象上，

所以是对这个源对象 obj1 进行的操作（改造），它不会创造新的对象，除了源对象 obj1 发生改变外，其他的对象并不会发生改变

 

那么，他们的本身的属性，和原型对象对象上的属性，会参与合并吗？

代码：

// 在 concat 合并之前，我们给 arr2 本身，和它的原型对象，分别加上不同的属性
arr2.myLeng = function () {
    console.log(this.length);
};
arr2.__proto__.proLeng = function () {
    console.log(this.length);
};
// 使用 concat 进行合并后，调用这两个方法
arr3.myLeng();  // 报错
arr3.proLeng();  // 4

我们惊讶地发现，原型对象上的方法 proLeng 也被复制过来了，但是数组本身上的方法 myLeng 并没有成功被复制过来。

再看看 Object.assgin() 的表现：

// 和上段代码相似的插入位置
obj2.from = ‘China‘;
obj2.__proto__.myAge = function () {
    console.log(this.age);
};

console.log(obj3.from); // China
obj3.myAge(); // 22

显然，复制过来的就是它本身的属性，所以 from 存在没有什么争议，关键是 obj2 原型对象上的 myAge 方法同样被继承了

 

又可以总结一条：

concat() 方法创建出来的新数组，会继承参与拼接数组原型对象上的属性和方法，但是原数组本身的属性和方法并不会被继承。

而 Object.assgin() 方法操作的源对象，会继承参与合并对象“本身”和其“原型对象”上的属性和方法

 

但是！熟悉原型链和原型对象的同学发现有点问题了！

 

注意：因为使用 __proto__ 直接操作的是对应构造函数的原型对象，

如数组的是 Array.prototype，对象的是 Object.prototype，

所以 concat 和 Object.assgin() 严格上来讲并不是把这些原型对象上的方法给赋值继承了过来，

而是操作 __proto__ 的时候，会影响全部由对应构造函数生成出来的对象或数组。 

 

那要怎么办呢，很简单，咱们自己自定义一个构造函数，给这个构造函数的原型对象添加方法。

然后用这个构造函数进行实例化，让他参与 Object.assgin()，看源对象是否会继承：

let obj = {name: ‘obj‘, type: ‘a‘};

// 自定义构造函数
let Cobj = function (name) {
    this.name = name;
};

// 给原型对象上添加方法
Cobj.prototype.getName = function () {
    console.log(this.name);
};

let obj2 = new Cobj(‘obj2‘);  // 实例化
Object.assgin(obj, obj2);
console.log(obj);  // {name: ‘obj2‘, type: ‘a‘}
obj.getName();  // 报错

 

很遗憾，如果是自定义构造函数实例出来的对象，则不会继承他原型对象上的方法。

结合上面的注意点，我们可以很容易看出来，其实 Object.assgin() 并不会继承参与合并对象的原型对象 prototype

 

 

最后把前面列举的不同进行一些汇总：
1. 两个方法都是按顺序进行和并，但是 Object.assgin 会把重复的属性进行保留最新值的操作，concat 不会
2. concat 会创建一个新的数组，不会影响参与合并的原数组。

 而 Object.assgin 则是把第一个参数对象当成操作对象，把其他参数对象的属性往它身上进行合并，不会创建新对象，是对第一个参数对象的直接操作
3. concat 创建出来的新数组，和Object.assgin 操作的对象，并不会继承有参与合并对象“本身”及“原型对象”上的方法和属性

 

 

版权声明：本文为CSDN博主「神圣光」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41399785/java/article/details/78926042