普通函数和箭头函数的区别:

    1.普通函数/方法中的this, 谁调用就是谁
    2.箭头函数中的this, 是父作用域的this，不是调用者

例:

        let p = {
            name: "zhang",
            say: function () {
                console.log(this); // {name: "zhang ", say: ƒ}
            },
            // 因为没有将箭头函数放到其它的函数中, 所以箭头函数属于全局作用域
            // 在JS中只有定义一个新的函数才会开启一个新的作用域
            hi: () => {
                console.log(this); // Window 
            }
        }
        p.say();
        p.hi();

例:

function Person() {
            this.name = "zhang";
            this.say = function () {
                console.log(this); // Person
            }
            // 因为将箭头函数放到其它的函数中, 所以箭头函数属于其它函数(当前的其它函数就是构造函数)
            // 既然箭头函数属于构造函数, 所以箭头函数中的this就是构造函数的this
            this.hi = () =>{
                console.log(this); // Person
            }
        }
        let p = new Person();
        p.say();
        p.hi();

例:
注意点:
注意点: 箭头函数中的this永远都只看它所属的作用域的this
无法通过bind/call/apply来修改

        function Person() {
            this.name = "zhang";
            this.say = function () {
                console.log(this); // {name: "zs"}
            }
            this.hi = () =>{
                console.log(this); // Person
            }
        }
        let p = new Person();
        p.say.call({name: "zs"});
        p.hi.call({name: "zs"});

引申:优化案例代码

旧版本

    let self = this;
    this.timer = window.setInterval(function() {
      offset -= 20;
      if (offset <= -300) {
        self.bomb();
      }
      self.oDiv.style.top = offset + "px";
    }, 200);
    ⤵️ 优化代码

新版本

    this.timer = window.setInterval(() => {
      offset -= 20;
      if (offset <= -300) {
        self.bomb();
      }
      this.oDiv.style.top = offset + "px";
    }, 200);

点我预览 打字游戏

点我预览 贪吃蛇