【问题标题】:Babel transform this by _thisBabel 通过 _this 转换 this
【发布时间】:2016-07-15 17:47:11
【问题描述】:

我对工具提示进行了引导修改。 并用 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 a 在他将 _this 分配给一个他认为是真实的值之前。

问题:对于这个特定的功能,我可以避免在 babel 中进行这种转换吗?

=====

基于响应的最终解决方案:

   getTitle: function getTitle() {

【问题讨论】:

  • 旁注:箭头函数周围不需要最外层的()title: () => { /* ... */ } 很好。
  • 您不应该使用箭头,因为这完全违反了规范。很快(或任何时候) babel 将不再需要转换箭头函数,您的代码将会中断。箭头函数不仅是函数的简写。它们有不同的语义。如果您不想要该语义,则不应在这种情况下使用它。

标签: javascript ecmascript-6 webpack babeljs


【解决方案1】:

您使用了一个箭头函数,根据定义,它在创建它的this 上关闭。

如果您不希望这种行为,请不要使用箭头函数:

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

重新编辑:

我想使用箭头功能。我更喜欢做 babel 排除而不是 eslint 排除。

你不能,而不是getTitle,因为它让你访问元素的唯一方法是设置this。箭头函数本质上有一个固定的this(根本没有一个;它们在创建它们的执行上下文中关闭了一个,这是固定的)。您不能将箭头函数用于您希望调用者确定this 的任何函数,例如在这种情况下。

您的选择是修改 Bootstrap 或使用普通函数。后者似乎更合理。

【讨论】:

  • 我强制我的 eslint 来避免这个功能。我想如果使用这种功能我可以有相同的行为。感谢您的回复。
  • @RaúlMartín:我不明白你的意思,除了你正在使用 ESLint。如果您使用的是 jQuery,则需要关闭关于 this 外部构造函数的 ESLint 警告,它不适用。 (我认为你应该把它改成无论如何,但是......)但我不知道你所说的是什么意思......我想如果使用这种功能我可以有相同的行为。感谢您的回复"。如果您的意思是要使用箭头函数,但 this 由函数的调用方式控制,则不能。这是箭头函数的一半。
  • 我的配置在 Jquery 上运行良好,并在正确的情况下显示错误,就像这样。
  • @RaúlMartín:仍然没有关注。在需要 this 设置的任何情况下,您都不能使用箭头函数,该设置取决于函数的调用方式而不是函数的定义位置。所以你不能在这里使用一个。 (嗯......不合理,可能根本不合理,这取决于 tooltip 的实现方式。)
  • @rockerest:嘿,我试着在船上听取反馈。我正在旁边编辑,然后... ;-)
猜你喜欢
  • 2018-10-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-14
  • 2019-10-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多