箭头函数本身没有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
就这样子,欢迎指正~
网友评论