ES6 类中的 ES6 函数、箭头函数和“this”[重复]

ES6 类中的 ES6 函数、箭头函数和“this”

在ES6（ECMAScript 2015）中，我们可以使用类（class）来创建对象，类是一种面向对象编程的概念，它提供了一种更加简洁和灵活的方式来创建对象和定义对象的行为。在类中，我们可以使用ES6函数和箭头函数来定义类的方法，同时需要注意“this”的使用。

ES6函数

ES6函数是ES6中的一种新的函数声明方式，它使用“function”关键字来定义函数，但是省略了冒号和function关键字，使得函数的声明更加简洁。在类中，我们可以使用ES6函数来定义类的方法。

下面是一个使用ES6函数定义类方法的例子：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(<code>Hello, my name is ${this.name}.</code>);
  }
}
const person = new Person('John');
person.sayHello(); // 输出：Hello, my name is John.

在上面的例子中，我们定义了一个名为Person的类，它有一个构造函数和一个sayHello方法。构造函数用于初始化对象的属性，sayHello方法用于打印对象的名称。在sayHello方法中，我们使用了ES6的模板字符串来拼接字符串，使用this关键字来引用当前对象的属性。

箭头函数

箭头函数是ES6中的一种新的函数声明方式，它使用箭头（=>）来定义函数，可以更简洁地定义匿名函数和回调函数。在类中，我们同样可以使用箭头函数来定义类的方法。

下面是一个使用箭头函数定义类方法的例子：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello = () => {
    console.log(<code>Hello, my name is ${this.name}.</code>);
  }
}
const person = new Person('John');
person.sayHello(); // 输出：Hello, my name is John.

在上面的例子中，我们使用箭头函数来定义sayHello方法。与ES6函数不同的是，箭头函数没有自己的this值，它继承外部作用域的this值。因此，在箭头函数中使用this关键字时，它指向的是定义该箭头函数的对象，而不是调用该箭头函数的对象。

“this”的使用

在类中使用函数和箭头函数时，需要注意“this”的使用。在类的方法中，this关键字指向的是调用该方法的对象，它可以用来引用对象的属性和方法。

下面是一个使用this关键字的例子：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(<code>Hello, my name is ${this.name}.</code>);
  }
}
const person = new Person('John');
person.sayHello(); // 输出：Hello, my name is John.

在上面的例子中，我们在sayHello方法中使用了this.name来引用对象的name属性。

在使用箭头函数时，需要注意它的this指向的是定义该箭头函数的对象，而不是调用该箭头函数的对象。

下面是一个使用箭头函数和this关键字的例子：

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello = () => {
    console.log(<code>Hello, my name is ${this.name}.</code>);
  }
}
const person = new Person('John');
person.sayHello(); // 输出：Hello, my name is John.

在上面的例子中，我们在sayHello箭头函数中使用了this.name来引用对象的name属性。由于箭头函数没有自己的this值，它继承了外部作用域的this值，因此this指向的是定义该箭头函数的对象。

在ES6类中，我们可以使用ES6函数和箭头函数来定义类的方法。ES6函数和箭头函数都可以使用this关键字来引用对象的属性和方法。ES6函数和箭头函数的区别在于this的指向，ES6函数的this指向调用该方法的对象，而箭头函数的this指向定义该箭头函数的对象。

在使用ES6类时，我们需要根据具体的情况选择使用ES6函数还是箭头函数，以便正确地使用this关键字。同时，我们也需要注意this的指向，以避免出现意外的错误。

参考代码

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(<code>Hello, my name is ${this.name}.</code>);
  }
  sayHelloArrow = () => {
    console.log(<code>Hello, my name is ${this.name}.</code>);
  }
}
const person = new Person('John');
person.sayHello(); // 输出：Hello, my name is John.
person.sayHelloArrow(); // 输出：Hello, my name is John.

在上面的代码中，我们定义了一个Person类，它有一个构造函数和两个方法（sayHello和sayHelloArrow）。其中，sayHello方法使用了ES6函数的方式来定义，sayHelloArrow方法使用了箭头函数的方式来定义。两个方法都使用了this关键字来引用对象的name属性。

当我们创建一个Person对象并调用这两个方法时，它们都会输出相同的结果，即打印出对象的名称。这是因为在这两个方法中，this指向的都是调用该方法的Person对象。