想必大家对object.assign()并不陌生吧,我最近项目中用到了这个方法,但我只知其然,不知其所以然,以至于导致出现bug,所以今天好好扒扒assign的实现原理。
用法
Object.assign(target, ...sources)
参数: target--->目标对象,
source--->源对象
返回值:target,即目标对象
assign()的概念
首先了解下Object.assign()是什么?
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。
使用示例
1、当目标对象和源对象无重名属性时
var target={name:'guxin',age:25};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);
运行结果
可以看到assign把原对象(source)合并到目标对象(target)上了。
但如果我们只想得到一个全新的合并对象,而不改变原有的对象,该怎么做呢?其实我们只需要添加一个空对象参数就可以了。(因为此时的目标对象是{},source和target都是源对象)
var result=Object.assign({},target,source);
运行结果
2、当目标对象和源对象有重名属性的时候
当目标对象和源对象有重名属性的时候,后面对象的属性会覆盖前面对象的属性
var target={name:'guxin',age:18}
var source={state:'signle',age:22}
var result=Object.assign(target,source)
console.log(target)
运行结果
注意事项
object.assgin()再拷贝引用类型时,只是一个浅拷贝,拷贝的是属性值,没有拷贝引用地址,所以修改其中任意的值,另一个值都会随之变化
总结
assign()可以用于对象属性的合并和拷贝,源对象可以有多个,当目标对象和源对象有相同属性时,后面对象的属性会覆盖前面对象的属性。