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'

它失败的原因是因为Babel会将代码转换为遵循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);
    })
  });
})

看看babel如何转换代码的区别：

您可以在此处详细了解箭头功能和this值：

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

为什么以下骨干视图代码中的未定义错误？

1 个答案: