JavaScript get set 訪問器屬性
JavaScript中大致有兩類屬性:
(1).資料屬性。
(2).訪問器屬性。
在configurable、enumerable和writable一文已經對資料屬性的特性做了詳細介紹。
本文將通過程式碼例項對訪get set問器屬性做一下詳細介紹。
因為訪問器屬性是ES5新增,所以可能不少朋友對它比較陌生。
訪問器屬性功能更為強大,舉一個例子,比如本站成立於2016年,那麼本站的年齡到2018年是兩歲。
那麼我們想有一個通用的功能,確定了網站成立於哪一年,自動計算出網站的年齡。
使用get與set訪問器可以很輕鬆實現此功能。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼執行程式碼let web = { _age:0, set startYear (startYear){ if(startYear <= new Date().getFullYear()){ this._age=new Date().getFullYear()-startYear; } }, get age (){ return this._age; } }; web.startYear=2015; console.log(web.age);
程式碼執行效果截圖如下:
上面程式碼在物件直接量中定義了兩個訪問器屬性startYear和age。
_age前面加上一個下劃線標識此屬性是一個私有屬性,不是對外公開的的一個介面,是以慣例。
當我們給startYear屬性賦值年份之後,可以自動計算出網站的年齡。
一.訪問器屬性定義:
訪問器屬性由get和set方法定義。
(1).讀取屬性的時候呼叫get方法。
(2).設定屬性的時候呼叫set方法。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼let web={ _webName:"螞蟻部落", get webName(){ return this._webName; }, set webName(webName){ this._webName=webName; } }
訪問器屬性的兩個方法都是可選的,省略get,那麼無法讀取該屬性,省略set,那麼此屬性只讀。
上面是在字面量中定義訪問器屬性,當然也可以利用Object.defineProperty方法定義。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼let web={ _webName:"螞蟻部落" } Object.defineProperty(web, 'webName', { get: function() { return this._webName; }, set: function(webName) { this._webName=webName; } });
關於Object.defineProperty方法可以參閱Object.defineProperty()一章節。
二.訪問器屬性特性:
訪問器屬性具有如下四個特性:
(1).[[Configurable]]:描述屬性是否可以被刪除,特性是否可以被改變,或是否可以被修改為訪問器屬性。
(2).[[Enumerable]]:描述屬性是否可以被遍歷。
(3).[[Get]]:在讀取屬性時,呼叫此方法。
(4).[[Set]]:設定屬性值時,呼叫此方法。
前兩個特性本文不再介紹,可以參閱configurable、enumerable和writable一文。
與資料屬性相比,訪問器屬性沒有[[Writable]]和[[Value]]特性。
因為這兩個特性的功能被[[Get]]和[[Set]]取代,它們不能同時存在,否則報錯。
[JavaScript] 純文字檢視 複製程式碼let web={ _webName:"螞蟻部落" } Object.defineProperty(web, 'webName', { get: function() { return this._webName; } });
只有get方法,那麼webName屬性就是隻讀的,類似於資料屬性的[[Writable]]特性值為false。
相關文章
- javascript 物件屬性的get set訪問器寫法JavaScript物件
- javascript get和set訪問器JavaScript
- 原型鏈上的get與set訪問器屬性原型
- C#中類的屬性訪問器--get和set分析C#
- c# public_protected_private許可權訪問符_屬性訪問器get_setC#
- JavaScript物件的資料屬性與訪問器屬性JavaScript物件
- 私有屬性的Get Set 與 Public
- c#屬性訪問器C#
- c#索引訪問器再探_get_set之訪問控制存取C#索引
- JavaScript訪問物件的屬性和方法JavaScript物件
- vue3計算屬性的可寫屬性 set 與 getVue
- c# tcbs屬性訪問器C#
- javascript訪問物件屬性方式簡單介紹JavaScript物件
- Vue之computed(計算屬性)詳解get()、set()Vue
- 深入理解物件的資料屬性與訪問器屬性物件
- Set size 屬性
- 同時重寫屬性的get和set方法系統報錯問題處理
- outerDocument訪問外部屬性方法
- cassandra get set同步問題
- lombok get/set 與 JavaBean get/setLombokJavaBean
- 淺談對屬性描述符__get__、__set__、__delete__的理解delete
- C#基礎概念之密封類,屬性訪問器,介面C#
- 手把手帶你用原生js實現css屬性的set和getJSCSS
- 客戶端 post ,get 訪問伺服器客戶端伺服器
- JavaScript V8 Object 記憶體結構與屬性訪問詳解JavaScriptObject記憶體
- 課時45:魔法方法:屬性訪問
- js訪問物件屬性的2個方法JS物件
- 一、訪問物件屬性和方法的操作物件
- Python 訪問和設定私有屬性Python
- ES規範解讀之賦值操作符&屬性訪問器賦值
- JavaScript files 屬性JavaScript
- JavaScript childElementCount 屬性JavaScript
- JavaScript offsetX 屬性JavaScript
- JavaScript firstChild屬性JavaScript
- JavaScript classList 屬性JavaScript
- JavaScript cells 屬性JavaScript
- JavaScript rows 屬性JavaScript
- JavaScript nodeName 屬性JavaScript