ES6 javascript中class类的get与set用法实例分析

来源：懂视网责编：小采时间：2020-11-27 22:26:40

ES6 javascript中class类的get与set用法实例分析

ES6 javascript中class类的get与set用法实例分析:本文实例讲述了ES6 javascript中class类的get与set用法。分享给大家供大家参考，具体如下：与 ES5 一样，在 Class 内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。 class MyClass { cons

推荐度：

点击下载本文 文档为doc格式

导读ES6 javascript中class类的get与set用法实例分析:本文实例讲述了ES6 javascript中class类的get与set用法。分享给大家供大家参考，具体如下：与 ES5 一样，在 Class 内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。 class MyClass { cons

本文实例讲述了ES6 javascript中class类的get与set用法。分享给大家供大家参考，具体如下：

与 ES5 一样，在 Class 内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

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属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。

存值函数和取值函数是设置在属性的 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

上面代码中，存值函数和取值函数是定义在html属性的描述对象上面，这与 ES5 完全一致。

更多相关内容可查看本站专题：《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com