對象管理器（defineProperty）學習筆記

mist14 發布于2019-08-19 18:13 / 2631人閱讀

摘要：通過設置我們可以將一些屬性鎖定，來防止別人的修改，這是一種防御編程形式，就像語言的內置對象一樣不過的內置對象都可以被隨意更改。可以使用來判斷某一個屬性是否可以枚舉。

對象管理器（defineProperty）

在 JavaScript 里面聲明一個變量，通常我們有三種方式可以實現：

    let person = {} // 對象字面量
    let cat = new Object() // new 運算符
    let dog = Object.create(null) // create 函數

我們可以簡單的將 key 值和 value 值賦進去，但在 ES5 中 JavaScript 提供了一個對象管理器的方法給我們，讓我們可以很精細的對每一個屬性定制它們的行為，我們分別可以為屬性設置：

可配置特性（configurable）

可枚舉屬性（enumerable）

可以寫特性（writable）

值（value）

設置 getter 方法（get）

設置 setter 方法（set）

首先讓我們看看如何使用Object.defineProperty來定制屬性吧：

  let person = {}

  Object.defineProperty(person, "name", {
  configurable: true,
  enumerable: true,
  writeable: true,
  value: "_我已經從中二畢業了"
  })

  Object.defineProperty(person, "age", {
  configurable: true,
  enumerable: true,
  writeable: true,
  value: 18
  })

  console.log(person.name) // _我已經從中二畢業了
  console.log(person.age) // 18

通過上面的代碼可以看出 Object.defineProperty 這個函數能夠接受三個參數：

obj：需要定義屬性的對象

prop：需被定義或修改的屬性名

descriptor：需被定義或修改的屬性的描述符

語法：

Object.defineProperty(obj, prop, descriptor)

可配置特性（configurable）

當 configurable 這個屬性為 true 的時候表示這個屬性可以從父對象中刪除。當 configurable 設置為 false 的時候就會鎖定這個屬性，無法被修改。通過設置 configurable 我們可以將一些屬性鎖定，來防止別人的修改，這是一種防御編程形式，就像語言的內置對象一樣（不過 JavaScript 的內置對象都可以被隨意更改）。

  let person = {}

  Object.defineProperty(person, "name", {
  configurable: false,
  value: "_我已經從中二畢業了"
  })

  Object.defineProperty(person, "age", {
  configurable: true,
  value: 18
  })

  delete person.name
  console.log(person.name) // _我已經從中二畢業了

  delete person.age
  console.log(person.age) // undefined

  person.name = "John"
  console.log(person.name) // _我已經從中二畢業了

  person.age = 19
  console.log(person.age) // 19

可枚舉屬性（enumerable）

一般來說我們會通過for in操作來遍歷可以枚舉的屬性。當然我們也可以設置屬性為不可枚舉，這些屬性就不能夠被枚舉了，從而防止遍歷查找到這個屬性。可以使用 propertyIsEnumerable 來判斷某一個屬性是否可以枚舉。

  let person = {}

  Object.defineProperty(person, "name", {
    enumerable: true,
    value: "_我已經從中二畢業了"
  })

  Object.defineProperty(person, "age", {
    enumerable: false,
    value: 18
  })
    
  // 只輸出了 name    
  for (var key in person) {
    console.log(key)
  }

  console.log(Object.keys(person)) // ["name"]
  console.log(Object.getOwnPropertyNames(person)) // ["name", "age"]
  console.log(person.propertyIsEnumerable("name")) // true
  console.log(person.propertyIsEnumerable("age")) // false
  console.log(person.age) // 18

可以寫特性（writable）

當 writable 為 true 的時候，與屬性相關聯的值是可以更改的。否則，值就不能改變。

  let person = {}
  let person2 = person

  Object.defineProperty(person, "name", {
    writable: false,
    value: "_我已經從中二畢業了"
  })

  Object.defineProperty(person, "age", {
    writable: true,
    value: 18
  })

  person.name = "John"
  console.log(person.name) // _我已經從中二畢業了
  console.log(person2.name) // _我已經從中二畢業了

  person.age = 19
  console.log(person.age) // 19
  console.log(person.age) // 19

  person2.name = "John"
  console.log(person.name) // _我已經從中二畢業了
  console.log(person2.name) // _我已經從中二畢業了

  person2.age = 20
  console.log(person.age) // 20
  console.log(person.age) // 20

相關鏈接

Object.defineProperty()

Object.keys()

Object.getOwnPropertyNames()

Object.prototype.propertyIsEnumerable()

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

JS學習筆記（第6章）（面向對象的程序設計之理解對象）

摘要：其中，描述符對象的屬性必須是和。吧設置為，表示不能從對象中刪除屬性。這個方法接收兩個對象參數要添加和修改其屬性值的對象，第二個是與第一個對象中要添加和修改的屬性值一一對應。理解對象 1、創建自定義對象的兩種方法：（1）創建一個Object實例，然后再為它添加屬性和方法。 var person = new Object(); person.name = Nicholas; ...

FingerLiu 2019-08-26 13:33 評論0 收藏0
vue數據雙向綁定學習筆記。

摘要：訂閱者的實現如下將自己添加到訂閱器的操作緩存自己強行執行監聽器里的函數釋放自己到此為止，簡單版的設計完畢，這時候我們需要將和關聯起來，就可以實現一個簡單的雙向數據綁定了。同樣使用數據劫持。。什么是雙向綁定簡單說就是在數據和UI之間建立雙向的通信通道，當用戶通過Function改變了數據，那么這個改變也會立即反映到UI上；或者說用戶通過UI的操作也會隨之引起對應的數據變動。Vue是如...

huashiou 2019-08-23 16:25 評論0 收藏0
JavaScript Object.defineProperty()學習筆記。

摘要：數據屬性有個描述其行為的特性。表示能否通過刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。表示能否修改屬性的值。其中，描述符對象的屬性必須是和。返回值被傳遞給函數的對象。屬性類型 ECMAScript中有兩種屬性：數據屬性和訪問器屬性。數據屬性：數據屬性包含一個數據值的位置。在這個位置可以讀取和寫入值。數據屬性有4個描述其行為的特性。 [[Configu...

lushan 2019-08-23 16:13 評論0 收藏0
《你不知道的javascript》筆記_對象&原型

摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響年是向上的一年在新的城市穩定連續堅持健身三個月早睡早起游戲時間大大縮減，學會生活。上一篇：《你不知道的javascript》筆記_this 寫在前面這是2019年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響2018年是向上的一年：在新的城市穩定、...

seasonley 2019-08-23 14:32 評論0 收藏0
vue 雙向數據綁定的實現學習（一）

摘要：雙向數據綁定簡言之數據動頁面動，頁面動，數據動典型的應用就是在做表單時候，輸入框的內容改動后，跟該輸入框的的值改動。看官網上的這個的演示案例雙向數據綁定的好處要說出這個好處的時候，也只有在實際場景中才能對應的顯示出來。前言：本系列學習筆記從以下幾個點展開什么是雙向數據綁定雙向數據綁定的好處怎么實現雙向數據綁定實現雙向數據數據綁定需要哪些知識點數據劫持發布訂閱模式 ...

anonymoussf 2019-08-23 13:47 評論0 收藏0