ES6 javascript中class类的get与set用法实例分析
更新时间：2017年10月30日 09:19:41 作者：专注前端30年
这篇文章主要介绍了ES6 javascript中class类的get与set用法,结合具体实例形式分析了ES6中类的get与set关键字使用方法,需要的朋友可以参考下
本文实例讲述了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的程序设计有所帮助。
相关文章
这篇文章主要详细介绍了JS合并两个数组的方法，文中有详细的代码示例，对我们学习JS有一定的帮助，感兴趣的同学可以参考一下2023-06-06
本文给大家汇总了2个原生JavaScript实现的计算器功能的代码，一个简单一个稍微复杂些，小伙伴们根据自己的需要来选择吧2016-10-10
这篇文章全面解析了Bootstrap排版使用方法，本文重点介绍Bootstrap排版中的文字样式设置，感兴趣的小伙伴们可以参考一下2015-11-11
js是弱类型语言，或者说是动态语言，在定义变量时我们可以不提前声明变量的类型，也可以在变量声明后赋予不同类型的值。所以本文为大家详解一下JavaScript如何准确获取任意变量的数据类型，需要的可以参考一下2022-06-06
本文给大家总结了有关js代码性能优化的相关知识，非常不错，感兴趣的朋友一起学习吧2016-05-05
本篇文章主要分享了js代码实现下拉菜单的代码，可复制直接运行看效果，具有很好的参考价值，跟小编一起来看下吧2016-12-12
这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从后端API获取数据并处理返回值,文章展示了如何使用.then()链式操作和async/await语法来访问Promise对象的返回值,感兴趣的朋友一起看看吧2025-03-03
本文主要介绍了js中立即执行函数的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
解析img图片没找到onerror事件 Stack overflow at line: 0
本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了如何基于JavaScript实现一个可拖拽的容器布局组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
最新评论