文章目录
前言
对箭头函数的一些小总结
一、箭头函数特点
Arrow Function（箭头函数是在ES6标准中新增的一种函数
/**
* ES6箭头函数语法定义函数，
* 将原函数的“function”关键字和函数名都删掉，
* 并使用“=>”连接参数列表和函数体。
* 注意点：{
*
* 如果形参只有一个，则小括号可以省略；
函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；
箭头函数 this 指向声明时所在作用域下 this 的值；
箭头函数不能作为构造函数实例化；
不能使用 arguments
}
如 let sum = (num1, num2) => num1 + num2;
// 等同于 let sum = function(num1, num2) { return num1 + num2; };
*/
二、箭头函数注意点
1.this指向问题
- 使用function定义的函数，this的指向随着调用环境的变化而变化的，
- 而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。
- 使用function定义的函数中
- this指向是随着调用环境的变化而变化的:
// 普通函数的this指向是随着调用环境的变化而变化的;
function f1() {
console.log("普通函数f1的this:" + this);
}
var obj = {
A: f1 };
f1(); //this指向Window
obj.A(); //this指向的是 obj { A: foo }
// 明显使用箭头函数的时候，this的指向是没有发生变化的（这里一直都是window）。
var f2 = () => {
console.log("箭头函数f2的this:" + this);
};
var obj2 = {
B: f2 };
f2();//this指向Window
obj2.B();//this指向Window
2.无法进行构造函数
- function是可以定义构造函数的，而箭头函数是不行的。
- 接上一小节例子：
// 对普通函数构造函数
var f11 = new f1();
console.log("我是普通函数的构造函数:" + f11);
// 对箭头函数构造函数
var f21 = new f2();
console.log("我是箭头函数的构造函数:" + f21);
- 结果展示：
3.变量提升
- 由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，
需要var(let const定义的时候更不必说)关键词 - 而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前
- 因此箭头函数尽量用var定义且在调用之前定义
三、箭头函数使用
- 将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。
- 有多个参数的前提下，（）不能省略
- 若为单个参数则可以省略
- 若没有参数使用空括号（）代替
1.多个参数的箭头函数
//有多个参数的前提下，()不能省略 若没有参数使用空括号代替
var add = (a, b) => console.log(a + b);
add(1, 2);
//相当于
var function add(a, b) {
console.log(a + b) }
add(1, 2);
2.单个参数或无参数
//若为单个参数则可以省略，
// 当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。
var f1 = () =>
{
console.log("无参数的时候不能省略括号");
};
f1();
// 单个参数
var f3 = (a) => console.log("单个参数可以省略括号");
f3();
3.可变参数
// 可变参数
var f4 = (a, b, c, ...args) => console.log(...args);
f4(1, 2, 3, 4, 5, 6, 7); //console.log(...args)不打印前面的a,b,c
4.省略return的情况
- 箭头函数相当于匿名函数，并且简化了函数定义。
- 箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。
- 还有一种可以包含多条语句，这时候就不能省略{ … }和return，和参数多少无关
//多条语句，不能省略{ }
var f5 = (a) =>
{
a = a + 1;
return a;
};
console.log(f5(1));
- 如果返回的是一个对象
- 需要特别注意，如果是单表达式要返回自定义对象，
- 不写括号会报错，因为和函数体的{ … }有语法冲突。
- 注意，用小括号包含大括号则是对象的定义，而非函数主体
//如下所示
x => {
key: x} // 报错
x => ({
key: x}) // 正确
补充点：
补充点
- 箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者Person
- 由于this在箭头函数中已经按照词法作用域绑定了，所以，
用call()或者apply()调用箭头函数时无法对this进行绑定，即传入的第一个参数被忽略
var person = {
firstName: "zwt",
lastName: "cherish",
getFullName: function ()
{
console.log(this);
var first = this.firstName;
console.log(first);
var fn = () =>
{
console.log(this);
return this.firstName + this.lastName;
};
return fn();
},
};
person.getFullName();
总结
对箭头函数的一些小结。