ECMAScript 6课程中的getter和setter是什么?

Tru*_*an1 98 getter setter class ecmascript-6

我对ECMAScript 6类中getter和setter的重点感到困惑.什么目的?以下是我所指的一个例子:

class Employee {

    constructor(name) {
        this._name = name;
    }

    doWork() {
        return `${this._name} is working`;
    }

    get name() {
        return this._name.toUpperCase();
    }

    set name(newName){
        if(newName){ 
            this._name = newName;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

Dav*_*rge 104

这些setter和getter允许您直接使用属性(不使用括号)

var emp = new Employee("TruMan1");

if (emp.name) { 
  // uses the get method in the background
}

emp.name = "New name"; // uses the setter in the background
Run Code Online (Sandbox Code Playgroud)

这只是设置和获取属性的值.


Ale*_*ing 48

ES6中的getter和setter与其他语言(包括ES5)的目的相同.ES5已经允许使用getter和setter Object.defineProperty,尽管它们不太干净且使用起来更麻烦.

实际上,getter和setter允许您使用标准属性访问符号进行读取和写入,同时仍然能够自定义如何检索和变异属性,而无需显式的getter和setter方法.

在上面的Employee类中,这意味着您可以name像这样访问该属性:

console.log(someEmployee.name);
Run Code Online (Sandbox Code Playgroud)

看起来像普通的属性访问,但它实际上会toUpperCase在返回之前调用该名称.同样,这样做:

someEmployee.name = null;
Run Code Online (Sandbox Code Playgroud)

将访问setter,并且它不会修改内部_name属性,因为在namesetter中引入了guard子句.

另请参阅一般问题为什么使用getter和setter?有关为什么能够修改成员访问功能的更多信息很有用.


小智 9

class Employee {

    constructor(name) {
      this._name = name;
    }

    doWork() {
      return `${this._name} is working`;
    }

    get name() {
      // when you get this by employeeInstance.name
      // the code below will be triggered
      // and you can do some logic here
      // just like `console.log` something you want
      console.log('get triggered!')
      return this._name.toUpperCase();
    }

    set name(newName) {
      // the same as `get`
      // when you employeeInstance.mame = 'xxx'
      // the code below will be trigged
      // and you can also do some logic 
      // like here is a `console.log` and `if check`
      console.log('set triggered!')
      if (newName) {
        this._name = newName;
      }
    }
  }

  const employeeInstance = new Employee('mike')
  employeeInstance.name
  employeeInstance.name = '' // this won't be successful, because the `if check`
  console.log(employeeInstance.name)

  // => 
  // get triggered
  // set triggered
  // get triggered
  // MIKE
Run Code Online (Sandbox Code Playgroud)

不管怎样,gettersetter就像间谍一样。它监视对象的属性,以便您可以在每次获取或设置属性值时执行某些操作。