理解es6中的Object.assign()

在es6中提供了一个新的方法，非常方便，Object.assign()；

使用assign主要是为了简化对象的混入（mixin）。混入是指的在一个对象中引用另一个对象的属性或方法。

assing可以把一个对象的属性和方法完整的转copy到另外一个对象中。
在es5中复制一个对象，需要很长的一段代码，而es6完全解决了这个问题：

 

var p = {
        name : "lisi",
        age : 20,
        friends : ['张三', '李四']
    }
    var p1 = {};
    Object.assign(p1, p); //则p1中就有了与p相同的属性和方法.  p1是接受者，p是提供者
    console.log(p1);
    //这种copy是浅copy，也就是说如果属性值是对象的话，只是copy的对象的地址值(引用）
    console.log(p1.friends == p.friends);  //true   p1和p的friends同事指向了同一个数组。
    p.friends.push("王五");
    console.log(p1.friends); //['张三', '李四', '王五']

由此可以看出，复制的对象与被复制的对象是同步的，不管你修改的是复制的对象还是被复制对象的值，都是同步体现的！当然添加属性的时候也是适用的！

assign方法可以接受任意多的提供者。意味着后面提供者的同名属性和覆盖前面提供者的属性值。

 

 var p = {
        name : "lisi",
        age : 20,
        friends : ['张三', '李四']
    }
    var p1 = {
        name : 'zs',
    }
    var p2 = {};
    Object.assign(p2, p, p1); //p和p1都是提供者
    console.log(p2.name); // zs

通过上面的代码可以看出，当出现多个参数的时候，后面提供者的同名属性和覆盖前面提供者的属性值。（覆盖的作用）

还有一种情况,如下：

 

var p = {
        name : "lisi",
        age : 20,
        friends : ['张三', '李四']
    }
    var p1 = {
        age1 : 30,
    };
    Object.assign(p1, p); //则p1中就有了与p相同的属性和方法.  p1是接受者，p是提供者
    console.log(p1);  //Object {  {age1: 30, name: "lisi", age: 20, friends: Array(3),}
    //这种copy是浅copy，也就是说如果属性值是对象的话，只是copy的对象的地址值(引用）
 
 五']

如果接收的对象里面存在了某个属性，提供者的属性就会被添加到接受对象的后面；

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

补充： 当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

作者：殖民_FE
链接：https://www.jianshu.com/p/15e6f3c2865e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。