React:JS中的this和箭头函数

JS中的this和纯面向对象（java，c++）中的this有点不大一样，其原因就是作用域不同，导致JS中的this的指向不明确，在java中的this指当前对象的this或当前类的this，在JS中function(){}里面没有特殊指定this的指向，这里的this时指向Window，但是在严格模式下，function(){return this}里面的this是undefined，箭头函数里面的this反而是Window，我们来看个例子(为了简单点，代码下面的>就是控制台的输入,<就是控制台的输出)：

//在控制台先输入这个函数，
function Person(){
this.age = 0;
setInterval(function growUp() {
//此时的this时指向window，并不指向上面的this.age
this.age++;
},1000)
}

>var p = new Person()
>p
//因为this时指向window，并不指向上面的this.age，所以没有变

<Person {age: 0}
//age是全局变量，没有给初始值，++后就变成Not a Number
>age
NaN
//给age赋初值，下面就开始++le
age = 0
0
age
5
age
8
age
10
age
14
age
16

以前流行的一种解决方法

//在控制台先输入这个函数，
function Person(){
//定义一个局部变量把当前的this放在里面，下面函数就可以使用了
let that = this;
this.age = 0;
setInterval(function growUp() {
//此时的this时指向window，并不指向上面的this.age
that.age++;
},1000)
}
//一切正常
>let p = new Person();
>p
<Person {age: 0}
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}

只有这一种解决方法？这时候箭头函数该登场了，箭头函数不会创建自己的

this

；它使用封闭执行上下文的

this

值。因此，在下面的代码中，传递给

setInterval

的函数内的

this

与封闭函数中的

this

值相同，简单来说，箭头函数没有自带this，他的this是来自上一级，所以刚刚好解决这个问题：

function Person(){
this.age = 0;

setInterval(() => {
this.age++; // |this| 正确地指向person 对象
}, 1000);
}
undefined
>let p = new Person();
<undefined
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}

我们再看写栗子：

function f(){console.log(this.a)}
>f()
<undefined
//此时call传入参数，这个参数可以理解为this,但对this不造成影响
>f.call({a:1})
<1
>f.apply({a:1})
<1

还有个要记的，当箭头函数要返回一个对象时,{}要用小括号括起来，比如：f = () => ({}) ，大括号表示一个对象

更多箭头函数例子：API