相关疑难解决方法(0)

如何在回调中访问正确的`this`?

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

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);
Run Code Online (Sandbox Code Playgroud)

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

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

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

MyConstructor.prototype.alert = function() {
    alert(this.name);
};
Run Code Online (Sandbox Code Playgroud)

但它表现出同样的问题.

如何访问正确的对象?

javascript callback this

1309
推荐指数
12
解决办法
36万
查看次数

ES6代码样式最佳实践

最近我开始学习ReactJS,因此 - ES6.我对ES5非常熟悉,但有些事情对我来说并不是那么清楚.

示例1:方法语法

以下两种方法有什么区别?

export class InvoiceForm extends React.Component {
    methodName1() {
    }

    methodName2 = () => {

    };
}
Run Code Online (Sandbox Code Playgroud)

示例2:外部的类属性

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
Run Code Online (Sandbox Code Playgroud)

propTypes在课外.但为什么?我来自python和我一样,以下更正确

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string
  }
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-5 ecmascript-6

6
推荐指数
1
解决办法
1145
查看次数

标签 统计

javascript ×2

callback ×1

ecmascript-5 ×1

ecmascript-6 ×1

this ×1