箭头函数和其this指向

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//一个参数
const power = (num1) => {
return num1 * num1;
}

        //一个参数可以省略括号：
        const power1 = num1 => {
            return num1 * num1
        }


        //多个参数
        const add = (num1, num2) => {
            return num1 + num2;
        }

        //当函数代码块中只有一行代码
        const mul = (num1, num2) => num1 * num2;
        const demo = () => console.log("hello vue.js")
        console.log(mul(20, 30))
        demo()



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

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

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

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

</html>

箭头函数和其this指向

推荐阅读更多精彩内容