Object defineProperty

• 一、簡(jiǎn)介
• • 1. 屬性表
  • 2.互斥性
  • 3. get、set的簡(jiǎn)單使用
• 二、深入
• • 1.定義常量
  • 2. Object.preventExtensions() 禁止對(duì)象拓展(不可逆)
  • 3. Object.seal() 密封(不可逆)
  • 4. Object.freeze() 凍結(jié)(不可逆)
• 三、應(yīng)用

一、簡(jiǎn)介

defineProperty可以詳細(xì)的配置一個(gè)對(duì)象的屬性的特性和值
賦值的兩種方式：

var time = {} // 第一種 time.kind1 = 1; // var test = {kind1:1} // 第二種 Object.defineProperty(time,"kind2",{value:2 }) // ================================分割線=================================== // 第一種等價(jià)于 Object.defineProperty(time,"kind1",{value:1,writable:true,enumerable:true,configurable:true,// get:undefined,// set:undefined }) // 第二種等價(jià)于 Object.defineProperty(time,"kind2",{value:2,writable:false,enumerable:false,configurable:false,// get:undefined,// set:undefined })

1. 屬性表

值說(shuō)明defineProperty后的默認(rèn)值=后的默認(rèn)值擁有g(shù)et、set后的默認(rèn)值

value	屬性的默認(rèn)值	undefined	undefined	get的return值（不能配置）
writable	value是否可被重寫，作用于等于號(hào)賦值和defineProperty賦值。configurable為false時(shí)，被設(shè)為false后就不能在被設(shè)為true	false	true	true（不能配置）
enumerable	是否可枚舉（被循環(huán)顯示）。configurable為false時(shí)，就不能再被更改	false（為false時(shí)谷歌控制臺(tái)顯示該屬性為淡紫色）	true	false
configurable	屬性的配置項(xiàng)是否可再此被定義，或被delete。configurable為false時(shí)，就不能再被更改	false	true	false
get	獲取屬性值時(shí)調(diào)用的方法	undefined	undefined	-
set	設(shè)置屬性值時(shí)調(diào)用的方法	undefined	undefined	-

2.互斥性

數(shù)據(jù)描述符：value、writable；存取描述符：get、set

value、writable 不能與get、set共存：
當(dāng)設(shè)置了value，就不需要再?gòu)膅et獲取值（該從value取值還是從get取值）；當(dāng)設(shè)置了writable為false時(shí)，set將沒(méi)有意義（不允許再修改）

---

get、set不能與value、writable共存：
當(dāng)設(shè)置了get、set，就不需要從value獲取、更改值（有了自定義的存取值方法）；當(dāng)設(shè)置set時(shí)，writable必須為true（必須允許修改）

3. get、set的簡(jiǎn)單使用

var time = {__date: new Date(),__lastEditTime: "",__lastReadTime: "",__remark: "",__copyright: " (GeniusXYT)",__getNow: function () {return new Date().toLocaleString();} }; Object.defineProperty(time, "createTime", {get() {return this.__date.toLocaleString();},set(val) {console.warn(`the obj property(now) do not be set ${val}.`);},enumerable: true }); // 同時(shí)定義多個(gè)屬性 Object.defineProperties(time, {lastReadTime: {get() {return this.__lastReadTime;},enumerable: true},lastEditTime: {get() {return this.__lastEditTime;},enumerable: true},remark: {get() {this.__lastReadTime = this.__getNow();return this.__remark ? this.__remark + this.__copyright : "";},set(val) {this.__lastEditTime = this.__getNow();this.__remark = val;},enumerable: true,configurable: true // 可重寫 enumerable、configurable、get和set} }); // 將帶有__命名的變量（默認(rèn)代表私有變量）隱藏（不可枚舉） (function hidePrivateVarible(obj) {for (let k of Object.keys(obj)) {if (k.slice(0, 2) === "__")Object.defineProperty(obj, k, { enumerable: false, configurable: false });} })(time);

二、深入

1.定義常量

定義后屬性值不能被更改（同const）

var time={}; // 方法一 Object.defineProperty(time,"author",{value:"GeniusXYT",writable:false,enumerable:true,configurable:false }) // 方法二 Object.defineProperty(time,"author2",{enumerable:true,configurable:false,get:function (){return "GeniusXYT"},set:function(val){console.error("the obj time do not set property 'author',value '"+val+"'.")} }) time.author="new name" console.log(time.author)

2. Object.preventExtensions() 禁止對(duì)象拓展(不可逆)

禁止一個(gè)對(duì)象添加新屬性并且保留已有屬性
這樣對(duì)象就不會(huì)再有新屬性

var time = {}; time.prop = "prop"; console.log(Object.isExtensible(time)); Object.preventExtensions(time); time.newProperty = "new"; console.log(time); // newProperty undefined console.log(Object.isExtensible(time));

3. Object.seal() 密封(不可逆)

在對(duì)象上調(diào)用object.preventExtensions(),并把所有現(xiàn)有屬性標(biāo)記為configurable:false
這樣對(duì)象就不會(huì)再有新屬性,無(wú)法再配置特性

var time = {}; Object.defineProperty(time,"prop",{value:"prop(i can configurable)",writable:true,enumerable:true,configurable:true, }); console.log(Object.isExtensible(time)); Object.seal(time); time.newProperty = "new"; console.log(time); // newProperty undefined console.log(Object.isExtensible(time)); Object.defineProperty(time,"prop",{writable:false}); // configurable為false時(shí)，可以將writable設(shè)為false； time.prop = "new prop"; console.log(time.prop); Object.defineProperty(time,"prop",{writable:true}); // 報(bào)錯(cuò) 設(shè)為false后將不能再設(shè)為true Object.defineProperty(time,"prop",{enumerable:false}); // 報(bào)錯(cuò) 此時(shí)configurable已經(jīng)被seal設(shè)置為false Object.defineProperty(time,"prop",{configurable:true}); // 報(bào)錯(cuò) configurable為false時(shí)，就不能再被更改

4. Object.freeze() 凍結(jié)(不可逆)

在一個(gè)對(duì)象上調(diào)用Object.seal(),并把所有現(xiàn)有屬性標(biāo)記為writable: false
這樣對(duì)象就不會(huì)再有新屬性,無(wú)法再配置特性,無(wú)法再設(shè)置值,對(duì)象就永遠(yuǎn)是那個(gè)對(duì)象了

var time = {}; Object.defineProperty(time,"prop",{value:"prop(i can configurable)",writable:true,enumerable:true,configurable:true, }); console.log(Object.isExtensible(time)); Object.freeze(time); time.newProperty = "new"; console.log(time); // newProperty undefined console.log(Object.isExtensible(time)); Object.defineProperty(time,"prop",{writable:true}); // 報(bào)錯(cuò) 設(shè)為false后將不能再設(shè)為true Object.defineProperty(time,"prop",{enumerable:false}); // 報(bào)錯(cuò) 此時(shí)configurable已經(jīng)被seal設(shè)置為false Object.defineProperty(time,"prop",{configurable:true}); // 報(bào)錯(cuò) configurable為false時(shí)，就不能再被更改 time.prop = "new prop"; // 無(wú)效 此時(shí)的writable: false console.log(time.prop);

三、應(yīng)用

vue雙向綁定……

總結(jié)

以上是生活随笔為你收集整理的Object defineProperty的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。