Question

我刚开始学习ES6＆amp; ReactJS来自ES5背景。

我一直在用这个ES6代码摸不着头脑。

代码＃1：

class App extends Component {

    constructor(props) {
       super(props);
       this.state = { videos: [] };

        YTSearch({key: API_KEY, term: 'surfboard'}, function(data) {
            this.setState({ videos: data }); **//I GET AN ERROR HERE!!**
        });
    }

    render() {
        return (
            <div>
                <SearchBar />
            </div>
        );
    }
}

我在error

中得到this.setState

bundle.js:19826 TypeError: Cannot read property 'setState' of undefined(…)

但是，如果我这样做

代码＃2：

YTSearch({key: API_KEY, term: 'surfboard'}, (data) => {
    this.setState({ videos: data }); **//I GET AN ERROR HERE!!**
});

这很好用。

我可以理解，在第一种情况下，一般this中function的范围在回调中是不同的（如AJAX）。但是，在例子＃2中，这又如何变化？

Answer 1

在ES6中编写胖箭头/ lamda函数时，会保留this上下文（这就是您的第二个示例有效的原因）。

但在您的第一个示例中，您使用了function() {}，this上下文未被保留，因此＆＃39; this＆＃39;函数内部并不是你期望的函数，它是函数的新上下文。

Answer 2

if绑定设置为callsite正常function语句，但fat arrows callsite未动态设置this。

有人说;在您阅读本文之后，函数中的function hi(){ var name; $('element').on('action', function(){this.name = 'hi'}); //now the name var is undefined; //instead, the object (element) has a property called name with 'hi'. } 是您所期望的。在JQuery函数中非常有用，因为通常，你可以这样做：

常规功能

function hi(){
    var name;
    $('element').on('action', () => this.name = 'hi');

    //now the name var is 'hi';
    //the object (element) has no property 'name' now.
}

胖箭

npm install

这个＆＃39;的背景在ES6中

2 个答案: