内容简介:学Vue最耳熟能详的词就是Object.defineproperty,这篇文章就介绍一下这个属性。Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。Object.defineProperty(obj, prop, descriptor)
学Vue最耳熟能详的词就是Object.defineproperty,这篇文章就介绍一下这个属性。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
语法
Object.defineProperty(obj, prop, descriptor)
参数
- obj :要在其上定义属性的对象
- prop :要定义或者要修改的属性
- descriptor :将被定义或修改的属性描述符
descriptor属性描述符
属性描述符又可分为数据描述符和存取描述符,可以用getOwnPropertyDescriptors或者getOwnPropertyDescriptor获取到属性描述
数据描述符和存取描述符共有的属性包括:
-
configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除,如果为false,则不能删除或修改writable, configurable, enumerable。默认为 true。
var animal = { name: 'cat' } console.log(Object.getOwnPropertyDescriptors(animal)) //name: {value: "cat", writable: true, enumerable: true, configurable: true} console.log(animal.name) //cat delete animal.name console.log(animal.name) //undefined Object.defineProperty(animal, 'name', { value: 'dog', configurable: false }) console.log(Object.getOwnPropertyDescriptors(animal)) //name: {value: "dog", writable: false, enumerable: false, configurable: false} console.log(animal.name) //dog delete animal.name console.log(animal.name) //dog
可以看到,configurable默认属性是true,设置为false之后,delete对象的属性将失效
需要注意的是,如果不是通过defineproperty定义的属性,描述符默认值都是true;通过defineproperty定义的属性,描述符默认是false
-
enumerable
当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中(for...in, Object.keys())。默认为 true。
let animal = { name: 'cat' } for (let i in animal) { console.log(animal[i]) //cat } Object.defineProperty(animal, 'name', { enumerable: false }) for (let i in animal) { console.log(animal[i]) //无输出 }
数据描述符其余属性:
-
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
-
writable
当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 true。
存取描述符其余属性:
-
get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
let animal = {} let name = 'cat' Object.defineProperty(animal, 'name', { value: 'cat', get: function () { return name } }) //报错:Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object> let animal = {} let name = 'cat' Object.defineProperty(animal, 'name', { get: function () { return name } }) console.log(animal.name) //cat
如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字,将会产生一个异常。
-
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
let animal = {} let name = 'cat' Object.defineProperty(animal, 'name', { get: function () { return name }, set: function (val) { name = val } })
如果访问者的属性是被继承的,它的 get 和set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值,该值会被所有对象共享。
可以借助中间值来解决
let animal = {} let name = 'cat' Object.defineProperty(animal, 'name', { get: function () { return this.stored_x }, set: function (val) { this.stored_x = val } })
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Namo Webeditor5.5一看就懂.
吳聲毅 / 金禾資訊 / 20040214 / NT$ 169
一看就懂系列書全以初學者的角度切入,全書以STEP BY STEP方式撰寫,並以豐富的圖片搭配教學,在最後更加上日常生活實例運用講解,一路學來一氣呵成。為了增進學習的效率更採用高級紙品全彩印刷,這麼好的書,您還在等什麼,一看就懂系列書保證是您最佳入門學習好伙伴。 本書特色: 1、一看就懂:Step by Step操作詳盡說明、讓您一看就懂 2、精選範例:精彩實務範例生動活......一起来看看 《Namo Webeditor5.5一看就懂.》 这本书的介绍吧!