JavaScript中箭头函数基础小结

---

前言

对箭头函数的一些小总结

---

一、箭头函数特点

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();

---

总结

对箭头函数的一些小结。