Babel 转换箭头函数后 this 指向问题解决-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，箭头函数已经成为了一个很常用的语法，它不仅简洁易懂，而且可以避免 this 指向问题。但是，当我们使用 Babel 将 ES6 代码转换成 ES5 代码时，箭头函数会被转换成普通函数，导致 this 的指向问题再次出现。本文将介绍如何使用 Babel 解决箭头函数转换后的 this 指向问题。

this 指向问题

在 JavaScript 中，this 的指向是非常重要的。在普通函数中，this 的指向是动态的，它取决于函数的调用方式。而在箭头函数中，this 的指向是固定的，它指向箭头函数定义时的上下文。

例如，下面的代码中，this 的指向分别是 obj 和 window：

// javascriptcn.com 代码示例
var obj = {
  name: 'obj',
  getName: function() {
    console.log(this.name);
  }
};

var getName = obj.getName;
getName(); // window

var getObjName = obj.getName.bind(obj);
getObjName(); // obj

var getArrowName = () => {
  console.log(this.name);
};
getArrowName(); // window

Babel 转换箭头函数后的问题

由于箭头函数的 this 指向是固定的，因此它被广泛应用于回调函数和事件处理函数中。但是，当我们使用 Babel 将 ES6 代码转换成 ES5 代码时，箭头函数会被转换成普通函数，导致 this 的指向问题再次出现。

例如，下面的代码在 ES6 中是没有问题的，但是在 Babel 转换后就会出现问题：

// javascriptcn.com 代码示例
class Person {
  constructor(name) {
    this.name = name;
  }

  getName() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
}

const person = new Person('Alice');
person.getName();

在 ES6 中，箭头函数中的 this 指向 Person 类的实例。但是，在 Babel 转换后，箭头函数中的 this 指向的是全局对象 window，因此输出的结果是 undefined。

解决方法

为了解决箭头函数转换后的 this 指向问题，我们可以使用 @babel/plugin-transform-runtime 插件。这个插件会将箭头函数转换成一个返回箭头函数的函数，从而保留箭头函数的 this 指向。

首先，我们需要安装 @babel/plugin-transform-runtime 插件：

npm install --save-dev @babel/plugin-transform-runtime

然后，在 .babelrc 文件中添加以下配置：

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

最后，我们需要在代码中引入 babel/runtime 包：

import "babel/runtime";

这样，我们就可以在 Babel 转换后保留箭头函数的 this 指向了。例如，下面的代码在 ES6 中和 Babel 转换后都可以正常工作：

// javascriptcn.com 代码示例
import "babel/runtime";

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

  getName() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
}

const person = new Person('Alice');
person.getName();

总结

本文介绍了在使用 Babel 转换箭头函数时出现的 this 指向问题，并提供了使用 @babel/plugin-transform-runtime 插件解决这个问题的方法。在实际开发中，我们应该尽可能使用箭头函数来避免 this 指向问题，并使用 @babel/plugin-transform-runtime 插件来保留箭头函数的 this 指向。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6556e588d2f5e1655d14671e