JavaScript中Object的常用apis

[sanjings]

JavaScript中Object的常用apis

在JavaScript中，几乎所有的对象都是Object的实例，它们的原型链的顶端是Object.prototype，这篇文章总结一下Object的常用静态方法。

1. Object.create()：使用指定的原型对象和属性创建一个新对象

const origin = {
  name: 'sanjing',
  sayName() {
     console.log(this.name)
  }
}
const target = Object.create(origin)
target.sayName() //  sanjing

相当于target.prototype = origin
当然，也可以传入null，表示没有原型的对象

const target = Object.create(null)
console.log(target.__proto__) // undefined

与new Object()的区别：Object.create()可以自定义原型，可以利用这一点来实现类继承，而new Object()是默认原型（Object.prototype）

2.Object.getPrototypeOf()：返回指定对象的原型，如果没有原型返回null

const obj = {
  name: 'sanjing'
}
console.log(Object.getPrototypeOf(obj)) // 因为obj的原型是Object.prototype，所以返回Object.prototype

const obj2 = Object.create(null)
console.log(Object.getPrototypeOf(obj2)) // null

3.Object.freeze()：冻结对象，返回被冻结的对象（常用）

被冻结后的对象不能修改原型，不能添加新属性，不能删除已有属性，不能修改它的可枚举性、可配置型、可写性，也不能修改已有属性的值。

const obj = {
  name: 'sanjing'
}
const freezeObj = Object.freeze(obj)
obj.name = 'norton'
freezeObj.sex = 'male'
delete obj.name
console.log(obj.name) // sanjing
console.log(freezeObj) // { name: 'sanjing' }

因为const 声明的对象，只能保证引用地址不被修改，里面的属性可以随意修改，所以可以使用该方法，彻底冻结对象

4.Object.seal()：封闭对象，返回被封闭的对象

被封闭后的对象不能添加新属性，不能删除已有属性，不能修改它的可枚举性、可配置型、可写性。

const obj = {
  name: 'sanjing'
}
const sealObj = Object.seal(obj)
obj.name = 'norton'
console.log(obj.name) // 'norton' 
obj.age = 27
console.log(obj) { name: 'norton' }
delete obj.name
console.log(obj) { name: 'norton' }

和Object.freeze()的区别：Object.freeze()冻结的对象中的现有属性值是不可变的。用Object.seal()密封的对象可以改变其现有属性值。

5.Object.assign(target, ...origins)：合并对象，将两个或多个对象合并，返回合并后的对象（常用）

第一个参数就是合并后的对象，之后的参数是待合并的对象，一个或多个

const origin1 = {
  name: 'sanjing'
}
const origin2 = {
  age: 27
}

const target = Object.assign({}, origin1, origin2) 
console.log(target) // {name: 'sanjing', age: 27}

Object.assign(origin1, origin2)
console.log(origin1) // {name: 'sanjing', age: 27}

【注意】：Object.assign()是按照顺序合并，如果有相同属性，则覆盖

const origin1 = {
  name: 'sanjing'
}
const origin2 = {
  name: 'norton'
}

const target = Object.assign({}, origin1, origin2) 
console.log(target) // {name: 'norton'}

6.Object.is()：判断两个值是否相等（常用）

【注意】：和===的区别是，===将+0和-0看作相等，并且NaN和NaN不等

const a = +0
const b = -0
console.log(a===b) // true
console.log(Object.is(a, b)) // false

const c = NaN
console.log(c === NaN) // false
console.log(Object.is(c, NaN)) // true

7.Object.keys()：返回一个指定对象的自身可枚举属性组成的数组（常用）

const obj = {
  name: 'sanjing',
  age: 27,
  career: 'Web Development Engineer '
}
const keys = Object.keys(obj)
console.log(keys) // ['name', 'age', 'career']

8.Object.values()：返回一个指定对象的自身可枚举属性值组成的数组（常用）

const obj = {
  name: 'sanjing',
  age: 27,
  career: 'Web Development Engineer '
}
const values= Object.keys(obj)
console.log(values) // ['sanjing', 27, 'Web Development Engineer']

9.Object.entries()：返回一个指定对象的自身可枚举属性的键值对组成的数组

const obj = {
  name: 'sanjing',
  age: 27,
  career: 'Web Development Engineer '
}
const entries= Object.entries(obj)
console.log(entries) 
[
  [ 'name', 'sanjing' ],
  [ 'age', 27 ],
  [ 'career', 'Web Development Engineer ' ]
]

【注意】：Object.keys()，Object.values()，Object.entries()这三个方法，都不会遍历原型上的属性，for in则会遍历出原型上可枚举的属性

10.Object.defineProperty()：定义对象的属性，新增或修改现有属性，返回该对象

const obj = {
  name: 'sanjing',
  age: 27
}
Object.defineProperty(obj, 'name', {
  value: 'norton',
  writable:  false, // 可写性 false的时候表示该属性不能重新赋值
  configurable: false, // 可配置性 false的时候表示该属性不可配置，也就是不可删除
  // enumerable: false, // 可枚举性 false的时候表示该属性不可枚举
})

obj.name = 'norton'
console.log(obj.name) sanjing
delete obj.name
console.log(obj.name) sanjing

当然Object.defineProperty()最有名的使用场景是Vue的响应式数据绑定，利用对象属性的getter函数和setter函数来做数据劫持，然后改变视图，实现数据改变=>视图相应改变，具体的Vue的实现原理不是本文要总结的范围，感兴趣的推荐看黄轶老师的Vue.js源码全方位深入解析

const obj = {
   name: 'sanjing'
}
let name = obj.name
Object.defineProperty(obj, 'name', {
   get() {
     return name
   },
   set(newValue) {
     name = 'name：' + newValue
    console.log('name is changed')
   }
})
obj.name = 'norton'
console.log(obj.name) // 'name is changed'   ’name：norton‘

如上通过配置对象属性的getter和setter，可以实现在访问或修改属性值时，做出相应的处理
【注意】：get、set不能和value、writable同时设置，使用Object.defineProperty()新增一个属性时，writable、configurable、enumerable默认都是false， value默认undifined

11.Object.defineProperties()：功能和Object.defineProperty()一样，可以同时定义多个属性

const obj = {}
Object.defineProperties(obj, {
   'name': {
      value: 'sanjing',
      writable: true,
      enumerable: true
   },
   'sex': {
      value: 'male',
      writable: false,
      enumerable: true
   }
});
console.log(obj) // { name: 'sanjing', sex: 'male' }