JavaScript 的This绑定方式导图

本文是对《加深对 JavaScript This 的理解》一文的导图版翻译

JS中的this是一个捉摸不透的东西，它很喜欢变化，很诡异。拥抱变化，接收诡异，看清this的真面目，这篇来源于《加深对 JavaScript This 的理解》的导图也许有些帮助

首先上张滑稽的图

理解This的绑定方式，可能要先理解下上下文对象、作用域类型

作用域类型

上下文对象

上下文对象也叫运行时环境，是一个在代码运行时的概念，推荐下面这篇文章

参见此链接

关于This的绑定4种规则

1. 默认绑定

2. 隐式绑定

3. 显式绑定

4. new绑定

此外，在ES6中引入的箭头函数，需要注意：

    var a = 'scope';

    function ClassA(){
        this.a = 'ClassA';        
        this.do = function(){
            setTimeout(function(){
                console.log(this.a); // 期待的是输出 'ClassA'
            });
        }
    }

    var ins = new ClassA();
    ins.do(); // 然而却是 ： 'scope'

• 上述代码的运行结果原因在于，setTimeout里面的回调函数执行时，属于默认绑定规则，因此在非严格模式下，this指向window,this.a也即window.a，window.a就是全局变量var a = 'scope'

• 箭头函数的出现，打破了这种规则：

    var a = 'scope';

    function ClassA(){
        this.a = 'ClassA';        
        this.do = function(){
            setTimeout(() => {
                console.log(this.a); // 期待的是输出 'ClassA'
            });
        }
    }

    var ins = new ClassA();
    ins.do(); // 输出确实是 ： 'ClassA'

用function生成的函数会定义一个自己的this，而箭头函数没有自己的this，而是会和上一层的作用域共享this。箭头函数让this重新回到静态作用域规则的怀抱。

写在后面 last but not least!!!

this的几种绑定规则，归根结底，的套路就是：
关于几种模式的等价变换形式，知乎上面有大神解答，猛戳这

最后是全图

附上思维导图的下载链接

去有道云笔记下载