解析神奇的 Object.defineProperty

pinecone 發布于2019-08-19 17:27 / 2795人閱讀

摘要：是通過它實現雙向綁定的。。而且也被草案發起人撤回了。。傳入參數第一個參數目標對象第二個參數需要定義的屬性或方法的名字。第三個參數目標屬性所擁有的特性。打印沒有錯誤拋出在嚴格模式下會拋出，即使之前已經有相同的值打印，賦值不起作用。

這個方法了不起啊。。vue.js是通過它實現雙向綁定的。。而且Object.observe也被草案發起人撤回了。。所以defineProperty更有必要了解一下了。

幾行代碼看他怎么用

var a= {}
Object.defineProperty(a,"b",{
  value:123
})
console.log(a.b);//123

很簡單，它接受三個參數，而且都是必填的。。

傳入參數

第一個參數：目標對象

第二個參數：需要定義的屬性或方法的名字。

第三個參數：目標屬性所擁有的特性。（descriptor）

前兩個參數不多說了，一看代碼就懂，主要看第三個參數descriptor，看看有哪些取值

descriptor

他又以下取值，我們簡單認識一下，后面例子，挨個介紹。

value：屬性的值(不用多說了)

writable：如果為false，屬性的值就不能被重寫,只能為只讀了

configurable：總開關，一旦為false，就不能再設置他的（value，writable，configurable）

enumerable：是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。

get：一會細說

set：一會細說

descriptor 默認值

我們再看看第一個例子

var a= {}
Object.defineProperty(a,"b",{
  value:123
})
console.log(a.b);//123

我們只設置了 value，別的并沒有設置，但是第一次的時候 可以簡單的理解為（暫時這樣理解）它會默認幫我們把writable，configurable，enumerable。都設上值，而且值還都是false。。也就是說，上面代碼和下面是等價的的（僅限于第一次設置的時候）。

var a= {}
Object.defineProperty(a,"b",{
  value:123,
  writable:false,
  enumerable:false,
  configurable:false
})
console.log(a.b);//123

以上非常重要哦。。并且以上理解對set 和 get 不起作用哦

configurable

總開關，第一次設置 false 之后，，第二次什么設置也不行了，比如說

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Object.defineProperty(a,"b",{
  configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

就會報錯了。。

注意上面講的默認值。。。如果第一次不設置它會怎樣。。會幫你設置為false。。所以。。第二次。再設置他會怎樣？。。對嘍，，會報錯

writable

如果設置為fasle，就變成只讀了。。

var a = {}; 

Object.defineProperty(o, "b", { 
    value : 123,
    writable : false });

console.log(a.b); // 打印 37
a.b = 25; // 沒有錯誤拋出（在嚴格模式下會拋出，即使之前已經有相同的值）
console.log(o.a); // 打印 37， 賦值不起作用。

enumerable

屬性特性 enumerable 定義了對象的屬性是否可以在 for...in 循環和 Object.keys() 中被枚舉。

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

改為false

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:false //注意咯這里改了
})
console.log(Object.keys(a));// 打印[]

for...in 類似，不贅述了

set 和 get

在 descriptor 中不能同時設置訪問器（get 和 set）和 wriable 或 value，否則會錯，就是說想用 get 和 set，就不能用 writable 或 value 中的任何一個。

set 和 get，他倆干啥用的的。

var a= {}
Object.definePrope`請輸入代碼`rty(a,"b",{
  set:function(newValue){
    console.log("你要賦值給我,我的新值是"＋newValue)
    },
  get:function(){
    console.log("你取我的值")
    return 2 //注意這里，我硬編碼返回2
   }
})
a.b =1 //打印 你要賦值給我,我的新值是1
console.log(a.b)    //打印 你取我的值
                    //打印 2    注意這里，和我的硬編碼相同的

簡單來說，這個 “b” 賦值或者取值的時候會分別觸發 set 和 get 對應的函數。

這就是實現 observe的關鍵啊。

下一篇，我會分析vue的observe的實現源碼，聊聊自己如何一步一步實現$watch。

云服務器 GPU云服務器神奇的網站一個神奇的網站幻云我的世界神奇寶貝服務器我的世界神奇寶貝幻云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78530.html

詳解JavaScript之神奇的Object.defineProperty

摘要：與當與同時為時，屬性不能重新使用定義，嚴格模式下會報錯示例云麒報錯當或者為時，屬性可以重新使用定義，這一點讀者不妨自行測試。摘要： JavaScript有個很神奇的Object.defineProperty()，了解一下？ =與Object.defineProperty 為JavaScript對象新增或者修改屬性，有兩種不同方式：直接使用=賦值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 評論0 收藏0
vue 源碼分析之如何實現 observer 和 watcher

摘要：所以，我們是不是應該寫一個消息訂閱器呢這樣的話，一觸發方法，我們就發一個通知出來，然后，訂閱這個消息的，就會怎樣。。。截止到現在，在我們只考慮最簡單情況下。。關于的新文章行代碼，理解和分析的響應式架構本文能幫你做什么？。。好奇vue雙向綁定的同學，可以部分緩解好奇心還可以幫你了解如何實現$watch 前情回顧我之前寫了一篇沒什么干貨的文章。。并且刨了一個大坑。。今天。。打算來填一天...

shiina 2019-08-19 17:32 評論0 收藏0
js面向對象淺談（一）

摘要：引言對于面向對象，相信大家一定不陌生。創建對象面向對象第一步是什么答創建對象。構造函數優于工廠模式也是在于它可以通過辨識出一類的對象。引言對于面向對象，相信大家一定不陌生。最近看了一些關于es6面向對象的知識，正好通過這篇文章把關于面向對象的東西給串起來分享給大家。什么是對象很多人會鄙視我，說你這篇文章是騙騙剛入行的小朋友的吧，什么是對象我還能不知道？罵我的吃瓜群眾先冷靜一下，...

lastSeries 2019-08-20 16:34 評論0 收藏0
利用 JavaScript 數據綁定實現一個簡單的 MVVM 庫

摘要：和刷新函數是一對多的關系，即一個可以有任意多個處理它的回調函數刷新函數，比如和兩個指令共用一個數據模型字段。添加數據訂閱實現方式為建立緩存回調函數的數組緩存回調函數當數據模型的字段發生改變時，就會觸發緩存數組中訂閱了的所有回調。 MVVM 是 Web 前端一種非常流行的開發模式，利用 MVVM 可以使我們的代碼更專注于處理業務邏輯而不是去關心 DOM 操作。目前著名的 MVVM 框架有...

hzx 2019-08-19 18:00 評論0 收藏0
ReactElement源碼解析

摘要：在源碼添加的注釋在。解析的主要調用如下當然在下還有些其他的調用。此外，凍結一個對象后該對象的原型也不能被修改。方法封閉一個對象，阻止添加新屬性并將所有現有屬性標記為不可配置。前言 ReactElement并不像之前所談的PureComponent和Component那樣被頻繁的顯示使用，但我估計他應該是在react暴露出的api中被調用最為頻繁的，關于此看完后面便知。ReactEle...

mumumu 2019-08-23 16:52 評論0 收藏0