【校招VIP】箭头函数详讲（箭头函数中的this）- 校招VIP

转载声明：文章来源https://blog.csdn.net/qq_52395816/article/details/116886161

箭头函数的基本使用：

知识点：

箭头函数是不能提升的，所以需要在使用之前定义。

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯

箭头函数this的几种解释说法

1.当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

2.箭头函数中的this引用的就是最近作用域中的this

3.向外层作用域中，一层一层查找this，直到有this的定义

4.有的箭头函数都没有自己的 this。不适合定义一个对象的方法。

代码解释（注释超详细）

一、箭头函数的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 定义函数的方式

        // js中的
        // 函数声明
        function bbb(){
            console.log(6);
        }
        // 函数表达式
        const aaa = function(){
            console.log(5);
        }


        // 视频中的
        // 1.function
        const a = function(){
            console.log(4);
        }

        // 2.对象字面量中定义函数
        const obj ={
            bbb: function (){
                console.log(1);
            },//这两种等效
            bbb (){
                console.log(2);
            }
        }

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

    </script>
</body>
</html>

二、箭头函数的参数和返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 参数问题
        // 1.1 放入两个参数
        const sum = (num1,num2) => {
            return num1*num2
        }
        // 1.2 放入一个参数
        const power = (num) => {
            num*num
        }//或  只有一个参数时小括号可以省去
        const power = num => {
            num*num
        }
        // 2.函数中
        // 2.1 函数代码块中只有一行代码
        const test = () => {
            console.log('Hello World');
            console.log('Hello Vue');
        }
        // 2.2 函数代码块只有一行代码
        const nul = (num1,num2) => num1+num2 //等效于(默认给出返回值return)
        const nul = (num1,num2) => {return num1+num2}

        // 无返回值时
        const demo = () => {
            console.log('Hello Demo');
        }//等效于
        const demo = () => console.log('Hello Demo');//(会执行代码输出结果)
        console.log(demo());//undefined

    </script>
</body>
</html>

三、箭头函数中this的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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

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

        // 结论：箭头函数中的this引用的就是最近作用域中的this
        const obj = {
            aaa() {
               setTimeout(function(){
                   console.log(this);//window
               }) 
               setTimeout(() => {
                   console.log(this);//obj
               })
            }  
        }
        const obj = {
            aaa() {
               setTimeout(function(){
                  setTimeout(function(){
                    console.log(this);//window
                  })

                // this
                  setTimeout(() => {//向外找，找到了42行作用域中的this，42行指向window
                      console.log(this);//window
                  })
               }) 

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

                //   this(是47行箭头函数的this，继续像外层找，指向obj)
                  setTimeout(() => {//向外层找，找到47行作用域中的this
                      console.log(this);//obj
                  })
               })
            }  
        }
        // const obj = {
        //     aaa (){
        //         setTimeout(function () {
        //             setTimeout(function () {
        //                 console.log(this);//window
        //             })
        //         })

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

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

        //         setTimeout(() => {
        //             console.log(this);
        //         })
        //     }
            
        // }
        // aaa()
    </script>
</body>

</html>

注意：需要先看懂一、二才能更好的三哦理解，也可以帮助理解vue-compiler和vue-only中main.js的区别