相关疑难解决方法(0)

我有一个构造函数,它注册一个事件处理程序:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);

但是,我无法data在回调中访问已创建对象的属性.它看起来this并不是指创建的对象,而是指另一个对象.

我还尝试使用对象方法而不是匿名函数:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

但它表现出同样的问题.

如何访问正确的对象？

建立:

• BabelJS(es2015,反应,阶段-1)
• 的WebPack
• React/redux

CommonJS和ES6的新功能.我知道对象实例和方法的静态容器之间的区别,但我不确定它们在分离到模块时的行为方式.所以我想知道返回一个实例之间的区别是什么(这个模式是否有效？):

// StateParser.js

class StateParser {
    constructor() {
     }

     method1() {
        ...
     }

}

export default new StateParser()

并导出const方法:

// StateParser.js

let state = {
}

export const method1 = () => { ... }

1. 方法A:每次导入时都会有新的实例吗？

2. 方法B:使用对象解构的能力之一是:

   import { method1 } from '../utils/StateParser.js';
   

   Run Code Online (Sandbox Code Playgroud)

   然后使用method1,就好像它存在于本地？

3. 方法A:在构造函数中初始化状态的能力有哪些好处？

所以基本上我不确定何时使用哪个实用程序类,并希望您的输入.

我正在尝试为当前项目的交互式日历编写ES6类.

该类看起来类似于以下内容:

class Calendar {

constructor (s) {

    this.eventButtons = s.eventButtons;
    this.eventButtons.forEach(button => button.addEventListener('click', this.method1);
    this.eventBoxes = s.eventBoxes;


method1 (e) {
    e.preventDefault();
    this.method2(e.target.href);
}

method2 (url) {
    console.log(url);
}

}


export default Calendar;

我知道'this'关键字的上下文已从构造函数更改为已在method1函数中单击的按钮.但是我不知道如何将按钮和构造函数的上下文保持在同一个函数中.我尝试将按钮事件侦听器代码更改为以下内容:

this.eventButtons.forEach(button => button.addEventListener('click', this.method1).bind(this);

但这只是将'this'关键字的上下文切换到构造函数而不是按钮.我需要在我的功能中使用它们.

有任何想法吗？我希望这是一个非常普遍的问题？