一起学Vuejs（二十一）----- 箭头函数

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

箭头函数：

一种定义函数的方式，允许使用“箭头”（=>）定义函数。

 

普通用法：

var f = a = > a

//等同于
var f = function(a){
   return a;  
}

 如果不需要参数或需要多个参数，就使用一个圆括号代表参数部分：

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

 

箭头函数的 this 与普通函数的区别：

1. 普通函数：调用时被决定；谁调用我，this就指向谁。

2. 箭头函数：定义时被决定；在哪个环境中，this就指向谁。

3. 匿名函数：匿名函数的执行环境是全局性的，因此this指向window。

<script>
// 问题: 箭头函数中的this是如何查找的?
// 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
// const obj = {
//   aaa() {
//     setTimeout(function () {
//       console.log(this); // window
//     })
//
//     setTimeout(() => {
//       console.log(this); // obj对象
//     })
//   }
// }
//
// obj.aaa()

const obj = {
  aaa() { //-4
    setTimeout(function () { //-2
      setTimeout(function () { // -1 (谁执行这个方法)
        console.log(this); // window-1
      });

      setTimeout(() => {
        console.log(this); // window-2
      });
    });

    setTimeout(() => {
      setTimeout(function () { //-3
        console.log(this); // window-3
      });

      setTimeout(() => {
        console.log(this); // obj-4
      });
    });
  },
};
obj.aaa();
</script>

 

 

博客借鉴：https://blog.csdn.net/qq_36260974/article/details/105643644