JavaScript 的This绑定方式导图

lbool 发布于2019-08-20 18:05 / 757人阅读

摘要：本文是对加深对的理解一文的导图版翻译中的是一个捉摸不透的东西，它很喜欢变化，很诡异。写在后面的几种绑定规则，归根结底，的套路就是关于几种模式的等价变换形式，知乎上面有大神解答，猛戳这最后是全图附上思维导图的下载链接去有道云笔记下载

本文是对《加深对 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的几种绑定规则，归根结底，的套路就是：
关于几种模式的等价变换形式，知乎上面有大神解答，猛戳这

最后是全图

附上思维导图的下载链接

去有道云笔记下载

服务器托管私有云 javascript的this javascript思维导图 javaScript中的this javascript中this详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84079.html

这一次，我们换种姿势学习 javascript

摘要：操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。此外可以使用和来设置对象及其属性的不可变性级别。忽视这一点会导致许多问题。使用调用函数时会把新对象的属性关联到其他对象。前言《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题：...

zone 2019-08-26 11:54 评论0 收藏0
十分钟快速了解《你不知道的 JavaScript》（上卷）

摘要：最近刚刚看完了你不知道的上卷，对有了更进一步的了解。你不知道的上卷由两部分组成，第一部分是作用域和闭包，第二部分是和对象原型。附录词法这一章并没有说明机制，只是介绍了中的箭头函数引入的行为词法。第章混合对象类类理论类的机制类的继承混入。最近刚刚看完了《你不知道的 JavaScript》上卷，对 JavaScript 有了更进一步的了解。《你不知道的 JavaScript》上卷由两部...

赵春朋 2019-08-26 12:16 评论0 收藏0
Laravel思维导图之Laravel核心概念

摘要：的核心概念包括服务容器服务提供者门面契约。所有服务提供者都需要继承类。可以为服务提供者的方法设置类型提示。方法将在所有其他服务提供者均已注册之后调用。同样会整理成思维导图的形式以方便记忆与回顾。 showImg(https://segmentfault.com/img/remote/1460000010771201); Laravel 的核心概念包括：服务容器、服务提供者、门面（Fac...

wthee 2019-06-28 13:31 评论0 收藏0
精读《你不知道的javascript（中卷）》

摘要：强制类型转换本章介绍了的数据类型之间的转换即强制类型转换包括显式和隐式。强制类型转换常常为人诟病但实际上很多时候它们是非常有用的。隐式强制类型转换则没有那么明显是其他操作的副作用。在处理强制类型转换的时候要十分小心尤其是隐式强制类型转换。前言《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaSc...

李世赞 2019-08-22 18:09 评论0 收藏0
Laravel思维导图之Laravel HTTP路由、中间件、控制器

摘要：又限于层的内容太多，我在这篇中将整理路由中间件控制器部分内容。前者定义页面路由，默认应用中间件组后者定义无状态路由，会应用中间件组。命名路由可以为指定路由或者控制器方法命名，也可以为已命名的路由生成。 showImg(https://segmentfault.com/img/remote/1460000010882838); 上图列出了 Laravel HTTP 层的相关知识大纲。由于...

linkin 2019-06-28 13:35 评论0 收藏0