箭头函数

• es6中允许使用箭头来定义函数 (=>)
• 声明函数

  let a = 1
  let b = 2
  
  // 声明一个普通函数
  let fn = function(a, b) {
          console.log(a, b);
      }
  
  
  // 箭头函数定义函数
  let fn1 = (a, b) => {
      console.log(a, b);
  }
  fn(a, b) // 结果是 1 2
  fn1(a, b) // 结果是 1 2
  

箭头函数的特性

1. this是静态的

• 箭头函数的this始终指向在声明时,它的作用域(在谁的作用域下声明它,this就是谁)
• 定义函数

  // 定义普通函数
  function getName() {
      console.log(this.name);
  }
  // 定义箭头函数
  let getName2 = () => {
      console.log(this.name);
  }

• 设置对象属性

  // 设置window对象的name属性
  window.name = '李明凯'
  // 设置对象的name属性
  const school = {
      name: '凯明李'

• 调用函数

  // 直接调用
  getName(); // 结果都是 李明凯
  getName2(); // 结果都是 李明凯
  
  //使用 call 方法调用
  getName.call(school); // 结果是 凯明李
  getName2.call(school) // 结果还是 李明凯
  
  // this 是静态的 箭头函数返回的this还是原来声明它的函数作用域

2. 不能作为构造函数实例化对象

   // 定义 箭头函数
    let Person = (name, age) => {
        this.name = name;
        this.age = age;
    }
    let me = new Person('lmk', 18)
   
    console.log(me); // 这里会报错 说不能作为构造函数使用 
    // Uncaught TypeError: Person is not a constructor
   

3. 不能使用 arguments变量

   // arguments是存储函数形参的一个变量
   
   // 定义箭头函数
   let fnn = () => {
       console.log(arguments);
   }
   fnn(1, 2, 3); // 会报错 说不能作为 arguments来使用
   // Uncaught ReferenceError: arguments is not defined

箭头函数的简写方法

• 省略小括号(当形参只有一个的时候可以省略)

  let add = n => {
          return n + n;
      } 
  // 省略了 小括号

• 省略花括号(当代码块只有一条语句的时候可以省略)
• return必须省略,而且语句执行结果就是函数的返回值

  let pow = (n) => n * n; // 而且语句执行结果就是函数的返回值

箭头函数案例

• 需求1 点击 div 2s后 变成粉色
• 没用箭头函数做法

  // 获取元素
  let ad = document.querySelector('#ad');
  
  // 绑定事件
  ad.addEventListener('click', function() {
      // 使用定时器函数 
      // 使用bind改变this指向
       setTimeout(function() {
          
          this.style.background = 'pink'; // 修改背景颜色
      }.bind(ad), 2000)
  })

• 使用箭头函数做法

  // 获取元素
  let ad = document.querySelector('#ad');
  
  // 绑定事件
  ad.addEventListener('click', function() {
      // 使用定时器函数 
      // 使用 箭头函数
      setTimeout(() => {
          this.style.background = 'pink';
      }, 2000)
  })
  

• 需求2 从数组中返回偶数元素
• 没用箭头函数做法

  const arr = [1, 6, 9, 10, 100]
  const result = arr.filter(function(value, index, arr){
          // 返回 偶数
           return value % 2 == 0;
       })
  console.log(result);

• 用箭头函数做法

  const arr = [1, 6, 9, 10, 100];
  const result = arr.filter(value => value % 2 == 0) // 返回偶数
  console.log(result);

适合不适合

• 适合于this无关的回调,定时器,数组的方法回调
• 不适合于this有关回调,事件回调,对象的方法