es6 Class 的 getter函数和setter函数

Class 的 getter函数和setter函数

与 ES5 一样，ES6 在“类”的内部可以使用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 完全一致。

es6 Class 的 getter函数和setter函数相关推荐

在C ++中使用getter和setter函数创建具有X和Y轴的类Point
We have two declare a point class with two Axis X and Y and we have to create/design its getter and ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
石川es6课程---13-16、generator-认识生成器函数
石川es6课程---13-16.generator-认识生成器函数一.总结一句话总结: ` generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 ` 需要调用next() ...
Spring基于Setter函数的依赖注入（DI）
以下内容引用自http://wiki.jikexueyuan.com/project/spring/dependency-injection/spring-setter-based-dependenc ...
ES6基础（var let const 箭头函数）-学习笔记
文章目录 ES6基础(var let const 箭头函数)- 学习笔记定义:var let const 箭头函数数据结构 set map ES6基础(var let const 箭头函数)- 学 ...
ES6——let、参数增强、箭头函数、模板字符串、for of和解构
ECMA -> ECMAScript -> ES标准规范 ES6: js的第6套标准规范一. let 1.1 let特点 1.2 let底层原理块级作用域:解决全局污染 var let ...
ES6高级：扩展运算符，箭头函数，class类，iterator迭代器
2. 扩展运算符 ... 2.1 reset参数 reset参数==必须放在最后==,为了替代arguments,在函数形参中使用,==接受剩余参数==,以==数组==的形式去接受 //1. rese ...
es6箭头函数_【知识点】ES6箭头函数、箭头函数与普通函数的区别
作者:長安曹公子文章出处:ES6 - 箭头函数.箭头函数与普通函数的区别一.基本语法 ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子: // 箭头函数 let fu ...
ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

es6 Class 的 getter函数和setter函数

Class 的 getter函数和setter函数

es6 Class 的 getter函数和setter函数相关推荐

最新文章

热门文章