资讯专栏INFORMATION COLUMN

Object api

andong777 / 1612人阅读

摘要:不可与同时使用,会由属性的写入触发。权限仅可对为的属性进行赋值。作用完全锁死,不能做任何修改。需要注意的是,上述三个都是对原有对象的操作,并不会返回一个新的对象。可以说这些属性描述符是针对对象的属性做出的限制或者保护。

前言

昨天谈到了这些问题,发现认识比较片面。决定仔细看看并总结一下。
研究Object的部分ES5 API。可能会提到部分ES6内容。

Object

Object MDN API

属性描述符

即描述对象属性特性的描述符

四个特性描述符

value

writable 只读性

enumerable 可枚举性

configurable 可配置性(属性的删除与重新配置)

value默认为undefined
在使用Object.create()Object.definePropertywritableenumerableconfigurable默认均为false

两个访问器

get 不可与value同时使用,会由属性的读取触发。

set 不可与writable同时使用,会由属性的写入触发。

将会在其他的api中介绍属性描述符的用法

对象的创建与属性修改 Object.create()

Object.create(proto, [ propertiesObject ])
此api的作用是以proto为原型,以propertiesObject自有属性(不包含propertiesObject的原型上的属性,包含所有不可枚举属性)为属性创建一个新的对象。

// 非严格模式下运行,严格模式下会抛出异常
const proto = {
  saySize () {
    console.log(this.size)
  }
}
const propertiesObject = {
  size: {
    enumerable: false,
    configurable: false,
    value: "large"
  },
  color: {
    writable: true,
    enumerable: true,
    configurable: true,
    value: "red"
 }
}
let newObj = Object.create(proto, propertiesObject)

// 原型
newObj.saySize()
// "large"

// writable
newObj.size = "small"
newObj.color = "green"
console.log(newObj.size, newObj.color)
// "large,green"

// enumerbale
for(key in newObj){
  console.log(key)
}
// "color"
// "saySize"
delete newObj.size
// false
delete newObj.color
// true

上述代码中的proto使用Fun.prototype即可实现原型链的继承。

那么要怎样才能枚举出enumerable:false的属性呢?

Object.defineProperty()

Object.defineProperty(obj, prop, descriptor)
此api允许修改或向obj添加属性
obj为目标对象,prop为要修改或添加的属性,descriptor为属性描述符

let tempObj1 = {}
Object.defineProperty(tempObj, "name", {
  value: "temp",
  writable: false,
  enumerable: true,
  configurable: false
})
console.log(tempObj)
// Object {name: "temp"}

// 抛出异常
Object.defineProperty(tempObj, "name", {
  value: temp,
  writable: true
})

对于configurable: false的属性禁止修改属性描述符,会抛出异常。

let tempObj2 = {_name: "temp2"}
Object.defineProperty(tempObj2, "name", {
  get () {
    return `名字为${this._name}`
  },
  set (value) {
    console.log(`新名字为${value}`)
  }
})
console.log(tempObj2.name)
// "名字为temp2"
tempObj2.name = "temp2.0"
// "新名字为temp2.0"

可以观察到 读属性值与 写属性值分别触发了getset属性访问器。
代码中所用到的"`名字为${this._name}`" 为es6模板字符串,实现拼串

Object.defineProperties()

Object.defineProperties(obj, props)
此api方便了属性的批量修改,第二个参数与Object.create()的第二个参数结构相同。

let tempObj3 = {name:"temp"}
Object.defineProperties(tempObj3, {
  name: {
    value: "newTemp",
    writable: true
  },
  color: {
    value: "red",
    writable: true,
    enumerable: true
  }
})
console.log(tempObj3)
// Object {name: "newTemp", color: "red"}
对象属性的检测与检索

我们也看到了对于enumerable:false的属性是不可枚举的。甚至ES6中还有“隐蔽性”更高的Symbol()可以作为属性键。那么怎么才能正确的检测与获取对象的属性呢?

我们先创建一个对象用于实验后续的所有方法。
原型和自身都各包含三种属性:enumerable: false,enumerable: true,Symbol()

const proto = Object.create(null, {
  supTrue: {
    value: "value1",
  enumerable: true
},
supFalse: {
  value: "value2",
    enumerable: false
  }
})
proto[Symbol("supSymbol")] = "supSymbol"
console.log(proto)
// {
//  supTrue: "value",
//  Symbol(supSymbol): "supSymbol",
//  supFalse: "value2"
// }
let obj = Object.create(proto, {
  ownTrue: {
    value: "value1",
    enumerable: true
},
ownFalse: {
    value: "value2",
    enumerable: false
  }
})
obj[Symbol("ownSymbol")] = "ownSymbol"
// ok,obj可用
for-in
for (const key in obj) {
    console.log(key)
}
// subTrue, ownTrue

可以看到for in枚举了包括原型链在内的所有可枚举属性

Object.keys()
Object.keys(obj)
// ["ownTrue"]

可以看到返回了一个只包含自身可枚举属性键的数组。

Object.getOwnPropertyNames()
Object.getOwnPropertyNames(obj)
// ["ownTrue", "ownFalse"]

可以看到返回了一个包含自身所有非symbol的属性键的数组。
由此也可以看到symbol类型的属性的“隐蔽性”

Object.getOwnPropertySymbols()

针对 获取symbol可使用此方法。

Reflect.ownKeys()

虽然这个不是Object的方法
但是可以用来获取自身所有属性键

Reflect.ownKeys(obj)
// ["ownTrue", "ownFalse", Symbol(ownSymbol)]
把对象关起来

按照权限从大到小排列

Object.preventExtensions()

作用:将对象变的不可扩展,不可添加新的属性。

Object.seal()

作用:将对象“密封”,不可添加新属性,属性的configurable置为falsewritabletrue的属性仍然可以被重新赋值。
权限:仅可对writabletrue的属性进行赋值。

Object.freeze()

作用:完全“锁死”,不能做任何修改。
权限:0。

需要注意的是,上述三个api都是对原有对象的操作,并不会返回一个新的对象。

let obj = {}
Object.preventExtensions(obj) === obj // true
Object.seal(obj) === obj // true
Object.freeze(obj) === obj // true

可以说writable,configurable这些属性描述符是针对对象的属性做出的限制或者保护。
那么Object.seal(),Object.preventExtensions(),Object.freeze()就是对对象本身做出限制或者保护。
同时我们也知道在ES6中使用const可以声明一个"常量",但是要注意的是const确保的只是指针的不可更改。比如:

const obj = {key: "value1"}
obj.key = "value2" // 可完成
obj = {key2: "value2"} // 更改指针,抛出异常

针对对象,此时就可以使用上述三个把对象关起来的api。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83638.html

相关文章

  • 使用机器学习预测天气(第一部分)

    摘要:概述本章是使用机器学习预测天气系列教程的第一部分,使用和机器学习来构建模型,根据从收集的数据来预测天气温度。数据类型是机器学习领域经常会用到的数据结构。 概述   本章是使用机器学习预测天气系列教程的第一部分,使用Python和机器学习来构建模型,根据从Weather Underground收集的数据来预测天气温度。该教程将由三个不同的部分组成,涵盖的主题是: 数据收集和处理(本文)...

    liukai90 评论0 收藏0
  • JavaScript 对象所有API解析

    摘要:创建对象的两种方式推荐该构造器可以接受任何类型的参数,并且会自动识别参数的类型,并选择更合适的构造器来完成相关操作。比如二的成员该属性指向用来构造该函数对象的构造器,在这里为该方法返回的是一个用于描述目标对象的字符串。 之前看到【深度长文】JavaScript数组所有API全解密和JavaScript字符串所有API全解密这两篇高质量的文章。发现没写对象API解析(估计是博主觉得简单,...

    SmallBoyO 评论0 收藏0
  • 360°产品展示

    摘要:是一款可以对产品图片进行度全方位旋转展示的插件。动画帧通过切换的速度,默认值为毫秒。动画帧改编之后的回调函数以当前帧和总帧数为参数。返回对象的总的动画帧数。显示对象的元素节点。 Circlr是一款可以对产品图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade...

    liukai90 评论0 收藏0

发表评论

0条评论

andong777

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<