vue的学习笔记（12）之箭头函数

1、箭头函数的使用

定义函数有三种方式：

<script>
//箭头函数：也是一种定义函数的方式
//1.定义函数的方式：function
const aaa=function () {

}

//2.对象字面量中定义函数
  const obj={
    bbb: function () {

    },
    ccc() {

    }
  }
//3.es6中的箭头函数
//   const ddd=(参数列表)=>{}
  const ddd=()=>{}//无参写法
</script>

箭头函数（将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。）：
const ddd=()=>{}：（）参数；{}方法体，可以直接是返回的表达式

2、箭头函数参数和返回值

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

<script>
  //1.参数问题：
  //1.1放入两个参数
  const sum =(num1,num2)=>{
    return num1+num2
  }

//  1.2放入一个参数,小括号省略
  const power= num=>{
    return num*num
  }


//  2.
//  2.1函数代码块中有多行代码时
  const test=()=>{
  //  1.打印一个hello Word
    console.log("hello world");

  //  2.打印hell vue
    console.log("hello vue");
  }

//  2.2函数代码块中只有一行代码时,有特殊写法
//   const mul=(num1,num2)=>{
  //     return num1*num2
  //   }
  const mul=(num1,num2)=> num1*num2
  console.log(mul(20, 30));

//  无返回值
  const demo=()=>console.log("hello world");
  demo()
</script>

对于箭头函数的返回值，如果是return一个对象的话，需要特别注意：如果是单表达式要返回自定义对象时，一定要加上括号，不加括号的话会报错，因为和函数体的{ … }有语法冲突。

x => {key: x} // 报错
x => ({key: x}) // 正确
//注意，用小括号包含大括号则是对象的定义，而非函数主体

小贴士
箭头函数看上去像是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。）简单来说，箭头函数中的this是向外层作用域中一层层查找this的指向的，直到查到有this的定义为止。

3、箭头函数中的this

在讲箭头函数中的this的时候先来看看普通函数的this是指向什么的：
普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window

通过代码试一试：

function b() {
	function a(){ 
		console.log(this) 
	}
	let c = function() {
		a()
	}
	let obj2 = {a,c}
	obj2.a()//打印出obj2,打印出调用时的对象obj2
	obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this。也就是说箭头函数中的this是向外层作用域中一层层查找this，查到有this的定义为止

<script>
  //什么时候使用箭头函数
  // setTimeout(function () {
  //    console.log(this)
  // },1000)
  // setTimeout(()=>{
  //   console.log(this)
  // },1000)


  //结论：箭头函数中的this是如何查找的
  //答案：向外层作用域中一层层查找this，查到有this的定义为止
  const obj={
    aaa() {
      setTimeout(function () {
        console.log(this)//window
      })
      setTimeout(()=>{
        console.log(this)//obj
      })
    }
  }

  obj.aaa()
</script>

也可以通过该代码练习揣摩一下：

function b() {
	let a = () => console.log(this)
	let c = function() {a()}
	let obj2 = {a,c}
	obj2.a()//打印出obj,打印出声明时的上下文,而不是调用它的对象
	obj2.c()//打印出obj,打印出声明时的上下文，而不是调用时的上下文
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

4、关于call,apply,bind

对于普通函数来说，这三个方法都适用：

let obj = {}
let a = function() { console.log(this) }
a.call(obj)//obj
a.apply(obj)//obj
a = a.bind(obj)
a()//obj

而对于箭头函数来说，因为箭头函数的特殊性三个方法都不适用：

let obj = {}
let a = () => { console.log(this) }
a.call(obj)//window
a.apply(obj)//window
a.bind(obj)
a()//window

箭头函数注意事项：

• 不能用作构造函数
• 不能使用arguments
• 不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
• 如果需要this操作，不能用作addEventListener里传的参数

关于箭头函数的更多知识可参阅MDN的文档：
https://developer.mozilla.org/zh-cn/docs/Web/JavaScript/Reference/Functions/Arrow_functions