34_JavaScript之普通函数与箭头函数的区别

1.普通函数/方法中的this, 谁调用就是谁

    <script>
        function demo() {
            console.log(this);
        }
        demo(); //  demo() ===  window. demo()
    </script>

控制台输出：

2.箭头函数中的this, 是父作用域的this，不是调用者

因为没有将箭头函数放到其它的函数中, 所以箭头函数属于全局作用域
在JS中只有定义一个新的函数才会开启一个新的作用域

    <script>
        let p = {
            name: "Durant",
            say: function() {
                console.log(this);
            },
            hi: () => {
                console.log(this);
            }
        }
        p.say(); // 输出p对象，因为是p调用了say()
        p.hi(); //输出window对象，因为hi()是使用了箭头函数，.箭头函数中的this, 是父作用域的this，父作用域是window
    </script>

控制台输出：

    <script>
        function Person() {
            this.name = "Durant";
            this.age = 30;
            this.say = function() {
                console.log(this);
            }
            this.hi = () => {
                console.log(this);
            }
        }
        let p = new Person();
        p.say(); // 输出p对象，因为是p调用了say()
        p.hi(); //输出p对象，hi()是使用了箭头函数，.箭头函数中的this, 是父作用域的this，父作用域是Person
    </script>

控制台输出：