写点什么

ES6 之箭头函数

作者:bo
  • 2022 年 7 月 16 日
  • 本文字数:551 字

    阅读完需:约 2 分钟

ES6之箭头函数

看上面这张图片,你的第一想法会是什么?是 2?是 1?还是其他答案?

箭头函数

那么我先简单的介绍一下箭头函数,箭头函数是 ES6 推出的函数,它没有 thisarguments。把上面图片的代码放下来,我们逐步分析。

示例

let a = 1;let obj = {    a: 2,    fn: () => {        setTimeout(() => {            console.log(this.a);        })    }}obj.fn();
复制代码

这段代码一共涉及到三个知识点:箭头函数,作用域,let

解题思路

  1. 调用了 obj.fn(),我们的视线来到了 console.log(this.a);

  2. 在定时器的箭头函数中,并没有 this,需要向上层作用域寻找

  3. 这时候我们把目光移到 fn 的箭头函数上,但是这里也没有 this,再向上层作用域寻找

  4. 有些人到这里就会认为,this 指向的是 obj,this.a 就是 2,然而并不是。obj 是个对象,它的大括号并不是一个作用域。所以 fn 箭头函数的上层作用域就是 window

  5. 一部分人认为答案是 1,就是认为 let 定义的变量在 window 上,然而也不是。通过 window.a 能发现,let 并不能将变量定义在 window 上。

  6. 到了这里我们知道,this 指向的是 window,let 定义的 a 不在 window,那么结果就是 undefined

举一反三

let a = 1;let obj = {    a: 2,    fn: () => {        setTimeout(() => {            console.log(a);        })    }}obj.fn();
复制代码

相比之前,我们打印的是 a ,那么结果会是什么呢?😘

发布于: 刚刚阅读数: 4
用户头像

bo

关注

还未添加个人签名 2022.07.11 加入

还未添加个人简介

评论

发布
暂无评论
ES6之箭头函数_前端_bo_InfoQ写作社区