网上关于this的指向问题的博客文章很多,但大多数都是复制粘贴,也不能用简洁的语言讲清楚,而是不停地写一些示例,看得人云里雾里。

   这一集,我只给出结论,以及判定的通用方法,至于是否确实如我所讲,大家可以自行验证。

画图理解

  假设我们现在有一个函数foo,要判断其中this的指向,可以根据下图来分析:

  

   第一步,判断函数是什么类型:箭头函数、普通函数还是绑定类函数(bind、call、apply);

   对于箭头函数,需注意,首先箭头函数其实是没有 this 的,箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。如果往上级找一直没找到包裹它的普通函数,那么该箭头函数中的this指向全局对象。在浏览器中,全局对象当然就是window;

    而对于绑定函数来说,this指向我们自定义的参数,在bind/call/apply中,即是第一个参数,第一个参数在浏览器环境中的缺省值为window。这种情况属于人为地改变this指向,顺带一提:如果对一个函数进行多次bind,只有第一次的bind是生效的,这属于一个语法知识。

    

   第二步,对于普通函数来说,又分两种情况:是被当作构造函数调用,还是被当作普通函数调用。

   如果是通过new关键字对其进行实例化,也就是把这个函数当作构造函数使用,那么this恒指向实例化后的对象,此时的this是一个地址指针,指向实例化过程中在堆内存新开辟的用于存储实例化对象的那一块空间;

   如果是当作普通函数调用,那么谁调用它,this就指向谁。有一种情况是类似于foo()这样的调用,在浏览器中其实这相当于window.foo()。所以调用者为全局对象window,this便指向window。

   

  当然,有时候会出现混合调用的情况,这时候就需要根据优先级来决定,优先级排名如下:

  构造函数(new)> 绑定函数(call/apply/bind)> 具体对象调用(obj.foo())> 全局对象调用(foo())

【JS档案揭秘】第四集 关于this的讨论到此为止的更多相关文章

  1. 【JS档案揭秘】第二集 Event loop与执行栈

    我时常在思考关于JS的很多知识在工作中有什么用?是否只能存在于面试这种理论性的东西中,对于我们的业务和工作,它们又能扮演怎样的角色.以后在JS档案揭秘的每一期里,都会加入我对于业务的思考,让这些知识不 ...

  2. 【JS档案揭秘】第一集 内存泄漏与垃圾回收

    程序的运行需要内存,对于一些需要持续运行很久的程序,尤其是服务器进程,如果不及时释放掉不再需要的内存,就会导致内存堆中的占用持续走高,最终可能导致程序崩溃. 不再需要使用的内存,却一直占用着空间,得不 ...

  3. 【JS档案揭秘】第三集 深入最底层探秘原型链

    关于这部分我看过大量的文章,数不胜数,包括阮一峰的继承三部曲,还有各种慕课的视频教程,网上无数继承方法的对比.也对很多概念存在长期错误的理解.今天做一个正确的总结,用来给原型链和继承这块知识画上句号, ...

  4. SpringBoot第四集:静态资源与首页定(2020最新最易懂)

    SpringBoot第四集:静态资源与首页定(2020最新最易懂) 问题 SpringBoot构建的项目结构如下:没有webapp目录,没有WEB-INF等目录,那么如果开发web项目,项目资源放在那 ...

  5. js中this的四种使用方法

    0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...

  6. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  7. 转:arcgis api for js入门开发系列四地图查询

    原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...

  8. 第164天:js方法调用的四种模式

    js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...

  9. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

随机推荐

  1. py+selenium 老是定位不到文本内容【已解决】

    问题:定位不到文本内容,路径也正确,该加frame也有加,等待时间也够长 测试: 上图看不出差异,但是测试1就定位得到,测试2就定位不到,为什么? 看下图就知道了 区别就在于,测试2后面多了个空格!! ...

  2. 跨站脚本攻击(反射型xss)笔记(一)

    环境:一个微信端(所以用浏览器演示UI有点变形) 下图是未插任何脚本时的原页面. 按惯例,上一波["><script>alert(1)</script>] 无弹 ...

  3. Docker实现GPA+Exporter监控告警系统

    Docker实现GPA+Exporter监控告警系统 1.搭建grafana,prometheus,blackbox_exporter环境 # docker run -d -p 9090:9090 - ...

  4. 数据结构-二叉树(1)以及前序、中序、后序遍历(python实现)

    上篇文章我们介绍了树的概念,今天我们来介绍一种特殊的树--二叉树,二叉树的应用很广,有很多特性.今天我们一一来为大家介绍. 二叉树 顾名思义,二叉树就是只有两个节点的树,两个节点分别为左节点和右节点, ...

  5. Excel催化剂开源第51波-Excel催化剂遍历单元格操作性能保障

    在Excel催化剂推出的这一年多时间里,经常性听到一种声音,大概意思是真正会写代码的人,都不会看上Excel催化剂写出来的功能,自己造一个更舒服贴心,仿佛会一点VBA就可以天下无敌一般,也好像Exce ...

  6. 爬虫的盗亦有道Robots协议

    爬虫的规定 Robots协议 网站开发者对于网络爬虫的规范的公告,你可以不遵守可能存在法律风险,但尽量去遵守 Robots协议:在网页的根目录+robots.txt Robots协议的基本语法: #注 ...

  7. Visual Studio 调试系列2 基本调试方法

    系列目录     [已更新最新开发文章,点击查看详细] 在 Visual Studio 上下文中,当调试应用时,这通常意味着你在附加了调试器的情况下(即在调试器模式下)运行应用程序. 执行此操作时,调 ...

  8. C/C++用new、delete分配回收堆中空间

    int *CreateList() 10 { 11 int a[5]; 12 int *a = new int[5]; 13 delete[] a; 14 15 int a(5); 16 int a ...

  9. 细说RESTFul API之版本管理

    目录 接口实现版本管理的意义 如何实现接口的版本管理 项目实战 接口实现版本管理的意义 API版本管理的重要性不言而喻,对于API的设计者和使用者而言,版本管理都有着非常重要的意义. 首先,对于API ...

  10. 那些年,想和你一起认识的SpringCloud Eureka

    前几天鲁班LB跟我说:你玩把游戏都要半个钟啦,为何不用这时间来看看书,如果涨工资还可以帮我买个皮肤. 面对如此合理的这需求,但我不以为然,事实上并不是我不想学习,而是 ↓ 实力不允许呀~ 直到有一天, ...