Почему неопределенная ошибка в следующих кодах просмотра позвоночника?

Question

const _ = require('underscore'); 

module.exports = (() => { 
    const PANEL_HEADER_HEIGHT = 40; 

    return Frame.extend({ 

    ... 
    _handleSearch: _.debounce(ev => { 
     if (ev.keyCode !== 9) { 
     const searchValue = $(ev.target).val(); 
     this.model.filterData(searchValue); 
     } 
    }, 1000), 
    ... 
})(); 

this.model.filterData (searchValue); преобразован в undefined.model .filterData (searchValue); в консоли.

Любая идея?

Answer 1

Кажется, что это работает, если вы переписываете метод без использования функции стрелки.

https://jsfiddle.net/CoryDanielson/2dt30fhb/

var MyView = Backbone.View.extend({ 
    name: 'MY-VIEW', 
    doStuff: _.debounce(function() { 
     alert(this.name); 
    }, 1000) 
}); 

var view = new MyView(); 
view.doStuff(); 
// This will alert 'MY-VIEW' 

Причина это провал, потому что Бабель будет transpile код, чтобы следовать спецификации ES6.

module.exports = (() => { 
    // this = undefined, because module.exports is global. 
    return Frame.extend({ 
    // inherits this from above, undefined 
    _handleArrowFunction: _.debounce(ev => { 
     console.log(this); 
    }), 
    _handleRegularFunction: _.debounce(function() { 
     console.log(this); 
    }) 
    }); 
}) 

Посмотрите на разницу в том, как столпотворение transpiles код:

• module.exports as an arrow function
• module.exports as a regular function

Вы можете прочитать больше о функциях стрелок и значение this здесь:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions