深入了解 JavaScript 对象

对象

理解对象

ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。

我们可以把 ECMAScript 的对象想象成散列表：无非就是一组名值对，其中的值可以是数据或函数。

每个对象都是基于一个引用类型创建的，即创建自定义对象的最简单方式就是创建一个 Object 的实例，然后再为它添加属性和方法

合并对象

它 是值 把源对象所有属性 复制到目标对象属性当中。

在 ES6 中提供了 Object.assign() 来合并对象。

这个方法接受一个目标对象和一个或多个源对象作为参数，然后将源对象的所有属性和自有属性 复制到目标对象当中。

合并对象除了使用 Object.assign， 还可以使用 ... 对象扩展符 来简化合并对象

s

注意：

• Object.assign() 是浅复制，如果多个源对象之间合并出现，重复属性时，会取最后一个属性的值。

// ...
var a = {    title:'初级前端工程师'}
var b = {    address: '北京中关村'}
var c = { ...a, ...b}console.log(c) // { title: '初级前端工程师', address: '北京中关村' }




//Object.assign()var job = {    title:'高级前端工程师'}
var salary = {    wage: '22w'}
var HaiJun = {}
console.log(Object.assign(HaiJun,a,job,salary)) //{ title: '高级前端工程师', wage: '22w' }

对象标识类型及相等判断

在 ES6 中提供 了 Object.is() 方法，它接受两个参数。

console.log(Object.is(1,"1")) //false
console.log(Object.is({},{})) //false
console.log(Object.is(+0, 0))   //true
var objA = {    id:2}
var objB = {    id:2}
console.log(Object.is(objA.id,objB.id)) //true

对象的属性

ECMA-262第 5 版在定义了只有内部才用的特性时，描述了属性的各种特征，这些特征是为了实现 JavaScript 引擎用的，因此在 JavaScript 中不能直接访问它们。

在 JavaScript 中，对象的属性类型 为： 数据属性 和 访问器属性.

数据属性

定义: 数据属性包含一个数据值的位置，这个位置可以读取和写入值，可通过对象直接定义的属性。数据属性有四个描述其行为的特性。

它有 4 个特定行为来 约束属性行为。

按时

注意：

• 在调用 Object.defineProperty() 时， 如果不指定 属性的默认行为的话，它的 3 个行为 都 为 false .

实际开发中，修改属性默认行为场景很少，但学习属性的行为 有助于 理解对象。

如何修改对象属性默认行为

通过 Object.defineProperty() 来修改属性默认行为

参数为:

• 目标对象

• 要修改的对象属性

• 一个描述符对象 (这个对象是用来管理属性默认行为的)

该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

let obj = {    code: 200,    title: '前端自学社区',}
Object.defineProperty(obj,"code",{    writable: false  //禁止修改对象属性 code})
obj.code = 201

console.log(obj)  // 返回{ code: 200, title: '前端自学社区' }

访问器属性

它 包含 一个 setter 函数 和 getter 函数，用来返回属性值和修改属性的值.

当属性被修改时，获取调用 setter 函数。

当属性要获取值时，会调用 getter 函数。

实际开发中，这个两个属性不是必须的，看自己业务需求

如果一个属性的值变化，影响到另一个属性的值的时候，就可以使用 settter getter 来实现。

let obj = {    code: 200,    title: '前端自学社区',}
Object.defineProperty(obj,"mounth",{    set(newValue){        if(newValue >3) {            this.code = 400        }    },    get(){        return this.code    }})obj.mounth = 4console.log(obj)  //{ code: 400, title: '前端自学社区' }

读取属性的行为

要读取属性的特性，必须使用ECMAScript5的： Object.getOwnPropertyDescriptor() 来获取对象属性的行为。

该函数接受两个参数：

• 目标对象

• 要获取的属性

该方法返回指定对象上一个自有属性对应的属性描述符。

let obj = {    code: 200,    title: '前端自学社区',}
const des = Object.getOwnPropertyDescriptor(obj,'code')console.log(des) //{ value: 200, writable: true, enumerable: true, configurable: true }console.log(des.writable) //true

结语

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章