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

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