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

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);
}