ES6 setter 函数无法识别

Question

我正在研究 ES6 的新语法，现在我正在查看 get 和 set 方法，但在尝试使用 set 方法时出现错误。

这是一个例子：

  class Person {
    constructor(firstName, lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
    }
    
    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
    
    set fullName(...value) {
      this.firstName = firstName;
      this.lastName = lastName;
    }
  }
    
  let a = new Person('Person','A');
  a.fullName('Person','B')
  console.log(a);

Answer 1

Getter 和 setters 不用作标准函数。根据 MDN：

The set syntax binds an object property to a function to be called when there is an attempt to set that property.

您应该使用正常的 = 赋值来调用 setter，而不是将其作为函数调用。

另外，setter只接受一个参数，不能使用rest(...)语法。您可以使用对象数组或对象，并使用解构赋值来实现。

class Person {

  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  set fullName([firstName, lastName]) {
    this.firstName = firstName;
    
    this.lastName = lastName;
  }
}

let a = new Person('Person','A');

a.fullName = ['Person', 'B'];

console.dir(a);

Answer 2

这不是全新的语法。它是应用于 ES6 类.

的 ES5 setter 的变体

get/set属性访问器的全部意义在于它们被定义为属性描述符并用作普通属性:

console.log(person.fullName);
person.fullName = 'Foo Bar';

应该是：

set fullName(value) {
    const [firstName, lastName] = value.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
}

定义成setsetter是没有意义的，如果你想把它当作普通方法来使用的话。相反，它可以是

setFullName(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Answer 3

你不能像那样使用 setter，请参阅下面的代码片段和

class Person {
 constructor(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
 }

 get fullName() {
  return `${this.firstName} ${this.lastName}`;
 }

 set fullName(fname) {
        let fn = fname.split(' ');
  this.firstName = fn[0];
  this.lastName = fn[1];
 }
}

let a = new Person('Person','A');
a.fullName = 'Person B';
console.dir(a);

ES6 setter 函数无法识别

ES6 setter function isn't recognized

javascript

ecmascript-6

es6-class