Object.assign()的使用以及模拟实现

简介

Object.assign()是JavaScript中的一个内置方法用于一个或多个源对象属性复制到目标对象中

语法如下

 Object.assign(target, ...sources);

其中:

• target: 必须, 目标对象, 既要将源对象的属性复制到的对象
• sources: 必须, 一个或多个源对象, 既要从中复制属性的对象

多个源对象可以通过逗号分隔或作为一个数组传递

该方法将返回目标对象, 其中包含源对象的属性, 如果目标对象中的属性与源对象的属性相同, 则源对象中的属性将覆盖到目标对象中的属性

使用

 let p2 = {
    name: '佐助',
    age: 35,
    skill:{
        name:'横扫',
        damage: 45
    }
}

let p2_1 = Object.assign({},p2)

console.log('p2_1', p2_1); //{ name: '佐助', age: 35, skill: { name: '横扫', damage: 45 } }
console.log('p2_1 == p2', p2_1 == p2); // false
console.log('p2_1.skill == p2.skill', p2_1.skill == p2.skill); // true

需要注意的是

• 该方法只会复制源对象中的一层属性
• 方法会修改目标对象本身, 并将修改后的目标对象返回
• 这个方法可以赋值可遍历的对象的属性

 let p2 = {
    name: '佐助',
    age: 35,
    skill:{
        name:'横扫',
        damage: 45
    }
}

let p3 = {
    name: '女王',
    skill: {
        name: '打击',   
    }
}
// 只会复制源对象中的一层属性
let p2mix3 =  Object.assign({},p2, p3)
console.log(p2mix3); //{ name: '女王', age: 35, skill: { name: '打击' } }
// 会对目标对象进行修改
Object.assign(p2, p3);
console.log('p2', p2); //p2 { name: '女王', age: 35, skill: { name: '打击' } }

console.log(Object.assign({name:'kaka'}, '卡卡西')); //{ '0': '卡', '1': '卡', '2': '西', name: 'kaka' }

方法的参数可以不为对象 (在实际应用中大概率是不会遇到)

• 假如目标参数与源参数都为字符串的话会报错, 虽然他们都是可遍历的, 但js中字符串是一个只读的(不可改变)

console.log(Object.assign(true,false,123,456,123)) // false
console.log(Object.assign(true,false,123,456,123, '发了寄快递'))//Boolean {true, 0: '发', 1: '了', 2: '寄', 3: '快', 4: '递'}

console.log(Object.assign('ka','kk')) //TypeError: Cannot assign to read only property '0' of object '[object String]'

使用js模拟实现Object.assign()方法

function assign_simulation(target, ...sources){
    if(target == null){
        throw new TypeError('Cannot convert undefined or null to object')
    }

    const to = Object(target) //将target转换成对象

    for(let source of sources){
        if(source != null){
            for (let key in source){
                if(Object.prototype.hasOwnProperty.call(source,key)){ //这里来判断这个属性是对象自身的,而不是原型链上的
                    to[key] = source[key] //将源对象身上的属性复制到目标对象上
                }
            }
        }
    }
    
    return to; //返回目标对象
}


const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const mergedObject = assign_simulation({},target, source);
console.log(mergedObject); // { a: 1, b: 3, c: 4 }