Object的assign和create静态方法,你真的懂嘛?

551 阅读1分钟

我们知道,assign()和create()都可以用来实现浅拷贝,create()还可以用来实现继承。
但是,这两个方法还有很多细小的坑,就让我们看看叭。

Object.assgin()

若传参只有一个obj,返回obj的浅拷贝。
若传参多于一个,给第一个obj传入后面所有对象的自身的可枚举的属性。并且改变第一个对象。
每个对象属性有四个值,value、enumerable、configurable、writable。
可以通过Object.defineProperty来设置,那具体的就不说了。
看代码。

let obj1 = {
    1: [1, 2, 3],
    a: 'asdfg',
    2: 123456
}

let obj2 = {
    1: 123,
    q: '12342',
    b: [12, 3, 4]
}

let obj3 = {
    23: 4
}

Object.defineProperty(obj3, '23', {
    value: 12,
    enumerable: false,
    configurable: true,
    writable: true
})

let a = Object.assign(obj1, obj2, obj3)
let b = Object.assign(obj2)


console.log(a);
console.log(b);
console.log(obj1);
console.log(obj2);
console.log(obj3);

image.png
因为obj3的属性不可枚举,所以不会被添加到新对象上。

Object.create()

参数为一个对象时,继承obj原型链上的属性。

let obj1 = {
    1: 123,
    2: [1, 2, 3],
    a: 'asdf'
}

let obj2 = {
    1: 321,
    q: 123423,
    b: 'asdfasd'
}

obj1.__proto__ = obj2


let a = Object.create(obj1)

console.log(a);
console.log(a.__proto__);

image.png 新创建的a对象继承了obj1原型链上的属性。


参数为两个时,传入的第二个参数为属性注意:参数是对象的属性
并且要设置枚举属性为true,才可以被新对象添加到自身属性上。

let obj1 = {
    1: 123,
    2: [1, 2, 3],
    a: 'asdf'
}

let obj2 = {
    1: 321,
    q: 123423,
    b: 'asdfasd'
}


obj1.__proto__ = obj2


let a = Object.create(obj1, {
    own1: {
        value: 234
    },
    own2: {
        value: 1234,
        enumerable: true
    }
})

console.log(a);
console.log(a.__proto__);

image.png
第一个属性own1没有设置枚举性,则默认为false,所以不会被添加。
第二个属性own2设置了枚举性为true,则会被添加到自身属性上。


记录记录!