React Native 箭头函数this

作者: Nickyzhang | 来源:发表于2017-05-07 09:53 被阅读604次
    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

        本文链接:https://www.haomeiwen.com/subject/zflutxtx.html