您现在的位置:首页 >> 前端 >> 内容

es6 Class的getter函数和setter函数实例讲解

时间:2018/2/2 11:44:28 点击:

  核心提示:Class 的 getter函数和setter函数与 ES5 一样,ES6 在类的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。class MyClass ...

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 完全一致。

Tags:ES S6 6C CL 
作者:网络 来源:Web先生的博客