福州网站建设仅需1000元起包含域名空间,详情18558752805

  • object.defineProperty的理解

福州网站建设 >网站新闻 >微信小程序 >

来源:https://www.jianshu.com/p/5cad911a3630

javascript中,对象定义属性有多种方式:

var personObj = {}; personObj.name = "盖聂"; personObj["sex"] = "男"; 

除了通过“obj.propertyName”和"obj[propertyName]"定义,修改外,还可以通过ES5原生API "obj.defineProperty"来定义和修改对象属性。

 Object.defineProperty(personObj, "name", { value: "剑圣盖聂" }) 
image.png

Object.defineProperty()

语法

Object.defineProperty(obj, prop, descriptor)

参数说明

obj: 必须。要在其上定义或者修改属性的对象
prop: 必须。对象属性的名称
descriptor: 必须。目标属性拥有的特性

返回值

传入函数的对象。即第一个参数obj。

重点关注传入的第三个参数值的属性

descriptor参数值的类型是object对象,主要包括value,writable,enumberable,configurable等字段名。简单分析理解下这些字段的作用和用法。

value: 需要操作的属性值,默认值为undefined

image.png

writable: 属性值是否可重写,为true时表示可重写,反之表示不能重写,默认为false

值为false时:


image.png

值为true时:

image.png

enumberable: 属性是否可被枚举,为true时表示可被枚举,反之表示不能被枚举,默认为false

值为false时:

image.png

值为true时:

image.png

configurable: 是否可以删除目标属性或者是否可以重新修改属性的特性,为true时表示可以删除或者修改,false时相反,默认为false。

该参数具有两个作用
  • 目标属性是否可以使用delete删除
  • 目标属性是否可以再次设置特性

值为false时:

image.png

值为true时:

image.png

除了可以给新定义的属性设置特性,也可以给已有的属性设置特性。

image.png

存取器描述

当使用存取器描述属性的特性的时候,descriptor参数允许使用getter和setter方法,用于设置或获取对象的某个属性的值。当使用了getter或setter方法,不允许使用writable和value这两个属性。在特性中使用get/set属性来定义对应的方法。

var mockData = { name: "剑圣-卫庄", title: "渊虹" }; var personObj = {}; Object.defineProperty(personObj,"name", { get: function(){ //在获取该属性值得时候触发该函数 debugger; return mockData.name }, set: function(value){ //当设置该属性值的时候触发该函数,设置的新值通过参数value拿到 debugger; mockData.name = value; } }) 
image.png



作者:小兴nice
链接:https://www.jianshu.com/p/5cad911a3630
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
扫描二维码分享到微信
确 认

Copyright © 2014-2019  www.xl779.com福州网站制作 福州网站建设尽在福州E点互动 版权所有