なぜ次のバックボーンビューコードで未定義のエラーですか？

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）; をに、 を、に、未定義。 .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' 

バベルがES6仕様に従うようにコードをtranspileますので、それは失敗だ理由があります。ここ

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

あなたは矢印の機能についての詳細を読むことができますし、this値：バベルコードをtranspiles方法の違いで

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); 
    }) 
    }); 
}) 

ルック

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