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屬性有對應(yīng)的存值函數(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 完全一致。
更多相關(guān)內(nèi)容可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《javascript面向?qū)ο笕腴T教程》
希望本文所述對大家基于ECMAScript的程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要詳細介紹了JS合并兩個數(shù)組的方法，文中有詳細的代碼示例，對我們學(xué)習(xí)JS有一定的幫助，感興趣的同學(xué)可以參考一下2023-06-06
本文給大家匯總了2個原生JavaScript實現(xiàn)的計算器功能的代碼，一個簡單一個稍微復(fù)雜些，小伙伴們根據(jù)自己的需要來選擇吧2016-10-10
這篇文章全面解析了Bootstrap排版使用方法，本文重點介紹Bootstrap排版中的文字樣式設(shè)置，感興趣的小伙伴們可以參考一下2015-11-11
詳解JavaScript如何準確獲取任意變量的數(shù)據(jù)類型
js是弱類型語言，或者說是動態(tài)語言，在定義變量時我們可以不提前聲明變量的類型，也可以在變量聲明后賦予不同類型的值。所以本文為大家詳解一下JavaScript如何準確獲取任意變量的數(shù)據(jù)類型，需要的可以參考一下2022-06-06
本文給大家總結(jié)了有關(guān)js代碼性能優(yōu)化的相關(guān)知識，非常不錯，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
本篇文章主要分享了js代碼實現(xiàn)下拉菜單的代碼，可復(fù)制直接運行看效果，具有很好的參考價值，跟小編一起來看下吧2016-12-12
這篇文章介紹了如何在JavaScript中使用Promise對象來處理異步操作,通過使用fetch()方法和Promise對象,我們可以從后端API獲取數(shù)據(jù)并處理返回值,文章展示了如何使用.then()鏈式操作和async/await語法來訪問Promise對象的返回值,感興趣的朋友一起看看吧2025-03-03
本文主要介紹了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
這篇文章主要為大家詳細介紹了如何基于JavaScript實現(xiàn)一個可拖拽的容器布局組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12