成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Object.defineProperty()

ACb0y / 3218人閱讀

摘要：簡介源碼地址對象，屬性，屬性描述符用于在一個對象上定義一個新的屬性，或者修改一個對象現(xiàn)有的屬性，并返回這個對象。

簡介

源碼地址

Object.defineProperty(對象，屬性，屬性描述符) 用于在一個對象上定義一個新的屬性，或者修改一個對象現(xiàn)有的屬性，并返回這個對象。

demo01 - 屬性描述符默認值
屬性 默認值 說明
configurable false 描述屬性是否可以被刪除，默認為 false
enumerable false 描述屬性是否可以被for...in或Object.keys枚舉，默認為 false
writable false 描述屬性是否可以修改，默認為 false
get undefined 當訪問屬性時觸發(fā)該方法，默認為undefined
set undefined 當屬性被修改時觸發(fā)該方法，默認為undefined
value undefined 屬性值，默認為undefined 
// demo01-default.html

// Object.defineProperty(對象，屬性，屬性描述符)
  var obj = {};
  console.log("obj:", obj);
  // 默認不可刪除，不可枚舉，不可修改
  Object.defineProperty(obj, "name", {
    value: "Jameswain"
  });
  console.log("obj默認值:", obj);
  delete obj.name;
  console.log("obj刪除后:", obj);
  console.log("obj枚舉:", Object.keys(obj));
  obj.name = "詹姆斯，韋恩";
  console.log("obj修改后:", obj);
  // 不能重新定義，會報重復定義錯誤: Uncaught TypeError: Cannot redefine property: name
  Object.defineProperty(obj, "name", {
    value: "詹姆斯，韋恩"
  });

運行結(jié)果：

? 從運行結(jié)果可以發(fā)現(xiàn)，使用Object.defineProperty()定義的屬性，默認是不可以被修改，不可以被枚舉，不可以被刪除的?？梢耘c常規(guī)的方式定義屬性對比一下：如果不使用Object.defineProperty()定義的屬性，默認是可以修改、枚舉、刪除的：

 const obj = {};
 obj.name = "Jameswain";
 console.log("枚舉：", Object.keys(obj));
 obj.name = "詹姆斯-韋恩";
 console.log("修改：", obj);
 delete obj.name;
 console.log("刪除：", obj);

demo02 - 屬性描述符 
// JavaScript/Object.defineProperty/demo02-descriptor.html
  const o = {};
  Object.defineProperty(o, "name", {
    value: "Jameswain",   // name屬性值
    writable: true,       // 可以被修改
    enumerable: true,     // 可以被枚舉
    configurable: true,   // 可以被刪除
  });
  console.log(o);
  console.log("枚舉：", Object.keys(o));
  o.name = "詹姆斯-韋恩";
  console.log("修改：", o);
  Object.defineProperty(o, "name", {
    value: "Po"
  });
  console.log("修改：", o);
  delete o.name;
  console.log("刪除：", o);

運行結(jié)果：

??注意：如果writable為false，configurable為true時，通過o.name = "詹姆斯-韋恩"是無法修改成功的，但是使用Object.defineProperty()修改是可以成功的代碼如下：

 const o = {};
  Object.defineProperty(o, "name", {
    value: "Jameswain",   // name屬性值
    writable: false       // 不可被修改
    enumerable: true,     // 可以被枚舉
    configurable: true,   // 可以被刪除
  });
  console.log(o);
  console.log("枚舉：", Object.keys(o));
  o.name = "詹姆斯-韋恩";
  console.log("修改：", o);
  Object.defineProperty(o, "name", {
    value: "Po"
  });
  console.log("修改：", o);
  delete o.name;
  console.log("刪除：", o);

??注意：如果writable和configurable都為false時，如果使用Object.defineProperty()修改屬性值會報錯：Cannot redefine property: name

const o = {};
  Object.defineProperty(o, "name", {
    value: "Jameswain",   // name屬性值
    writable: false,       // 不可被修改
    enumerable: true,     // 可以被枚舉
    configurable: false,   // 不可被刪除
  });
  console.log(o);
  console.log("枚舉：", Object.keys(o));
  o.name = "詹姆斯-韋恩";
  console.log("修改：", o);
  Object.defineProperty(o, "name", {
    value: "Po"
  });
  console.log("修改：", o);
  delete o.name;
  console.log("刪除：", o);

demo03 - enumerable 
// JavaScript/Object.defineProperty/demo03-enumerable.html
const o = {};
Object.defineProperty(o, "name", { value: "Jameswain", enumerable: true });
Object.defineProperty(o, "trim", { value: (str) => { return str.trim() }, enumerable: false });
Object.defineProperty(o, "email", { value: "[email protected]" });
o.skill = "node.js";
console.log("枚舉：", Object.keys(o));
console.log("trim: ", o.trim("      8888       ") + "1")
console.log(`o.propertyIsEnumerable("name"): `, o.propertyIsEnumerable("name"));
console.log(`o.propertyIsEnumerable("trim"): `, o.propertyIsEnumerable("trim"));
console.log(`o.propertyIsEnumerable("email"): `, o.propertyIsEnumerable("email"));

demo04 - set 和 get

??注意：設(shè)置set或者get，就不能在設(shè)置value和wriable，否則會報錯

 const o = {
    __name: ""
  };
  Object.defineProperty(o, "name", {
    enumerable: true,
    configurable: true,
    // writable: true,    // 如果設(shè)置了get或者set，writable和value屬性必須注釋掉
    // value: "",         // writable和value無法與set和get共存
    get: function () {    // 如果設(shè)置了get 或者 set 就不能設(shè)置writable和value
      console.log("get", this);
      return "My name is " + this.__name;
    },
    set: function (newVal) {
      localStorage.setItem("name", newVal);
      console.log("set", newVal);
      this.__name = newVal;
    }
  });
  console.log(o);
  o.name = "Jameswain";
  o.name;
  console.log(o);
  o.name = "詹姆斯-韋恩";
  console.log(o);

demo05 - set 和 get 數(shù)據(jù)驅(qū)動視圖

? 我們可以利用set和get實現(xiàn)數(shù)據(jù)驅(qū)動視圖變化功能，主要通過監(jiān)聽屬性，屬性變化時更新視圖，獲取數(shù)據(jù)從視圖中獲取：




  
  set & get 數(shù)據(jù)驅(qū)動視圖

運行結(jié)果：

? 從運行結(jié)果中，我們可以發(fā)現(xiàn)profile.skills屬性是一個數(shù)組，如果直接更新整個數(shù)組內(nèi)容是可以驅(qū)動視圖變化的，但是如果更新數(shù)組對象中的某個元素是不會觸發(fā)set函數(shù)的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104619.html

相關(guān)文章

  • 詳解JavaScript之神奇的Object.defineProperty

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

    baishancloud 評論0 收藏0

  • JS屬性特性（屬性描述符）

    摘要：概念中定義了一個名叫屬性描述符的對象，用于描述了的各種特征。只指定則表示屬性為只讀屬性。使用屬性描述符對象只能在或中使用。修改已有的屬性會拋出類型錯誤異常添加屬性會拋出類型錯誤異常不能修屬性結(jié)語我對屬性描述符很不熟悉，主要是因為平時用得少。 概念 ECMAScript 5 中定義了一個名叫屬性描述符的對象，用于描述了的各種特征。屬性描述符對象有4個屬性： configurable：可...

    yeyan1996 評論0 收藏0

  • JavaScript深入理解對象方法——Object.defineProperty()

    摘要：返回值被傳遞給函數(shù)的對象。描述該方法允許精確添加或修改對象的屬性。描述符必須是兩種形式之一不能同時是兩者。可以是任何有效的值數(shù)值，對象，函數(shù)等。該方法返回值被用作屬性值。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。 Object.defineProperties() Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性...

    woshicixide 評論0 收藏0

  • JS進階篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用

    摘要：的使用對象是由多個名值對組成的無序的集合。目標屬性所擁有的特性返回值傳入函數(shù)的對象。是一種獲得屬性值的方法是一種設(shè)置屬性值的方法。參考相關(guān)閱讀鏈接基礎(chǔ)篇中的可枚舉屬性與不可枚舉屬性以及擴展 Math.max 實現(xiàn)得到數(shù)組中最大的一項 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(m...

    jasperyang 評論0 收藏0

  • 理解Object.defineProperty的作用

    摘要：對象是由多個名值對組成的無序的集合。對象中每個屬性對應(yīng)任意類型的值。目標屬性所擁有的特性返回值傳入函數(shù)的對象。給對象的屬性添加特性描述，目前提供兩種形式數(shù)據(jù)描述和存取器描述。兼容性在下只能在對象上使用，嘗試在原生的對象使用會報錯。 對象是由多個名/值對組成的無序的集合。對象中每個屬性對應(yīng)任意類型的值。定義對象可以使用構(gòu)造函數(shù)或字面量的形式： var obj = new Object; ...

    yexiaobai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<