箭头函数没有自己的this，arguments，super或new.target。箭头函数适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
1.基础语法
1 （param1, param2, ..., paramN） => { statements }
1 (param1, param2, ..., paramN) => expression 2 //相当于： （param1， param2, ..., paramN） => {return expression} 3 //当函数体内只有一句代码时，retrun 和 {}可以省略 4 5 //当只有一个参数时，圆括号也是可选的, 可省略 6 （singleParam） => {statements} 7 singleParam => {statements} 8 //没有参数的函数应该写成一对圆括号 9 () => {statements}
//空的箭头函数返回undefined
10 let empty = () => {};
1.1.返回对象时要加括号
1 params => ({foo: bar}) //返回对象字面量表达式
1.2.支持剩余参数和默认参数
1 （param1, param2, ...rest） => {statements} 2 (param1=defaultValue1, param2, ..., paramN=defaultValueN) => {statements}
1.3.支持参数列表解构
1 let f = ([a, b] = [1, 2], {x: c} = {x : a + b}) => a + b + c; 2 f(); //6
2.箭头函数不绑定this
普通函数是根据它是如何被调用的来定义这个函数的this值
- 如果该函数是一个构造函数，this指向一个新的对象(实例对象）
- 在严格模式下的函数调用，this指向undefined
- 如果该函数是一个对象的方法，则它指向这个对象
2.1箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
1 function Person() { 2 this.age = 0; 3 4 setInterval(() => { 5 this.age++; // this 指向p 实例 6 }, 1000); 7 } 8 9 var p = new Person();
2.2通过 call 或 apply 调用时
由于箭头函数没有自己的 this，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），它们的第一个参数会被忽略。(这种现象对bind方法也成立)
1 var adder = { 2 base: 1, 3 4 add: function(a) { 5 var f = v => v + this.base; 6 return f(a); 7 }, 8 9 addThruCall: function(a) { 10 var f = v => v + this.base; 11 var b = { 12 base: 2 13 }; 14 return f.call(b, a); 15 } 16 }; 17 18 console.log(adder.add(1)); //2 19 console.log(adder.addThruCall(1)) // 2
3.不绑定arguments
箭头函数不绑定Arguments对象。不可以使用arguments对象，该对象在函数体内不存在。
1 function foo(n) { 2 var f = () => arguments[0] + n; //隐式绑定 foo 函数的 arguments 对象。arguments[0] 是 n, 即传给foo函数的第一个参数 3 return f(); 4 } 5 6 foo(1); //2 7 foo(2); //4 8 foo(3); //6 9 foo(3,2); //6
在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。
1 function foo(arg) { 2 var f = (..args) => args[0]; 3 return f(arg); 4 } 5 6 foo(1); //1 7 8 function foo(arg1, arg2) { 9 var f = (...args) => args[1]; 10 return f(arg1, arg2); 11 } 12 13 foo(1, 2); //2
4.箭头函数不能用作构造函数，和new一起使用会抛出错误。
5.箭头函数没有prototype属性
6.箭头函数不能用作函数生成器，因为yield关键字通常不能再箭头函数中使用(除非是嵌套在允许使用的函数内)。
7.箭头函数不适合用作对象的方法
1 'use strict'; 2 var obj = { 3 i: 10, 4 b: () => console.log(this.i, this), 5 c: function() { 6 console.log(this.i, this); 7 } 8 } 9 10 obj.b(); //undefined, window{...} 11 obj.c(); //10, Object{...} 12 13 14 var obj = { 15 a: 10 16 }; 17 18 Object.defineProperty(obj, "b", { 19 get: () => { 20 console.log(this.a, typeof this.a, this); 21 return this.a + 10; 22 //this 代表全局对象 'window', 因此，'this.a' 返回 'undefined' 23 } 24 }); 25 obj.b; //undefined "undefined" Window{postMessage: f, blur: f, focus: ƒ, close: ƒ, frames: Window, …}
8.箭头函数的解析顺序
箭头函数具有与常规函数不同的特殊运算符优先级解析规则
1 let callback; 2 3 callback = callback || function() {}; //ok 4 5 callback = callback || () => {}; //SyntaxError: invalid arrow-function arguments 6 7 callback = callback || (() => {}); //ok
9.箭头函数使用三元运算符：
1 var simple = a => a > 15 ? 15 : a; 2 3 simple(16); //15 4 simple(10); //10 5 6 7 let max = (a, b) => a > b ? a : b;
10.箭头函数内定义的变量及作用域
1 //常规写法 2 var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? "evening." : "day."));} 3 greeting(); //"Good day." 4 console.log(now); // ReferenceError: now is not defined 标准的let作用域 5 6 //参数括号内定义的变量是局部变量（默认参数） 7 var greeting = (now=new Date()) = > "Good" + (now.getHours() > 17 ? "evening." : "day.); 8 greeting(); //"Good day." 9 console.log(now); // ReferenceError: now is not defined 10 11 //对比： 函数体内{}不使用var定义的变量是全局变量 12 var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} 13 greeting(); //"Good day." 14 console.log(now); // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间) 15 16 //对比： 函数体内{} 用var定义的变量是局部变量 17 var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} 18 greeting(); //"Good day." 19 console.log(now); // ReferenceError: now is not defined
11.箭头函数可以使用闭包
1 //标准的闭包函数 2 function A() { 3 var i = 0; 4 return function b() { 5 return (++i); 6 }; 7 } 8 9 var v =A(); 10 v(); //1 11 v(); //2 12 13 //箭头函数的闭包（i=0 是默认参数） 14 var Add = (i=0) => {return (() => (++i))}; 15 var v = Add(); 16 v(); //1 17 v(); //2
12.箭头函数递归
1 var fact = (x) => (x == 0 ? 1 : x*fact(x-1)); 2 3 fact(5); //120
今天的文章箭头函数_html下一页分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/48904.html
