屬性描述符Object.defineProperty()詳解

時間 2019-11-12

標籤屬性描述 object.defineproperty object defineproperty 詳解简体版

原文原文鏈接

Object.defineProperty(obj, prop, descriptor)html

obj 須要定義屬性的對象。vue

prop 需被定義或修改的屬性名。函數

descriptor 需被定義或修改的屬性的描述符。測試

var o = {};this

o.a = 1; // 等同於 : Object.defineProperty(o, "a", { value : 1, writable : true, configurable : true, enumerable : true });code

// 另外一方面，htm

Object.defineProperty(o, "a", { value : 1 }); // 等同於 : Object.defineProperty(o, "a", { value : 1, writable : false, configurable : false, enumerable : false });對象

configurable: 僅當該屬性的 configurable 爲 true 時，該屬性纔可以被改變，也可以被刪除。默認爲 falseip

enumerable: 僅當該屬性的 enumerable 爲 true 時，該屬性纔可以出如今對象的枚舉屬性中。默認爲 falseget

value: 該屬性對應的值。能夠是任何有效的 JavaScript 值（數值，對象，函數等）。默認爲 undefined

writable: 僅當僅當該屬性的writable爲 true 時，該屬性才能被賦值運算符改變。默認爲 false

get: 一個給屬性提供 getter 的方法，若是沒有 getter 則爲 undefined。該方法返回值被用做屬性值。undefined

set: 一個給屬性提供 setter 的方法，若是沒有 setter 則爲 undefined。該方法將接受惟一參數，並將該參數的新值分配給該屬性。默認爲undefined。

特殊：1.當configurable爲false時，writable只能從true改成false。

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

get和set是咱們今天要重點討論的兩個方法，先看一下他們的簡單實例：

雖然我將a.b的值設置成了1，可是由於我在get方法中始終返回了2，因此a.b的值一直是2。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<script>
  var book={
    _year: 2004,
    edition:1
  };
  Object.defineProperty(book,"year",{
    get: function(){
      return this._year;
    },
    set : function(newValue){
      if (newValue > 2004){
        this._year = newValue;
        this.edition = newValue;
      }
    }
  });
  console.log(book.year)   //2004
  book.year =2005;
  console.log(book.year)   //2005
  console.log(book);   //{_year: 2005, edition: 2005}
</script>
</body>
</html>

那麼，這就好玩兒了：咱們能夠在頁面監聽某個變量，當變量發生變化的時候，咱們就更新對應的視圖。由數據來驅動視圖的更新，是否是很熟悉？是的，vue .js的核心思想就是這個。咱們寫個小例子：

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>test</title> 
 </head> 
 <body> 
 <div id="test">這是一個測試</div> 
 <script> 
 var view = document.getElementById("test"); 
 var data = {}; 
 var i=0; 
 Object.defineProperty(data, "b", { 
 set: function(newValue) { 
 //當data.b的值改變的時候更新＃test的視圖 
 view.textContent=newValue; 
 }, 
 get: function() { 
 } 
 }); 
 setInterval(function(){ 
 i++; 
 data["b"] = "data.b的值更新了，我要更新視圖"+i; 
 },1000); 
 </script> 
 </body> 
</html>

視圖的變化過程：

最開始的視圖

1秒後的視圖

相關標籤/搜索

描述

object.defineproperty

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。