我们来聊聊箭头函数(便是下面这个东西)!
箭头函数的语法比传统的函数表达式更简洁,而且它们没有自己的 this、arguments、super 或 new.target。它们非常适宜用在须要匿名函数的地方,同时不能作为布局函数利用。
// 当只有一个参数时,圆括号不是必须的(singleParam) => { statements }singleParam => { statements }// 没有参数的函数必须加圆括号() => { statements }
箭头函数有两个紧张优点:
1️⃣ 语法更简洁

2️⃣ 不会绑定 this
切入正题【特点】没有自己的 this
箭头函数不会创建自己的 this,它只会继续外层浸染域的 this。
function Person() { this.age = 0; setInterval(() => { // this 精确地指向 p 实例 console.log(this === p); // true this.age++; }, 1000);}var p = new Person();
与严格模式的关系
由于 this 是词法绑定的,严格模式中与 this 干系的规则将被忽略。
var f = () => { 'use strict'; return this; };f() === window; // 或 global
通过 call、apply 或 bind 调用
由于箭头函数没有自己的 this,利用这些方法调用时只能通报参数,它们的第一个参数 this 会被忽略。
let adder = { base: 1, add: function (a) { console.log(this === adder); // true let f = (v) => v + this.base; return f(a); }, addThruCall: function (a) { let f = (v) => { console.log(this === adder); // true console.log(`v 的值是 ${v},this.base 的值是 ${this.base}`); // 'v 的值是 1,this.base 的值是 1' return v + this.base; }; let b = { base: 3 }; // call() 方法不能绑定 this 为 b 工具,第一个参数 b 被忽略了 return f.call(b, a); }};console.log(adder.add(1)); // 输出 2console.log(adder.addThruCall(1)); // 输出 2
利用箭头函数作为方法
箭头函数没有 this 绑定。
"use strict";var obj = { i: 10, b: () => console.log(this.i, this), // undefined, Window{...} c: function () { console.log(this.i, this); // 10, Object {...} }};obj.b();obj.c();
利用 new 操作符
箭头函数不能用作布局函数,用 new 调用会抛出错误。
var Foo = () => {};var foo = new Foo(); // TypeError: Foo is not a constructor
作为匿名函数
ES6 的箭头函数表达式是匿名函数的一种简写办法:
// 匿名函数let show = function () { console.log("匿名函数")};show(); // "匿名函数"let show1 = () => console.log("匿名函数");show1(); // "匿名函数"
不过,箭头函数和传统匿名函数在实际操作中还是有一些差异的。
末了如果你有任何问题或建议,欢迎在评论区留言互换!
祝你编程愉快!