Question

我对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;
        }
    }
}

Answer 1

这些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

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

Answer 2

ES6中的Getters和setter与其他语言（包括ES5）的目的相同。 ES5已经允许通过Object.defineProperty获取getter和setter，尽管它们不太干净且使用起来比较麻烦。

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

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

console.log(someEmployee.name);

它看起来就像普通的属性访问一样，但在返回之前它实际上会在名称上调用toUpperCase。同样，这样做：

someEmployee.name = null;

会访问setter，并且由于_name的setter中引入了guard子句，它不会修改内部name属性。

另请参阅一般问题Why use getters and setters?，了解有关为何能够修改成员访问功能的更多信息。

Answer 3

class Employee {

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

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

    get name() {
      // when you get this by employeeInstance.mame
      // 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 blew 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 success, because the `if check`
  console.log(employeeInstance.name)

  // => 
  // get triggered
  // set triggered
  // get triggered
  // MIKE

无论如何，getter和setter就像间谍。它监视对象的属性，以便您每次获取或设置属性值时都可以做某事。

Answer 4

ES6 getter和setter与Java中的类似概念有着截然不同的动机。

在Java中，getter和setter允许类定义JavaBean。 getter和setter的关键在于它允许bean具有完全正交的界面＆＃34;从公共领域隐含的那些。所以我可以有一个字段＆＃34; name＆＃34;那不是JavaBean属性，我可以拥有一个JavaBean属性＆＃34;地址＆＃34;那不是一个领域。

JavaBean属性也是“可被发现的”＃34;数千个框架（例如Hibernate）通过Java反射。因此，吸气剂和固定剂是标准方法的一部分，用于暴露＆＃34;豆属性。

作为功能的吸气剂和制定者也具有他们＆＃34;抽象＆＃34;的价值。实施。它可以是字段或计算（＆＃34;合成＆＃34;）值。因此，如果我有一个名为＆＃34; zipcode＆＃34;的bean属性，则以存储的字符串开头。现在假设我想将其更改为从地址/城市/州计算的值？

如果我使用字段，则此代码会中断：

      String zipcode = address.zipcode();

但如果我使用吸气剂，这不会破坏：

      String zipcode = address.getZipcode();

JavaScript没有像JavaBeans这样的东西。据我所知，GET和SET的预期价值仅限于上述＆＃34;合成＆＃34; （计算）属性。

但它比java更好，因为Java并不允许你兼容转换＆＃34;字段＆＃34;对于一种方法，ES6 GET和SET允许这样做。

也就是说，如果我有：

       var zipcode = address.zipcode;

如果我将zipcode从标准对象属性更改为getter，则上面的代码现在调用GET函数。

请注意，如果我没有在定义中包含GET，则不会调用zipcode GET方法。相反，它只会将函数zipcode分配给var。

所以我认为这些是了解Java和JavaScript ES6 getter和setter之间的一些重要区别。

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

4 个答案: