六大技巧帮你彻底掌握ES6中的this指向

2023-11-28 12:31:58

ES6引入箭头函数后，"this"的指向变得更加复杂，让不少开发者感到头疼。本文将深入解析ES6中"this"的指向规则，提供六个技巧，帮助你彻底理解并掌握"this"的指向。

技巧 1：理解箭头函数的特殊性

箭头函数没有自己的"this"，它继承外层函数的"this"。这意味着，在箭头函数中使用"this"，实际指向的是其定义时的调用上下文。

const obj = {
  name: "John Doe",
  sayName: () => {
    console.log(this.name); // undefined
  },
};

技巧 2：掌握隐式绑定和显式绑定

"this"的指向可以通过隐式绑定和显式绑定来控制。隐式绑定是默认的绑定方式，它由调用函数的方式决定。显式绑定使用".bind()"、".call()"和".apply()"方法明确指定"this"的指向。

// 隐式绑定
const obj = {
  name: "John Doe",
  sayName() {
    console.log(this.name); // John Doe
  },
};

// 显式绑定
const sayNameBound = obj.sayName.bind({ name: "Jane Doe" });
sayNameBound(); // Jane Doe

技巧 3：区分严格模式和非严格模式

在非严格模式下，"this"指向全局对象。而在严格模式下，"this"指向"undefined"。严格模式下的箭头函数继承上层函数的"this"，但如果上层函数不存在，则"this"指向"undefined"。

// 非严格模式
function sayName() {
  console.log(this.name); // undefined
}

// 严格模式
"use strict";
function sayName() {
  console.log(this.name); // ReferenceError
}

技巧 4：巧用"new"

使用"new"关键字调用一个函数时，会创建一个新的对象，并将"this"指向该新对象。这通常用于创建类和实例化对象。

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

  sayName() {
    console.log(this.name); // John Doe
  }
}

const john = new Person("John Doe");
john.sayName();

技巧 5：理解箭头函数的替代方案

箭头函数虽然没有自己的"this"，但可以通过一些替代方案来实现类似的效果。例如，可以使用ES5中的"bind"方法或使用一个常规函数并将其作为箭头函数的参数。

// ES5 "bind"方法
const sayNameBound = function() {
  console.log(this.name);
}.bind({ name: "John Doe" });

// 使用常规函数
const sayName = function(person) {
  console.log(person.name);
};

const john = { name: "John Doe" };
sayName(john);