摘要:但是因为箭头函数没有自己的,它的其实是继承了外层执行环境中的,且指向永远不会随在哪里调用被谁调用而改变,所以箭头函数不能作为构造函数使用,或者说构造函数不能定义成箭头函数,否则用调用时会报错报错箭头函数没有自己的箭头函数没有自己的对象。
这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法,因为基本语法比较好理解,我们用示例做简单介绍即可。之后,我们重点来讨论一下箭头函数与普通函数之间的区别。
本文已同步至我的个人主页。欢迎访问查看更多内容!如有错误或遗漏,欢迎随时指正探讨!谢谢大家的关注与支持!
一、基本语法ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子:
// 箭头函数 let fun = (name) => { // 函数体 return `Hello ${name} !`; }; // 等同于 let fun = function (name) { // 函数体 return `Hello ${name} !`; };
可以看出,定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字,采用箭头=>来定义函数。函数的参数放在=>前面的括号中,函数体跟在=>后的花括号中。
关于箭头函数的参数:
① 如果箭头函数没有参数,直接写一个空括号即可。
② 如果箭头函数的参数只有一个,也可以省去包裹参数的括号。
③ 如果箭头函数有多个参数,将参数依次用逗号(,)分隔,包裹在括号中即可。
// 没有参数 let fun1 = () => { console.log(111); }; // 只有一个参数,可以省去参数括号 let fun2 = name => { console.log(`Hello ${name} !`) }; // 有多个参数 let fun3 = (val1, val2, val3) => { return [val1, val2, val3]; };
关于箭头函数的函数体:
① 如果箭头函数的函数体只有一句代码,就是简单返回某个变量或者返回一个简单的JS表达式,可以省去函数体的大括号{ }。
let f = val => val; // 等同于 let f = function (val) { return val }; let sum = (num1, num2) => num1 + num2; // 等同于 let sum = function(num1, num2) { return num1 + num2; };
② 如果箭头函数的函数体只有一句代码,就是返回一个对象,可以像下面这样写:
// 用小括号包裹要返回的对象,不报错 let getTempItem = id => ({ id: id, name: "Temp" }); // 但绝不能这样写,会报错。 // 因为对象的大括号会被解释为函数体的大括号 let getTempItem = id => { id: id, name: "Temp" };
③ 如果箭头函数的函数体只有一条语句并且不需要返回值(最常见是调用一个函数),可以给这条语句前面加一个void关键字
let fn = () => void doesNotReturn();
箭头函数最常见的用处就是简化回调函数。
// 例子一 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x); // 例子二 // 正常函数写法 var result = [2, 5, 1, 4, 3].sort(function (a, b) { return a - b; }); // 箭头函数写法 var result = [2, 5, 1, 4, 3].sort((a, b) => a - b);二、箭头函数与普通函数的区别 1、语法更加简洁、清晰
从上面的基本语法示例中可以看出,箭头函数的定义要比普通函数定义简洁、清晰得多,很快捷。
2、箭头函数不会创建自己的this(重要!!深入理解!!)我们先来看看MDN上对箭头函数this的解释。
箭头函数不会创建自己的this,所以它没有自己的this,它只会从自己的作用域链的上一层继承this。
箭头函数没有自己的this,它会捕获自己在定义时(注意,是定义时,不是调用时)所处的外层执行环境的this,并继承这个this值。所以,箭头函数中this的指向在它被定义的时候就已经确定了,之后永远不会改变。
来看个例子:
var id = "Global"; function fun1() { // setTimeout中使用普通函数 setTimeout(function(){ console.log(this.id); }, 2000); } function fun2() { // setTimeout中使用箭头函数 setTimeout(() => { console.log(this.id); }, 2000) } fun1.call({id: "Obj"}); // "Global" fun2.call({id: "Obj"}); // "Obj"
上面这个例子,函数fun1中的setTimeout中使用普通函数,2秒后函数执行时,这时函数其实是在全局作用域执行的,所以this指向Window对象,this.id就指向全局变量id,所以输出"Global"。
但是函数fun2中的setTimeout中使用的是箭头函数,这个箭头函数的this在定义时就确定了,它继承了它外层fun2的执行环境中的this,而fun2调用时this被call方法改变到了对象{id: "Obj"}中,所以输出"Obj"。
再来看另一个例子:
var id = "GLOBAL"; var obj = { id: "OBJ", a: function(){ console.log(this.id); }, b: () => { console.log(this.id); } }; obj.a(); // "OBJ" obj.b(); // "GLOBAL"
上面这个例子,对象obj的方法a使用普通函数定义的,普通函数作为对象的方法调用时,this指向它所属的对象。所以,this.id就是obj.id,所以输出"OBJ"。
但是方法b是使用箭头函数定义的,箭头函数中的this实际是继承的它定义时所处的全局执行环境中的this,所以指向Window对象,所以输出"GLOBAL"。(这里要注意,定义对象的大括号{}是无法形成一个多带带的执行环境的,它依旧是处于全局执行环境中!!)
上面的例子,就完全可以说明箭头函数继承而来的this指向永远不变。对象obj的方法b是使用箭头函数定义的,这个函数中的this就永远指向它定义时所处的全局执行环境中的this,即便这个函数是作为对象obj的方法调用,this依旧指向Window对象。
4、.call()/.apply()/.bind()无法改变箭头函数中this的指向.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向,但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向,虽然这么做代码不会报错。
var id = "Global"; // 箭头函数定义在全局作用域 let fun1 = () => { console.log(this.id) }; fun1(); // "Global" // this的指向不会改变,永远指向Window对象 fun1.call({id: "Obj"}); // "Global" fun1.apply({id: "Obj"}); // "Global" fun1.bind({id: "Obj"})(); // "Global"5、箭头函数不能作为构造函数使用
我们先了解一下构造函数的new都做了些什么?简单来说,分为四步:
① JS内部首先会先生成一个对象;
② 再把函数中的this指向该对象;
③ 然后执行构造函数中的语句;
④ 最终返回该对象实例。
但是!!因为箭头函数没有自己的this,它的this其实是继承了外层执行环境中的this,且this指向永远不会随在哪里调用、被谁调用而改变,所以箭头函数不能作为构造函数使用,或者说构造函数不能定义成箭头函数,否则用new调用时会报错!
let Fun = (name, age) => { this.name = name; this.age = age; }; // 报错 let p = new Fun("cao", 24);6、箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值。
// 例子一 let fun = (val) => { console.log(val); // 111 // 下面一行会报错 // Uncaught ReferenceError: arguments is not defined // 因为外层全局环境没有arguments对象 console.log(arguments); }; fun(111); // 例子二 function outer(val1, val2) { let argOut = arguments; console.log(argOut); // ① let fun = () => { let argIn = arguments; console.log(argIn); // ② console.log(argOut === argIn); // ③ }; fun(); } outer(111, 222);
上面例子二,①②③处的输出结果如下:
很明显,普通函数outer内部的箭头函数fun中的arguments对象,其实是沿作用域链向上访问的外层outer函数的arguments对象。
可以在箭头函数中使用rest参数代替arguments对象,来访问箭头函数的参数列表!!
7、箭头函数没有原型prototypelet sayHi = () => { console.log("Hello World !") }; console.log(sayHi.prototype); // undefined8、箭头函数不能用作Generator函数,不能使用yeild关键字
这一点等到讲解Generator函数的时候我们在深入讨论。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103132.html
摘要:基本用法在中允许使用来定义函数,如下就等同于从上面可以看出,在箭头左侧的是代表参数,若参数只有一个,可以省略,箭头右侧的表示函数代码块,若代码块里面是个返回值,则可以省略不写无参数情况若箭头函数不需要参数,则左侧用代替,如下无参数情况无参数 基本用法 在ES6中允许使用 => 来定义函数,如下: var f = a => a; console.log(f(1)); //1 就...
摘要:有传闻说,箭头函数的语法,是受到了的影响,并且它与中的语法一样,共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值,其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。 箭头函数 1. 简单的定义: 胖箭头函数 Fat arrow functions,又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,...
摘要:箭头函数简单的定义胖箭头函数,又称箭头函数,是一个来自又称的全新特性。箭头函数是新增加的一个特性。使用箭头函数的注意点箭头函数在参数和箭头之间不能换行。值得注意的一点就是对象的指向是可变的,但在箭头函数内是固定的。 箭头函数 1. 简单的定义: 胖箭头函数 Fat arrow functions,又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,...
摘要:第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局,使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API...
摘要:对象解构对象解构语法在赋值语句的左侧使用了对象字面量,例如代码中,的值被存储到本地变量中,的值则存储到变量中。当使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为。 现在ES6在很多项目中大量使用。最近我也花时间看了一下《Understanding ECMAScript6》的中文电子书。在这里总结了一些在实际开发中常用的新特性。 块级作用域 在ES6...
阅读 2683·2023-04-25 20:28
阅读 1851·2021-11-22 09:34
阅读 3688·2021-09-26 10:20
阅读 1836·2021-09-22 16:05
阅读 3086·2021-09-09 09:32
阅读 2504·2021-08-31 09:40
阅读 2102·2019-08-30 13:56
阅读 3322·2019-08-29 17:01