javascript ES5中新增的对象方法

193 阅读3分钟

Object.defineProperty() 定义对象中新属性或修改原有属性。

Object.defineProperty(obj, prop, descriptor)
  • obj: 必需。目标对象。
  • prop: 必需。需要定义或修改的属性的名字。
  • descriptor: 必需。目标属性所拥有的特性。

descriptor 参数以一个对象 {} 的形式来书写。

  • value: 设置属性的值 默认为 undefinde 。
  • writable: 值是否可以重写。 true|false 默认为 false 。
  • enumerable: 目标属性是否可以被枚举。 true|false 默认为 false 。
  • configurable: 目标属性是否可以被删除或是否可以再次修改特性 true|false 默认为 fasle 。

例子:

// Object.defineProperty() 定义新属性或修改原有属性
let obj = {
    id: 1,
    pName: '小米',
    price: 1999
}

Object.defineProperty(obj, 'num', {
    value:1000,
})

console.log(obj)

Object.defineProperty 中的第三个对象表单可使用 writable 参数可用于设置成员属性是否可以被修改,默认是 false 。

比如我们有不想被修改的成员属性,例如 id ,我们就可以利用

// Object.defineProperty() 定义新属性或修改原有属性
let obj = {
    id: 1,
    pName: '小米',
    price: 1999
}

Object.defineProperty(obj, 'num', {
    value:1000,
})
Object.defineProperty(obj, 'id', {
    writable: false //设置 id 成员属性禁止被重写
})
//这里我们尝试修改(重写) id 的值。
obj.id = 12;
console.log(obj)

打印结果:

Object.defineProperty 中的第三个对象表单可使用 enumerable 参数可用于设置成员属性是否可以被修改,默认是 false 。

禁止被枚举简单理解为禁止被遍历

例子:

let obj = {
    id: 1,
    pName: '小米',
    price: 1999
}

Object.defineProperty(obj, 'num', {
    value:1000,
   	enumerable: true //设置 num 成员属性允许被枚举
})
Object.defineProperty(obj, 'id', {
    enumerable: false //设置 id 成员属性不被枚举
})
//for..in 可以枚举(遍历)成员属性
for (const objKey in obj) {
    console.log(obj[objKey])
}

打印结果:

例子2: Object.keys(obj)方法可以枚举对象属性。

let obj = {
    id: 1,
    pName: '小米',
    price: 1999
}

Object.defineProperty(obj, 'num', {
    value:1000,
    enumerable: true //设置 num 成员属性允许被枚举
})
Object.defineProperty(obj, 'id', {
    enumerable: false //设置 id 成员属性不被枚举
})
let objProperty = Object.keys(obj)
console.log(objProperty)

打印结果:

Object.defineProperty 中的第三个对象表单可使用 configurable 参数可用于设置成员属性是否可以被删除,是否可以被修改特性,默认是 false 。

let obj = {
    id: 1,
    pName: '小米',
    price: 1999
}
Object.defineProperty(obj, 'id', {
    configurable: false //设置 id 成员属性禁止被删除或者改写特性
})
//尝试删除没有被禁止的成员属性
delete obj.pName
console.log(obj)

//尝试删除成员属性
delete obj.id
console.log(obj)

打印结果:

注意:一但使用了 configurable 参数就无法再次修改它的特性,例如:

let obj = {
    id: 1,
    pName: '小米',
    price: 1999
}
Object.defineProperty(obj, 'id', {
    writable: false,
    enumerable: false,
    //当这里为 true 时可以二次修改属性的特性,如果 configurable 为 false 时会报错,无法修改
    configurable: true //设置 id 成员属性禁止被删除或者改写特性
    //configurable: false //设置 id 成员属性禁止被删除或者改写特性
})
//尝试重写
obj.id = 20
//尝试枚举
let newArr = Object.keys(obj)
console.log(obj)
console.log(newArr)
//尝试二次修改属性的特性
Object.defineProperty(obj, 'id', {
    value: 20,
    writable: true,
    enumerable: true,
    configurable: false //设置 id 成员属性禁止被删除或者改写特性
})
//二次修改特性之后尝试重写
obj.id = 30
//二次修改特性之后尝试枚举
let newArr2 = Object.keys(obj)
console.log("二次" , obj)
console.log("二次" , newArr2)

Object.keys() 方法的使用

用于获取对象自身的所有属性 语法

Object.keys(obj)
  • 效果类似 for..in 。

  • 返回一个有属性名组成的数组。 例子:

    let obj = { id: 1, pName: '小米', price: 1999 }

    const objProperty = Object.keys(obj) console.log(objProperty) 打印结果: