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