摘要:可以是任何有效的值數值,對象,函數等。當且僅當該屬性的為時,才能被賦值運算符改變。存取描述符其余屬性一個給屬性提供的方法,如果沒有則為。當屬性值修改時,觸發執行該方法。該方法將接受唯一參數,即該屬性新的參數值。
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, #
如果一個描述符不具有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 } })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104015.html
摘要:當我們的視圖和數據任何一方發生變化的時候,我們希望能夠通知對方也更新,這就是所謂的數據雙向綁定。返回值返回傳入函數的對象,即第一個參數該方法重點是描述,對象里目前存在的屬性描述符有兩種主要形式數據描述符和存取描述符。 前言 談起當前前端最熱門的 js 框架,必少不了 Vue、React、Angular,對于大多數人來說,我們更多的是在使用框架,對于框架解決痛點背后使用的基本原理往往關注...
摘要:前言最近在學習框架的基本原理,看了一些技術博客以及一些對源碼的簡單實現,對數據代理數據劫持模板解析變異數組方法雙向綁定有了更深的理解。 前言 最近在學習vue框架的基本原理,看了一些技術博客以及一些對vue源碼的簡單實現,對數據代理、數據劫持、模板解析、變異數組方法、雙向綁定有了更深的理解。于是乎,嘗試著去實踐自己學到的知識,用vue的一些基本原理實現一個簡單的todo-list,完成...
摘要:當東西發售時,就會打你的電話通知你,讓你來領取完成更新。其中涉及的幾個步驟,按上面的例子來轉化一下你買東西,就是你要使用數據你把電話給老板,電話就是你的,用于通知老板記下電話在電話本,就是把保存在中。剩下的步驟屬于依賴更新 寫文章不容易,點個贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于 Vue版本 【...
摘要:下面我們會向大家解釋清楚為什么這個這么重要,以及它和的響應式數據流有什么關系。源碼前面鋪墊這么多就是希望大家能理解接下來要講的響應式數據流。總結講到這里大家應該都能夠明白的響應式數據流是如何實現的。 Vue、React介紹 目前前端社區比較推崇的框架有Vue 和 React,公司內部許多端都自發的將原有的老技術方案(widget + jQuery)遷移到 Vue / React上了。我...
閱讀 739·2021-11-23 09:51
閱讀 2438·2021-10-11 11:10
閱讀 1309·2021-09-23 11:21
閱讀 1095·2021-09-10 10:50
閱讀 889·2019-08-30 15:54
閱讀 3329·2019-08-30 15:53
閱讀 3292·2019-08-30 15:53
閱讀 3189·2019-08-29 17:23