js中Object.defineProperty()和defineProperties()

来源:https://www.cnblogs.com/lc-ant/archive/2018/05/11/9025430.html
-Advertisement-
Play Games

在介紹js中Object.defineProperty()和defineProperties()之前,我們瞭解下js中對象兩種屬性的類型:數據屬性和訪問器屬性。 數據屬性 數據屬性包含一個數據的位置,在這個位置可以讀取和寫入。其有4個描述其行為的特性 [[Configurable]] 表示能否通過d ...


在介紹js中Object.defineProperty()和defineProperties()之前,我們瞭解下js中對象兩種屬性的類型:數據屬性和訪問器屬性。

數據屬性

數據屬性包含一個數據的位置,在這個位置可以讀取和寫入。其有4個描述其行為的特性

[[Configurable]]

表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,能否把屬性修改為訪問器屬性。通過對象字面量創建的屬性,預設為true

[[Enumerable]]

表示能否通過for-in迴圈訪問屬性。(或通過Object.keys()獲取)。預設為true

[[Writable]]

表示能否修改屬性值。預設為true.

[[Value]]

包含這個屬性的數據值。屬性值的讀寫都在這個位置。預設為undefined

訪問器屬性

訪問器屬性不包含數據值,它們包含一對getter和setter函數(非必須),getter負責讀取屬性時調用並返回有效值;setter是寫入屬性時調用並負責如何處理該數據。其也有4個特性

[[Configurable]]

表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,能否把屬性修改為數據屬性。預設為true

[[Enumerable]]

表示能否通過for-in迴圈返回屬性。預設為true

[[Get]]

在讀取屬性時調用的函數。預設為undefined

[[Set]]

在寫入屬性時調用的函數。預設為undefined 訪問器屬性不能直接定義,必須使用Object.defineProperty();

 

屬性的定義:在js中,給一個對象添加方法很簡單,如
var obj = {};
obj.name = 'lc';
obj.weight = 180;
  但,這裡我們介紹另外一種兩種方式:

Object.defineProperty()

功能:方法會在對象上定義一個新屬性,或者修改一個對象的現有屬性,比返回這個對象。如果不指定configurable、enumerable、writable,則預設值為false;不指定value、get、set,則預設為undefined
語法:Object.defineProperty(obj,prop,descriptor)
obj:需要修改的對象。 prop:目標對象需要定義或修改的屬性名稱 descriptor:將被定義或修改的屬性描述符
var book = {
  // _price: 20
};
//添加name屬性
Object.defineProperty(book, 'name', {
  value: 'bkk',
  enumerable: true,
  configurable: false,
  writable: true
});
console.log(book.name)  //bkk

  

Object.defineProperties()

功能:方法將直接在對象上定義一個或多個新的屬性或修改現有屬性,並返回該對象
語法:Object.defineProperties(obj,props)
obj:將要被添加屬性或修改屬性的對象 props:該對象的一個或多個鍵值對定義了將要添加或修改的屬性的具體配置。
Object.defineProperties(book,{
  test:{},
  _year:{ 
    value:2004,
    writable: true, 
    enumerable:true
  },edition:{
    value:1,
    writable: true
  },year:{    //定義訪問器屬性
    get :function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue>2004){
        this._year = newValue;
        this.edition += newValue -2004;
      }
    }
  }
})

 

Object.getOwnPropertyDescriptor()

功能:獲取對象自身屬性的描述符
語法:Object.getOwnPropertyDescriptor(obj,prop);
obj:需要查找的目標對象 prop:需要查找的屬性名
var desc = Object.getOwnPropertyDescriptor(book,'name');
console.log(desc);
//{value: "bkk", writable: true, enumerable: true, configurable: false}

  

Object.getOwnPropertyDescriptors()

功能:獲取對象自身所有屬性的描述符
語法:Object.getOwnPropertyDescriptors(obj);
obj:需要查找的目標對象
var descs = Object.getOwnPropertyDescriptors(book);
console.log(descs);
{
    "name":{
        "value":"bkk",
        "writable":true,
        "enumerable":true,
        "configurable":false
    },
    "test":{
        "writable":false,
        "enumerable":false,
        "configurable":false
    },
    ...
    "year":{
        "enumerable":false,
        "configurable":false
    }
}

  

回到開定用對象字面量定義的對象 obj

var descs = Object.getOwnPropertyDescriptors(obj);
console.log(JSON.stringify(descs))
{
    "name":{
        "value":"lc",
        "writable":true,
        "enumerable":true,
        "configurable":true
    },
    "weight":{
        "value":180,
        "writable":true,
        "enumerable":true,
        "configurable":true
    }
}
可以看到writable、enumerable、configurable的預設值都是true.   -----------------------------------------------------------------------------------------------   在嚴格模式下,刪除一個configurable=false屬性,或給一個writable=false的屬性賦值,都會報錯。                                
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • var EventUtil={ //三個參數 第一個是element元素 第二個參數 type(事件類型 例如 click),第三個回掉函數 addEvent:function(element,type,fn){ //相容處理 if(element.addEventListener){ //IE8以 ...
  • 一.兩個日期大小比較 1.格式:(yyyy-mm-dd) function duibi(a, b,flag) { var arr = a.split("-"); var starttime = new Date(arr[0], arr[1], arr[2]); var starttimes = st ...
  • 用來確定字元串A是否包含字元串B,ES6有提供了三種新方法: 需要註意的是,這三個方法都接受第二個參數-一個數字n。前兩個均表示從第n個開始查詢,而,endsEith()是指針對前n個字元。 repeat() 將原字元串重覆n次。 字元串對象,一共有四個方法可以使用正則表達式:match()、rep ...
  • 將值從一種類型轉換為另一種類型通常稱為類型轉換,這是顯式的情況,隱式的情況稱為強制類型轉換。 JavaScript中的強制類型轉換總是返回標量基本類型值,如字元串、數字和布爾值,不會返回對象和函數。 類型轉換髮生在靜態類型語言的編譯階段,而強制類型轉換則發生在動態類型語言的運行時。 我們能夠從代碼中 ...
  • 講這個方法之前,我們應該先瞭解下插入節點時瀏覽器會做什麼。 在瀏覽器中,我們一旦把節點添加到document.body(或者其他節點)中,頁面就會更新並反映出這個變化,對於少量的更新,一條條迴圈插入也會運行很好,也是我們常用的方法。代碼如下: 但是,如果當我們要向document中添加大量數據時(比 ...
  • 相容IE是個坑,低版本IE很多都沒法跑起來 問題現象:vue-cli項目在IE下運行,會在鉤子函數出現 ReferenceError: “Promise”未定義 解決辦法: step1:安裝最新的web-pack-server 命令行:npm install --save-dev webpack-s ...
  • 先上傳統文件載入方式代碼,傳統方式在處理多層嵌套時代碼比較混亂 第二階段 promsie 新建一個promise對象讀取文件成功是返回 resolve(data) 失敗是返回 rejext, promise.then里可以得到返回結果 co + generator function Generato ...
  • 先最簡單的代碼 安裝 npm install express app.js 代碼內容 打開 localhost:2334埠可以看到 在上一個豐富點的代碼,包含 swig模版引擎,靜態資源載入,mongoose使用 我在上面代碼中做了詳細的註寫,還會詳細完善 github地址:https://git ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...