美文网首页ES6
箭头函数

箭头函数

作者: 你好岁月神偷 | 来源:发表于2021-06-10 09:16 被阅读0次

    箭头函数本身没有this, 由箭头函数声明时所处作用域决定。

    作用域(两个): ① 函数作用域   ② 全局作用域

    箭头函数特点:

    一、箭头函数的this是静态的、是由函数声明所处的作用于决定的。

    ※※※ 举例证明:图1  源码地址 https://codepen.io/enjoykai/pen/ExwQbRw?editors=0011

    二、箭头函数不能作为构造函数来实例化对象

    ※※※ 举例证明:图2  会导致控制台报错( Persion is not a constructor )

    三、箭头函数中不能使用argumnets参数

    ※※※ 举例证明:图3   会导致控制台报错( arguments is not defined )

    四、箭头函数的简写,分两种情况,如下:

        1、省略小括号,当参数有且只有一个的时候。

        2、省略大括号,当代码题只有一条语句的时候。(此时 return 必须去掉,而且语句的执行结果必须是函数的返回结果)


    图1 图2 图3

    var num = 100;

    var obj = {

          num: 20,

          fun: () => {

              console.log(this.num) 

           }

    }

    调用方式:

    方式一:obj.fun() // 100

        解析:为什么结果是100,而不是20 。因为箭头函数的作用域是由当前箭头函数所处的作用域决定的, 目前已知的作用域有两个:全局作用域、函数作用域。

        普通函数的 this 指向: 谁调用 this 就指向谁

        箭头函数的 this 指向:由所在箭头函数的作用域决定

    方式二:① var fn = obj.fun;     ② fn() // 100

        解析: obj.fun ==》 等同于将箭头函数 fun 赋值给 一个变量 fn, 而 声明的变量 fn 是作为全局 window 的属性,所有 this 指向的是 window; 结果就是100

    注意:当 var num = 100; 声明变量的方式 由 var 变成 let 的话,再用以上方式调用时,

    函数 fun 中打印 this.num 的结果就是 // undefined

    就这样子,欢迎指正~

    相关文章

      网友评论

        本文标题:箭头函数

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