ES6 javascript中class類的get與set用法實例分析

更新時間：2017年10月30日 09:19:41 作者：專注前端30年

這篇文章主要介紹了ES6 javascript中class類的get與set用法,結(jié)合具體實例形式分析了ES6中類的get與set關(guān)鍵字使用方法,需要的朋友可以參考下

本文實例講述了ES6 javascript中class類的get與set用法。分享給大家供大家參考，具體如下：

與 ES5 一樣，在 Class 內(nèi)部可以使用get和set關(guān)鍵字，對某個屬性設(shè)置存值函數(shù)和取值函數(shù)，攔截該屬性的存取行為。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: ' + value);
  }
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'

上面代碼中， prop屬性有對應的存值函數(shù)和取值函數(shù)，因此賦值和讀取行為都被自定義了。

存值函數(shù)和取值函數(shù)是設(shè)置在屬性的 descriptor 對象上的。

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }
  get html() {
    return this.element.innerHTML;
  }
  set html(value) {
    this.element.innerHTML = value;
  }
}
var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html");
"get" in descriptor // true
  "set" in descriptor // true

上面代碼中，存值函數(shù)和取值函數(shù)是定義在html屬性的描述對象上面，這與 ES5 完全一致。

希望本文所述對大家基于ECMAScript的程序設(shè)計有所幫助。

您可能感興趣的文章:

ES6
class

相關(guān)文章

JS合并兩個數(shù)組的方法詳解
這篇文章主要詳細介紹了JS合并兩個數(shù)組的方法，文中有詳細的代碼示例，對我們學習JS有一定的幫助，感興趣的同學可以參考一下
2023-06-06
原生JavaScript制作計算器
本文給大家匯總了2個原生JavaScript實現(xiàn)的計算器功能的代碼，一個簡單一個稍微復雜些，小伙伴們根據(jù)自己的需要來選擇吧
2016-10-10
全面解析Bootstrap排版使用方法（文字樣式）
這篇文章全面解析了Bootstrap排版使用方法，本文重點介紹Bootstrap排版中的文字樣式設(shè)置，感興趣的小伙伴們可以參考一下
2015-11-11
詳解JavaScript如何準確獲取任意變量的數(shù)據(jù)類型
js是弱類型語言，或者說是動態(tài)語言，在定義變量時我們可以不提前聲明變量的類型，也可以在變量聲明后賦予不同類型的值。所以本文為大家詳解一下JavaScript如何準確獲取任意變量的數(shù)據(jù)類型，需要的可以參考一下
2022-06-06
JavaScript代碼性能優(yōu)化總結(jié)篇
本文給大家總結(jié)了有關(guān)js代碼性能優(yōu)化的相關(guān)知識，非常不錯，感興趣的朋友一起學習吧
2016-05-05
js代碼實現(xiàn)下拉菜單【推薦】
本篇文章主要分享了js代碼實現(xiàn)下拉菜單的代碼，可復制直接運行看效果，具有很好的參考價值，跟小編一起來看下吧
2016-12-12
Javascript訪問Promise對象返回值的操作方法
這篇文章介紹了如何在JavaScript中使用Promise對象來處理異步操作,通過使用fetch()方法和Promise對象,我們可以從后端API獲取數(shù)據(jù)并處理返回值,文章展示了如何使用.then()鏈式操作和async/await語法來訪問Promise對象的返回值,感興趣的朋友一起看看吧
2025-03-03
詳解JS中的立即執(zhí)行函數(shù)
本文主要介紹了js中立即執(zhí)行函數(shù)的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
解析img圖片沒找到onerror事件 Stack overflow at line: 0
本篇文章主要介紹了img圖片沒找到onerror事件 Stack overflow at line: 0 需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
基于JS實現(xiàn)一個可拖拽的容器布局組件
這篇文章主要為大家詳細介紹了如何基于JavaScript實現(xiàn)一個可拖拽的容器布局組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2023-12-12