五味杂陈：Es5 中的 this 和 Es6 箭头函数中的 this随笔

2023-12-23 01:25:36

ES5 中的 this

在 ES5 中，this 的值取决于函数的调用方式。有四种主要的方式来调用函数：

作为对象的方法调用： 当一个函数作为对象的方法被调用时，this 的值被设置为该对象。例如：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出：Hello, my name is John

作为构造函数调用： 当一个函数作为构造函数被调用时，this 的值被设置为一个新创建的对象。例如：

function Person(name) {
  this.name = name;
}

const person = new Person('John');

console.log(person.name); // 输出：John

作为普通函数调用： 当一个函数作为普通函数被调用时，this 的值被设置为全局对象（window 对象）。例如：
```
function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

greet(); // 输出：Hello, my name is undefined
```

使用 call()、apply() 或 bind() 方法调用： 这三种方法都可以用来显式地设置函数的 this 值。例如：

const person = {
  name: 'John'
};

const greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

greet.call(person); // 输出：Hello, my name is John
greet.apply(person); // 输出：Hello, my name is John
const boundGreet = greet.bind(person);
boundGreet(); // 输出：Hello, my name is John

ES6 箭头函数中的 this

在 ES6 中，箭头函数中的 this 总是指向函数定义时的 this。这与 ES5 中的函数不同，ES5 中的函数的 this 值取决于函数的调用方式。

例如：

const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出：Hello, my name is John

在上面的例子中，greet 函数是一个箭头函数，因此 this 的值被设置为 person 对象。这是因为箭头函数中的 this 总是指向函数定义时的 this。

ES5 中的 this 和 ES6 箭头函数中的 this 的区别

ES5 中的 this 和 ES6 箭头函数中的 this 的主要区别如下：

ES5 中的 this 的值取决于函数的调用方式，而 ES6 箭头函数中的 this 总是指向函数定义时的 this。
ES5 中的 this 可以被显式地设置，而 ES6 箭头函数中的 this 不能被显式地设置。

实际例子

为了更好地理解 ES5 中的 this 和 ES6 箭头函数中的 this 的区别，让我们来看一些实际例子。

ES5 中的 this 的例子

以下是一些 ES5 中的 this 的例子：

作为对象的方法调用：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出：Hello, my name is John

作为构造函数调用：

function Person(name) {
  this.name = name;
}

const person = new Person('John');

console.log(person.name); // 输出：John

作为普通函数调用：

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

greet(); // 输出：Hello, my name is undefined

使用 call()、apply() 或 bind() 方法调用：

const person = {
  name: 'John'
};

const greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

greet.call(person); // 输出：Hello, my name is John
greet.apply(person); // 输出：Hello, my name is John
const boundGreet = greet.bind(person);
boundGreet(); // 输出：Hello, my name is John

ES6 箭头函数中的 this 的例子

以下是一些 ES6 箭头函数中的 this 的例子：

作为对象的方法调用：

const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出：Hello, my name is John

作为构造函数调用：

class Person {
  constructor(name) {
    this.name = name;
  }

  greet = () => {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('John');

person.greet(); // 输出：Hello, my name is John

作为普通函数调用：

const greet = () => {
  console.log(`Hello, my name is ${this.name}`);
};

greet(); // 输出：Hello, my name is undefined

使用 call()、apply() 或 bind() 方法调用：

const person = {
  name: 'John'
};

const greet = () => {
  console.log(`Hello, my name is ${this.name}`);
};

greet.call(person); // 输出：Hello, my name is undefined
greet.apply(person); // 输出：Hello, my name is undefined
const boundGreet = greet.bind(person);
boundGreet(); // 输出：Hello, my name is undefined

结论

ES5 中的 this 和 ES6 箭头函数中的 this 是两个不同的概念。ES5 中的 this 的值取决于函数的调用方式，而 ES6 箭头函数中的 this 总是指向函数定义时的 this。理解 ES5 中的 this 和 ES6 箭头函数中的 this 的区别对于编写高质量的 JavaScript 代码非常重要。