Question

我想知道为什么如果我将此行{this.increaseQty.bind(this)}修改为{this.increaseQty}，控制台会提示未捕获的TypeError：无法读取属性＆＃39; setState＆＃39;未定义的而不是未捕获的TypeError：this.setState不是函数（...） ??如果没有设置绑定，那么this不应该是窗口对象吗？

export default class CartItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            qty: props.initialQty,
            total: 0
        };
    }
    componentWillMount() {
        this.recalculateTotal();
    }
    increaseQty() {
        this.setState({qty: this.state.qty + 1}, this.recalculateTotal);
    }
    decreaseQty() {
        let newQty = this.state.qty > 0 ? this.state.qty - 1 : 0;
        this.setState({qty: newQty}, this.recalculateTotal);
    }
    recalculateTotal() {
        this.setState({total: this.state.qty * this.props.price});
    }
    render() {
        return <article className="row large-4">
            <figure className="text-center">
                <p>
                    <img src={this.props.image}/>
                </p>
                <figcaption>
                    <h2>{this.props.title}</h2>
                </figcaption>
            </figure>
            <p className="large-4 column"><strong>Quantity: {this.state.qty}</strong></p>

            <p className="large-4 column">
                <button onClick={this.increaseQty.bind(this)} className="button success">+</button>
                <button onClick={this.decreaseQty.bind(this)} className="button alert">-</button>
            </p>

            <p className="large-4 column"><strong>Price per item:</strong> ${this.props.price}</p>

            <h3 className="large-12 column text-center">
                Total: ${this.state.total}
            </h3>

        </article>;
    }
}

Answer 1

如果您没有将某个函数作为方法调用（并且它没有绑定，并且您没有使用调用或应用），那么该函数内的this值将为undefined IF：

你处于严格模式
您在ES2015（严格模式默认开启）

否则它将成为全局对象。

另请注意，某些主机对象（例如setTimeout）有自己的特定行为，用于定义在调用回调时使用的this值。

当没有设置bind时，为什么`this`不是指窗口对象？

1 个答案: