JS 中的一些技巧 - 静かな森

对象的深拷贝

JS中对象的拷贝分为属性拷贝和原型链拷贝。

先来说说仅仅拷贝属性。

const obj = {a: 1, b: 1}
const clone_obj = {...obj} // 方式一
const clone2 = Object.assign({}, obj) // 方式二

但是这种方式并不能拷贝原型链。

const obj = {a: 1, b: 1}
obj.__proto__.func = () => {
    console.log('prototype')
}
const clone1 = {__proto__: Object.getPrototypeOf(obj), ...obj}
// {a: 1, b: 1}
console.log(clone1.func()) // prototype

const clone2 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
 obj
)

以上两种方法可以拷贝全部内容。

向对象中添加属性

class Point {
  constructor (x, y) {
    Object.assign(this, {x, y})
  }
}

上面方法是在 class 中操作的。如果是在原有的对象中添加属性可以用打点的形式，但是如果添加的键值对很多就会显得不够优雅。

可以用 Object.assign() 新建一个合并后的新对象进行操作。

对象的深拷贝

JS中对象的拷贝分为属性拷贝和原型链拷贝。

先来说说仅仅拷贝属性。

const obj = {a: 1, b: 1}
const clone_obj = {...obj} // 方式一
const clone2 = Object.assign({}, obj) // 方式二

但是这种方式并不能拷贝原型链。

const obj = {a: 1, b: 1}
obj.__proto__.func = () => {
    console.log('prototype')
}
const clone1 = {__proto__: Object.getPrototypeOf(obj), ...obj}
// {a: 1, b: 1}
console.log(clone1.func()) // prototype

const clone2 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
 obj
)

以上两种方法可以拷贝全部内容。

向对象中添加属性

class Point {
  constructor (x, y) {
    Object.assign(this, {x, y})
  }
}

上面方法是在 class 中操作的。如果是在原有的对象中添加属性可以用打点的形式，但是如果添加的键值对很多就会显得不够优雅。

可以用 Object.assign() 新建一个合并后的新对象进行操作。