02-箭头函数

一、箭头函数的基本使用

       //箭头函数：定义函数的一种方式
        //1.定义函数的方式：funtion
        const a = function(){

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

            },
            bb:function(){

            }
        }
        //3.es6中的箭头函数
        // const c = (参数列表)=>{

        // }
        //无参，无返回值
        const c = () => {

        }
        

二、箭头函数参数和返回值问题

//1.参数问题
        //1.1.放入两个参数
        const sum = (num1,num2) => {
            return num1+num2
        }
        //1.2.放入一个参数 可以省略小括号，但是尽量不要省略，方便阅读代码
        const power = num => {
            return num*num
        }
        //2.函数代码块数量问题
        //2.1.函数代码块中有多行代码时
        const test = () => {
            //1.打印
            console.log('Hello');
            //2.打印
            console.log('Vue');
        }
        test()//执行
        //2.2.函数代码中只有一行代码时
        const mul = (num1,num2) => num1*num2    //自动执行并2返回，不需要return
        console.log(mul(20,30));
        //2.3.只有一行打印
        const demo = () => console.log('Hello');
        demo()  //执行

三、箭头函数中this的使用

//什么时候使用箭头函数---把参数传入函数时     
        
        //箭头函数中的this：引用的是最近作用域中的this，向外层作用域中一层层查找this，直到有this定义
        const obj = {
            b(){
                setTimeout(function(){
                    console.log(this);//window
                })
                setTimeout(()=>{
                    console.log(this);//obj对象
                })
            }
        }
        obj.b()

        const obj1 = {
            a(){
                setTimeout(function(){
                    setTimeout(function(){
                    console.log(this);
                })
                })
                setTimeout(()=>{
                    console.log(this);
                })
                setTimeout(()=>{
                    setTimeout(function(){
                    console.log(this);
                })
                })
                setTimeout(()=>{
                    console.log(this);
                })
            }
        }
        obj1.a()