React Native 箭头函数this

ES6 this :this的最终指向的是那个调用它的对象

重要:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个。

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定
this
var Person = {
  age = 0;
  function growUp() {
    return this.age++;  // this指向Person对象
  };
}
//调用
var man = new Person();
man.growUp();   //通过Person对象来调用growUp(), 所以this指向的是Person对象
this的默认的指向是window
function Person() {
  age = 0;
  function growUp() {
    return this.age++;  // this指向window/undefined/grobal
  };
}
//上面的这种情况并不能找到age这个变量,所以会报undefined错误
可以通过新增一个变量来指向期望的 this 对象,然后将该变量放到闭包(函数A内部声明了个函数B,函数B引用了函数B之外的变量,并且函数A的返回值为函数B的引用。那么函数B就是闭包函数)中来解决。
function Person() {
  var that = this;
  that.age = 0; //that 指向的就是对象自己
  function growUp() {
    that.age++; //that指向的是Person对象
  };
}
箭头函数完全修复了this的指向,this总是指向词法作用域(自动寻找作用域), 箭头函数与正常函数最大的区别是使得this从正常情况下的动态作用域(调用时的上下文)变成了静态作用域(根据定义位置确定值,也就是词法作用域).
function Person() {
  age = 0;
  growUp = ()=> this.age++ ; // this指向Person对象
}
// 箭头函数中的`this`寻找到当前对象的`age`变量,所以显示结果正常

var growUp = ()=>{
  console.log(this)
}
//等同于
var growUp = function(){
    console.log(this)
}.bind(this);

箭头函数在定义时就已经确定了this的作用域

情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象

this问题详解

你可能感兴趣的:(React Native 箭头函数this)