找不到箭头函数的this?试试用Babel

大家都知道普通函数里的this指向最后一个调用他的对象上,箭头函数里的this指向当前作用域的上一个,但是在比较复杂的代码结构中,很多同学在日常工作或面试中总是无法很快判断箭头函数的this指向。

其实我们可以将ES6中的箭头函数通过Babel转为ES5的普通函数来看,就可以发现转义后的箭头函数的this就已经确定,如:

javascript 复制代码
var b=11;
var obj={
 b:22,
 say:()=>{
   console.log(this.b);
 }
}
obj.say(); //输出的值为11

ES5后:

javascript 复制代码
"use strict";

var _this = void 0;
var b = 11;
var obj = {
  b: 22,
  say: function say() {
    console.log(_this.b);
  }
};
obj.say(); //输出的值为11

若当前在浏览器环境,则_this指向window,那么当下次碰到箭头函数时,我们是否可以往箭头函数的上层作用域找到第一个地方可以写下var _this = this的语句,那么这里的this就是这个箭头函数的this指向。

例子

再看一个复杂一点的例子:

javascript 复制代码
var str = '111';
const obj = {
    str:'obj',
    fn: ()=>{
    	console.log(this.str);    
    },
    fn2: function(){ // fn的上一层是fn2
    	console.log(this.str)
          return {
            str: 'newObj',
            fn3: ()=>{
            console.log(this.str);    
          }    
      }
    }
}
obj.fn() // 输出 111
obj.fn2().fn3(); //输出obj,obj

笔者在obj定义了一个箭头函数fn,在最外层可以定义他的this,所以fnthis指向window

我们在一个返回的对象中定义了一个箭头函数fn3,在fn3的上面的fn2可以定义他的this,而fn2是被obj调用的,所以fnthis指向obj,我们来看一下转为ES5是怎样:

javascript 复制代码
"use strict";

var _this = void 0;
var str = '111';
var obj = {
  str: 'obj',
  fn: function fn() {
    console.log(_this.str);
  },
  fn2: function fn2() {
    var _this2 = this;
    // fn的上一层是fn2
    console.log(this.str);
    return {
      str: 'newObj',
      fn3: function fn3() {
        console.log(_this2.str);
      }
    };
  }
};
obj.fn(); // 输出 111
obj.fn2().fn3(); //输出obj,obj

再来看一个例子:

javascript 复制代码
let object = {
  name: "小强",
  x: 50,
  put() {
    setTimeout(
      () => {
        console.log(this.x);
        console.log(this.name);
      }, 500);
  },
};
object.put(); //输出结果:50  小强

我们直接找到setTimeout外面的put函数,在里面写下var _this = this,把_this带入箭头函数的this,就有答案了:

javascript 复制代码
"use strict";

var object = {
  name: "小强",
  x: 50,
  put: function put() {
    var _this = this;
    setTimeout(function () {
      console.log(_this.x);
      console.log(_this.name);
    }, 500);
  }
};
object.put(); //输出结果:50  小强

箭头函数嵌套箭头函数

当箭头函数里面还有箭头函数时,想象一下把第二个箭头函数的this定义在fn2中,那fn2还是箭头函数,是不是还得往上走,最后把三个箭头函数的this都定义在fn中,fnobj调用,所以this都指向obj

javascript 复制代码
const obj = {
  a: '222',
  fn: function () {
    return {
      fn2: () => {
        console.log(this.a)  // 222

        return () => {
          console.log(this.a)  // 222

          return () => {
            console.log(this.a) // 222
          }
        }
      }
    }
  }
}
obj.fn().fn2()()()  // 222  222  222

看看转为ES5以后:

javascript 复制代码
"use strict";

var obj = {
  a: '222',
  fn: function fn() {
    var _this = this;
    return {
      fn2: function fn2() {
        console.log(_this.a); // 222

        return function () {
          console.log(_this.a); // 222

          return function () {
            console.log(_this.a); // 222
          };
        };
      }
    };
  }
};
obj.fn().fn2()()(); // 222  222  222

感兴趣的同学可以用在线工具babeljs.io/replES6ES5

总结

通过这些例子,大家也能看出来箭头函数的this是在写完代码就已经确定了,而不是运行的时候确定的,希望我的文章能给大家带来一点帮助

欢迎点赞、收藏、转发~

相关推荐
北城以北88885 分钟前
ES6(二)
前端·javascript·es6
朕的剑还未配妥19 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼24 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥24 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢27 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33035 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦35 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
U.2 SSD42 分钟前
Echart仪表盘示例
javascript·echarts
qq_18417767743 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost1 小时前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求