国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Object.defineProperty()

ACb0y / 3180人閱讀

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

簡介

源碼地址

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

demo01 - 屬性描述符默認值
屬性 默認值 說明
configurable false 描述屬性是否可以被刪除，默認為 false
enumerable false 描述屬性是否可以被for...in或Object.keys枚舉，默認為 false
writable false 描述屬性是否可以修改，默認為 false
get undefined 當訪問屬性時觸發該方法，默認為undefined
set undefined 當屬性被修改時觸發該方法，默認為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: "詹姆斯，韋恩"
  });

運行結果：

? 從運行結果可以發現，使用Object.defineProperty()定義的屬性，默認是不可以被修改，不可以被枚舉，不可以被刪除的。可以與常規的方式定義屬性對比一下：如果不使用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);

運行結果：

??注意：如果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: "Jameswain@163.com" });
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

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

 const o = {
    __name: ""
  };
  Object.defineProperty(o, "name", {
    enumerable: true,
    configurable: true,
    // writable: true,    // 如果設置了get或者set，writable和value屬性必須注釋掉
    // value: "",         // writable和value無法與set和get共存
    get: function () {    // 如果設置了get 或者 set 就不能設置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 數據驅動視圖

? 我們可以利用set和get實現數據驅動視圖變化功能，主要通過監聽屬性，屬性變化時更新視圖，獲取數據從視圖中獲取：




  
  set & get 數據驅動視圖

運行結果：

? 從運行結果中，我們可以發現profile.skills屬性是一個數組，如果直接更新整個數組內容是可以驅動視圖變化的，但是如果更新數組對象中的某個元素是不會觸發set函數的。

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

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

相關文章

  • 詳解JavaScript之神奇的Object.defineProperty

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

    baishancloud 評論0 收藏0

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

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

    yeyan1996 評論0 收藏0

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

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

    woshicixide 評論0 收藏0

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

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

    jasperyang 評論0 收藏0

  • 理解Object.defineProperty的作用

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

    yexiaobai 評論0 收藏0

發表評論

0條評論

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