I have a bootstrap modification for a tooltip. and process my js with webpack/babel

A simplification of my code could be:

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

This should be the element, bootstrap will call this function with:

   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
    }

The important line is:

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

Where $e[0] is the tooltip dom element.

Well, when I process this with babel the result change this by _this a before he assign _this to a value that he consider is the real this.

The question: Can I avoid this conversion in babel for this specific function?

=====

Final solution based in the response:

   getTitle: function getTitle() {

I have a bootstrap modification for a tooltip. and process my js with webpack/babel

A simplification of my code could be:

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

This should be the element, bootstrap will call this function with:

   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
    }

The important line is:

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

Where $e[0] is the tooltip dom element.

Well, when I process this with babel the result change this by _this a before he assign _this to a value that he consider is the real this.

The question: Can I avoid this conversion in babel for this specific function?

=====

Final solution based in the response:

   getTitle: function getTitle() {

• javascript
• ecmascript-6
• webpack
• babeljs

• 1 Side note: There's no need for the outermost () around your arrow function, title: () => { /* ... */ } is fine. – T.J. Crowder Commented Jul 15, 2016 at 17:51
• You should not use an arrow as this is going COMPLETELY against the spec. Soon (or whenever it happens) babel won't need to transpile arrow function anymore and your code will break. Arrow functions are not only a shorthand for function. They have a different semantic. If you don't want that semantic you should not use it in that case. – Hugo Dozois Commented Jul 15, 2016 at 18:04
• Related: Arrow function vs function declaration / expressions: Are they equivalent / exchangeable? – Felix Kling Commented Jul 17, 2016 at 11:44

1 Answer 1

You've used an arrow function, which by definition closes over the this where it's created.

If you don't want that behavior, don't use an arrow function:

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

Re your edit:

I want to use the arrow function. I prefer do a babel exclusion than an eslint exclusion.

You can't, not with that getTitle, since the only way it gives you access to the element is by setting this. Arrow functions by their nature have a fixed this (by not having one at all; they close over the one in the execution context where they were created, which is fixed). You cannot use an arrow function for any function where you want this determined by the caller, such as in this case.

Your choices are either to modify Bootstrap, or use a normal function. The latter seems the more reasonable thing to do.