箭头函数this总结

总结为一句话就是：

如果箭头函数外部还有函数作用域，则this指向最近的函数作用域中的this(这个函数作用域的this根据它的生效时期而不同)

如果没有，则指向window

在编写一个class时，笔者发现了一件事情

我对constructor里的一行代码，尝试过两种写法：

  window.addEventListener('load',this.render)

  window.addEventListener('load',()=>this.render())

却只有第二种写法奏效。
 

后来知道了，原来是两者的this不同，前者是window，后者是创建出来的class实例（constructor运行的时候，this自动绑定新建的实例），这里利用了箭头函数可以固定this的好处。

完整代码如下

class RouterClass {
    constructor() {
        this.routes={}
        this.currentUrl=''
        this.historyStack=[]
        window.addEventListener('load',()=>this.render())
       //这里换成 window.addEventListener('load',this.render)则不会奏效
        window.addEventListener('hashchange',()=>this.render())
    }
    static init(){
        window.Router=new RouterClass()
    }
    route(path,cb){
    this.routes[path]=cb||function () {}
    }
    render(){
        console.log(this)
        this.currentUrl=window.location.hash.slice(1)||'/'
        this.historyStack.push(this.currentUrl)
        this.routes[this.currentUrl]()
    }
}

RouterClass.init()