箭头函数的使用

函数定义的几种方式:

箭头函数: 也是一种定义函数的方式

1. 定义函数的方式: function

 const aa = function() {}

2. 对象字面量中定义函数

 const obj = {
        bbb() {}
    }

3. ES6中的箭头函数

 const cc = (参数列表) => {
    }
    
 const cc = () => {

    }

箭头函数的参数和返回值

• 参数问题
  • 放入两个参数

const sum = (num1,num2) => {
        return num1 + num2
    }

• 放入一个参数

const power = num => {
        return num * num
    }

• 在函数代码块中的使用
  • 函数代码块中有多行代码

 const test = () => {
        console.log('Hello world');
        console.log('Hello Vue');
    }

• 函数代码块中只有一行代码,可以简写,会先执行箭头后的代码,最后返回返回值

 const mul = (num1,num2) => num1 * num2
    console.log(mul(10,20))

箭头函数中this的使用

什么时候使用箭头函数?例如:

setTimeout(function () {
        console.log(this) //window
    },1000)
setTimeout(() => {
        console.log(this)  // window
    },1000)

问题: 箭头函数中的this是如何查找的?
结论: 向外层作用域中,一层层查找this, 直到有this的定义

const obj = {
        aaa() {
            setTimeout(function () {
                console.log(this)  // window
            })

            setTimeout(() => {
                console.log(this)  // obj对象
            })
        }
    }
    obj.aaa()

扩展练习

 const obj = {
        aaa() {
            setTimeout(function () {
                setTimeout(function () {
                    console.log(this)  // window
                })
                setTimeout(() => {
                    console.log(this)  // window
                })
            })

            setTimeout(() => {
                setTimeout(function () {
                    console.log(this)  // window
                })
                setTimeout(() =>{
                    console.log(this)  // obj对象
                })
            })
        }
    }
    obj.aaa()