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

    ES6 this :this的最终指向的是那个调用它的对象 重要:this的指向在函数创建的时候是决定不了的,在调...

  • ReactNative 入坑

    react-react-native-的es5-es6写法对照表 箭头函数中this的用法.md 1.watchm...

  • react native 知识点积累

    1.绑定this 如果直接写成 箭头函数,就不用绑定this 2.react native 默认导(出)入和普通导...

  • React Native之箭头函数和延展操作符(...)

    箭头函数 在我们学习React Native的过程中,我们经常会遇到"=>"这样形式的书写,如下: 从以上代码中我...

  • React入门

    箭头函数与普通函数区别 React:React 起源于 Facebook ,诞生说2013,4React主要用于构...

  • React入门

    箭头函数与普通函数区别 React:React 起源于 Facebook ,诞生说2013,4React主要用于构...

  • react性能优化 不要再component的props中使用箭头函数或者bind,因为每次使用箭头函数和bind...

  • React Native动画效果

    用Native 做右边的箭头旋转效果,应该是件很简答的事情,但是用React Native就需要花费时间考虑下。由...

  • React-Natvie 配置教程 初次使用

    React-Native官网 React Native 或者中文:react native - react nat...

  • ES6新特性5:函数的扩展之箭头函数

    箭头函数在ES6中最常用的特性,学习好至关重要,特别在Vue项目和React项目。 箭头函数:ES6中使用(=>)...

网友评论

    本文标题:React Native 箭头函数this

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