如何将箭头函数重写为常规函数并绑定上下文？

Question

我正在查看 ES6 中引入的箭头函数。如果我有这段带有函数 "addNinja":

的代码

 addNinja=(ninja)=>{
         ninja.id=Math.random();
         let ninjas=[...this.state.ninjas,ninja];
         this.setState({
             ninjas:ninjas
         })
        console.log(this.state);

 }

有什么办法可以不用箭头函数来写这个吗？

如果我考虑到这两个是相同的...

x=>x*2 

function(x){
return x*2;
}

我假设我可以像下面的代码一样重写 addNinja 函数，但我得到一个错误。

 addNinja=function(ninja){
         ninja.id=Math.random();
         let ninjas=[...this.state.ninjas,ninja]; 
         this.setState({
             ninjas:ninjas
         })
        console.log(this.state);

 }

Answer 1

function() {} 语法没有将局部上下文绑定到函数，这就是 this.setState 或 this.state.something 失败的原因，因为 this 是由全局词法定义的上下文，并且 state 不存在于其中。如果你想实现这个你必须手动绑定函数：

constructor(props) {
  this.addNinja = this.addNinja.bind(this);
}

addNinja=function(ninja){
         ninja.id=Math.random();
         let ninjas=[...this.state.ninjas,ninja]; 
         this.setState({
             ninjas:ninjas
         })
        console.log(this.state);
}

如何将箭头函数重写为常规函数并绑定上下文？

How to re-write arrow function to regular function and bind context?

javascript

ecmascript-6

arrow-functions