前言
在前端开发中，通过 babel 转换代码已经是司空见惯的事情了。而 babel 并没有将所有功能都内置，部分功能需要通过插件来实现。本文介绍的 babel-preset-binded 就是一个非常有用的 babel 插件，它可以解决在使用 class 语法时绑定 this 的问题。
安装
在使用 babel-preset-binded 之前，需要先安装好 babel 依赖以及 babel-preset-binded：
npm i @babel/core @babel/cli @babel/preset-env babel-preset-binded --save-dev
配置
在 babel.config.js 中加入 babel-preset-binded 插件：
module.exports = {
presets: [
'@babel/preset-env',
['babel-preset-binded', {
'classProperties': true
}]
]
}classProperties 选项用来启用该插件附带的类属性转换插件。
示例
代码示例：
-- -------------------- ---- -------
----- ----------- -
------------- -
--------- - -------------
-
------- -
----------------------
-
-
----- ----------- - --- -------------
----------------------------- ----- -- ---------当执行 setTimeout(simpleClass.print, 1000) 时，this 将指向全局对象，从而导致打印 undefined。这是因为 setTimeout 是在全局作用域下调用的，而 this.print 被绑定在了 simpleClass 上。
使用 babel-preset-binded 时，代码示例可以这样改写：
-- -------------------- ---- -------
----- ----------- -
------------- -
--------- - -------------
----------
-
------- -
----------------------
-
-
----- ----------- - --- -------------
----------------------------- ----- -- -----------在 constructor 中添加了 bind(this)，它会将所有 this 绑定到实例本身。这样，当方法被传递到 setTimeout 时，仍然可以正确地访问 simpleClass 实例的属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79931