Babel通过_this来进行转换

Question

我需要对一个提示框进行Bootstrap改造，并使用webpack/babel处理我的js代码。

简化后的代码如下：

    $('[data-toggle="tooltip"]').tooltip({
        title: () => {
            return $(this).children('.tooltip-html-content').html();
        }
    });

这应该是元素，Bootstrap将使用此函数调用它：

   getTitle: function () {
      var title
        , $e = this.$element
        , o = this.options

      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

      return title
    }

重要的一行是：

 o.title.call($e[0])

$e[0]是工具提示dom元素。

当我用babel处理它时，结果会将this更改为_this，然后将_this分配给他认为是真正的this的值。

问题：我能否在babel中避免对此特定函数进行此转换？

=====

基于回答的最终解决方案：

   getTitle: function getTitle() {

- Raúl Martín

---

顺便提一下：在箭头函数周围不需要最外层的 ()，title: () => { /* ... */ } 就可以了。 - T.J. Crowder

你不应该使用箭头函数，因为这完全违反了规范。很快（或者说在某个时候），Babel 将不再需要转译箭头函数，而你的代码将会出错。箭头函数不仅仅是函数的简写形式，它们具有不同的语义。如果你不想要那种语义，就不应该在那种情况下使用它。 - Hugo Dozois

相关：箭头函数与函数声明/表达式：它们是否等效/可互换？ - Felix Kling

Answer 1

你使用了箭头函数，它根据定义会闭合在创建它的上下文中的 this。

如果您不希望出现这种行为，请不要使用箭头函数：

$('[data-toggle="tooltip"]').tooltip({
    title: function() {
    // ----^^^^^^^^^^
        return $(this).children('.tooltip-html-content').html();
    }
});

关于你的编辑:

我想使用箭头函数。我更喜欢进行Babel排除而不是ESLint排除。

你不能这样做，因为只有通过设置this才能访问元素的getTitle。箭头函数本质上具有固定的this（根本没有this;它们闭合在创建它们的执行上下文中的一个，这是固定的）。你无法在希望this由调用者确定的任何函数中使用箭头函数，例如此情况。

你可以选择修改Bootstrap或使用普通函数。后者似乎是更合理的做法。

- T.J. Crowder

---

我强制执行我的ESLint来避免使用这个函数。 如果使用这种函数，我希望能够获得相同的行为。谢谢回复。 - Raúl Martín

@RaúlMartín：我不明白你的意思，除了你正在使用ESLint之外。如果你正在使用jQuery，你需要关闭那个关于在构造函数之外使用this的ESLint警告，因为它不适用。 （我会争辩说你应该无论如何都要关闭它，但是...）但是我不知道你所说的“...如果使用这种函数，我希望可以有相同的行为。谢谢回复”的意思是什么。如果你的意思是想使用箭头函数，但是希望通过调用函数来控制this，那是不可能的。这就是箭头函数的一半意义。 - T.J. Crowder

我的配置与 JQuery 配合得很好，并且能够在正确的情况下显示出错误信息，就像这个例子一样。 - Raúl Martín

@RaúlMartín 使用代码检查工具来违反规范是一个非常糟糕的想法。 - Hugo Dozois

@rockerest：嗨，我尝试接受反馈意见。我正在它旁边进行编辑，然后... ;-） - T.J. Crowder