JavaScript 的This绑定方式导图

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript 的This绑定方式导图脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

首先上张滑稽的图

JavaScript 的This绑定方式导图

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

作用域类型

JavaScript 的This绑定方式导图

上下文对象

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

参见此链接

关于This的绑定4种规则

1. 默认绑定

JavaScript 的This绑定方式导图

2. 隐式绑定

JavaScript 的This绑定方式导图

3. 显式绑定

JavaScript 的This绑定方式导图

4. new绑定

JavaScript 的This绑定方式导图

此外,在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'
    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几种绑定规则,归根结底,的套路就是:
关于几种模式的等价变换形式,知乎上面有大神解答,猛戳这

最后是全图

JavaScript 的This绑定方式导图

附上思维导图的下载链接

去有道云笔记下载

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript 的This绑定方式导图全部内容,希望文章能够帮你解决JavaScript 的This绑定方式导图所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。