详解 JS 中的 Object

Object 中的静态方法

Object 可以把它看做是一个类，里面定义了很多静态方法和实例方法。下面先来介绍它的静态方法。

Object.assign(target,assign) —— 将所有可枚举属性的值从一个或多个源对象复制到目标对象中，返回目标对象。该方法会改变原对象。

简单来说，该方法可以接收多个参数，其中第一个参数为目标对象，剩下的都是源对象。该方法就是用于将所有源对象的可枚举键值对添加到目标对象中（浅复制）， 结果返回目标对象。

const target = {name:"jonas",age:18};
const source = {address:"Guangzhou",gender:"male"}
Object.assign(target,source);
console.log(target);//{name: "jonas", age: 18, address: "Guangzhou", gender: "male"}

如果使用 ES6 的语法来实现这种需求更加简便：

let target = {name:"jonas",age:18};
let source = {address:"Guangzhou",gender:"male"}
target = {...target,...source}

三点运算符也是通过浅复制来实现拷贝的。

Object.create(proto,propertiesObject) —— 创建一个对象，使用现有的对象提供新对象的 __proto__

 该方法提供了两个参数，第一个参数就是新创建对象的原型对象；第二个参数是对象的属性描述对象，第二个为可选参数，若不传则会创建一个空对象。方法的结果返回新创建的对象。

function Person() {}
Person.prototype.hello = function (){
    console.log("hello")
}
let person = Object.create(Person.prototype,{
    name:{
        value:"jonas",
        writable:true,
        configurable:true,
    },
    age:{
        value:18,
        writable:true,
        configurable:true,
    }
})
console.log(person)//Person {name: "jonas", age: 18}
person.hello()//hello

Object.defineProperty(obj,prop,descriptor) —— 直接在一个对象上定义新属性，或者修改一个对象中的属性，并返回这个对象。

方法有三个必须参数， 第一个参数 obj 是目标对象；第二个参数 prop 是属性名；第三个参数是这个属性的描述符。

let person = {}
Object.defineProperty(person,"name",{
    value : "jonas",
    writable : true,
    enumerable : true,
    configurable : true
})
console.log(person)//{name: "jonas"}

也许你会吐槽，这是做甚哎？如果需要给一个对象添加或者修改属性干嘛不直接通过 . 或者 [] 的方式呢？这不是麻烦了吗？

是的，你说的没有毛病，如果是平常我们使用的对象没有必要通过这种方式来添加或修改属性。这个方法往往是给框架的底层使用的，比如说 Vue 。Vue 的核心是数据驱动页面渲染，让开发者把更多的精力放在数据上；然而实现这一个核心的就是数据的双向绑定和指令的解释。其中，在数据绑定里面，就是用到了这个方法（具体的分析看后面有关 Vue 的文章，暂未出，待更）。

回到这个方法上，属性描述符 descriptor 有两种：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也有可能是不可写的。存取描述符是由 getter 和 setter 函数对属性的描述。描述符不能同时是两者，只能是其一。

无论是哪种描述符，本质上都是一个配置对象，其中，有些属性是通用的：

 configurable —— 布尔值，默认值为 false。若值为 true，则表示这个属性的描述符可以被改变，同时该属性也能从对象上删除。

enumerable —— 布尔值，默认值为 false。若值为 true，则表示该属性能够被枚举。

数据描述符特有的属性：

value —— 该属性的值，默认值为 undefined

writable —— 布尔值，默认值为 false，若值为 true，value 可以被重写。

 存取描述符特有的属性：

get:function —— 默认值为 undefined，当访问该属性时，该方法会被执行。

set:function —— 默认值为 undefined，当属性修改时，触发执行该方法。该方法接收唯一的参数，就是该属性新的值。

 Object.entries(obj) —— 返回对象 obj 自身的可枚举属性的键值对数组。

let person = {name:"jonas",age:18}
let arr = Object.entries(person)
console.log(arr)//[["name", "jonas"],["age", 18]]

返回一个数组，数组的元素还是一个数组，这个数组里面的元素就是 [key,value]

利用这个方法，可以将 Object 转换为 Map：

let person = {name:"jonas",age:18}
let map = new Map(Object.entries(person))
console.log(map)//Map(2) {"name" => "jonas", "age" => 18}

Object.freeze(obj) —— 冻结对象 obj。一个被冻结的对象不能被修改，不能添加新的属性，不能修改对属性的描述符，该对象的原型也不能修改。返回值就是该对象。

let person = {name:"jonas",age:18}
Object.freeze(person)
person.address = "Guangzhou"
person.age = 20
console.log(person)//{name: "jonas", age: 18}

 Object.getOwnPropertyDescriptor(obj,prop) —— 返回指定对象上自有属性对应的属性描述

let obj = {}
Object.defineProperty(obj,"name",{
    configurable:false,
    enumerable:true,
    writable:true,
    value:"Jonas"
})
let descriptor = Object.getOwnPropertyDescriptor(obj,"name")
console.log(descriptor)//{value: "Jonas", writable: true, enumerable: true, configurable: false}

Object.getOwnPropertyNames(obj) —— 返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为键名的属性）组成的数组。

let obj = {}
Object.defineProperty(obj,"name",{
    configurable:false,
    enumerable:false,
    writable:true,
    value:"Jonas"
})
Object.defineProperty(obj,Symbol(),{
    configurable:false,
    enumerable:false,
    writable:true,
    value: 18
})
let arr = Object.getOwnPropertyNames(obj)
console.log(arr)//["name"]

Object.getOwnPropertySymbols(obj) —— 返回一个指定对象自身所有 Symbol 键名的数组

let obj = {}
Object.defineProperty(obj,"name",{
    configurable:false,
    enumerable:false,
    writable:true,
    value:"Jonas"
})
Object.defineProperty(obj,Symbol(),{
    configurable:false,
    enumerable:false,
    writable:true,
    value: 18
})
let arr = Object.getOwnPropertySymbols(obj)
console.log(arr)//[Symbol()]

 Object.getPrototypeOf(obj) —— 返回指定对象的原型对象

function Person() {}
Person.prototype.hello = function () {
    console.log("hello")
}
let person = new Person()
let proto = Object.getPrototypeOf(person)
proto.hello()//hello

Object.is(obj1,obj2) —— 比较两个对象是否相同，返回布尔值

比较的规则如下：

• 如果两个值都是 undefined ，则返回 true

• 如果两个值都是 null，则返回 true

• 如果两个值都是 true 或 false ，则返回 true

• 如果两个值都是由相同个数的字符按照相同的顺序组成的字符串（也就是说，内容相同），则返回 true

• 如果两个值指向同一个对象，则返回 true

• 如果两个值都是 +0 -0 NaN，则返回 true

 最后需要注意的是，Object.is() 不会做隐式类型转换，它与 == 或 === 运算符都是不同的。

 Object.isExtensible(obj) —— 判断一个对象是否可以扩展（是否可以在上面添加新的属性），返回布尔值。

 在默认的情况下，对象是允许扩展的（无论你是通过对象构造函数，还是对象字面量创建的对象）。封闭对象、冻结对象是不可以扩展的！！

let obj = {}
Object.freeze(obj)
console.log(Object.isExtensible(obj))//false

以下还有一些小方法就不逐一举例了：

• Object.isFrozen(obj) —— 检测一个对象是否被冻结，返回布尔值。
• Object.preventExtensions(obj) —— 让一个对象变为不可扩展对象，不能添加新的属性，返回值是被修改后的对象。
• Object.seal(obj) —— 封闭一个对象，阻止添加新属性并将所有的属性标记为不可配置。
• Object.keys(obj) —— 返回一个对象中的可枚举属性组成的数组。
• Object.values(obj) —— 返回一个对象中的可枚举属性值组成的数组。

Object 的实例方法

在 JS 中，所有的对象都是来自 Object，所有对象从 Object.prototype 中集成方法和属性，尽管它们可能被覆盖。Object 的原型对象中也定义着一些方法，但是有一部分已经遗弃了，下面展示几个还在使用的：

• obj.hasOwnProperty(prop) —— 检测指定对象的自身属性中是否具有指定的属性，返回布尔值。
• obj.toString() —— 返回对象的字符串形式。
• obj.valueOf() —— 返回对象的值
• obj.isPrototypeOf(obj1) —— 检测对象是否在另一个对象的原型链上，返回布尔值。