【JS档案揭秘】第四集 关于this的讨论到此为止
网上关于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的讨论到此为止的更多相关文章
- 【JS档案揭秘】第二集 Event loop与执行栈
我时常在思考关于JS的很多知识在工作中有什么用?是否只能存在于面试这种理论性的东西中,对于我们的业务和工作,它们又能扮演怎样的角色.以后在JS档案揭秘的每一期里,都会加入我对于业务的思考,让这些知识不 ...
- 【JS档案揭秘】第一集 内存泄漏与垃圾回收
程序的运行需要内存,对于一些需要持续运行很久的程序,尤其是服务器进程,如果不及时释放掉不再需要的内存,就会导致内存堆中的占用持续走高,最终可能导致程序崩溃. 不再需要使用的内存,却一直占用着空间,得不 ...
- 【JS档案揭秘】第三集 深入最底层探秘原型链
关于这部分我看过大量的文章,数不胜数,包括阮一峰的继承三部曲,还有各种慕课的视频教程,网上无数继承方法的对比.也对很多概念存在长期错误的理解.今天做一个正确的总结,用来给原型链和继承这块知识画上句号, ...
- SpringBoot第四集:静态资源与首页定(2020最新最易懂)
SpringBoot第四集:静态资源与首页定(2020最新最易懂) 问题 SpringBoot构建的项目结构如下:没有webapp目录,没有WEB-INF等目录,那么如果开发web项目,项目资源放在那 ...
- js中this的四种使用方法
0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...
- Web前端-Vue.js必备框架(四)
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- 转:arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
- 第164天:js方法调用的四种模式
js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
随机推荐
- 【DFS练习】-翻棋子-C++
Description 有一个4*4的棋盘,放有16枚棋子. 每个棋子都是一面黑一面白,一开始有的黑面朝上,有的白面朝上. 下面是一个例子,这个例子用文字描述为: bwbw wwww bbwb bww ...
- html+css-->background-img(背景图的设置)
背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉) 1.inherit:从父元素继承属性设置 2.background-repeat:平铺(在图片大小小于元素尺寸时 ...
- Y服务-你真的懂 Yaml 吗
目录 一.什么是 Yaml 二.Yaml 的语法 三.操作 Yaml A. 引入框架 B. 代码片段 C. 完整案例 参考文档 在Java 的世界里,配置的事情都交给了 Properties,要追溯起 ...
- C#3.0新增功能07 查询表达式
连载目录 [已更新最新开发文章,点击查看详细] 查询是什么及其作用是什么 查询是一组指令,描述要从给定数据源(或源)检索的数据以及返回的数据应具有的形状和组织. 查询与它生成的结果不同. 通常情 ...
- sql注入篇2
一.前言 上一篇:sql注入篇1 二.基于回显的注入类型判断 1.有结果的注入 例如下图: (sqlllab less-1)可以看到有正常结果返回,对于的利用方式就是老套路了,先order by查询出 ...
- 使用RabbitMQ做数据接收和处理时,自动关闭
场景:N个客户端向MQ里发送数据:服务器上有另一个控制台程序(假设叫ServerClient)来处理这里数据(往数据库保存).方向为Client * n→MQSERVER→ServerClient 问 ...
- Netty中的装饰者模式
装饰者的应用 所谓装饰者,说白了,目的就是对现有的对象进行增强,装饰者设计模式最大的优点就是,它在扩展类原有功能的基础上还避免的类爆炸的情况 Netty中的装饰者模式的应用 ByteBuf是netty ...
- Flink 灵魂两百问,这谁顶得住?
Flink 学习 https://github.com/zhisheng17/flink-learning 麻烦路过的各位亲给这个项目点个 star,太不易了,写了这么多,算是对我坚持下来的一种鼓励吧 ...
- thinkphp 插件
1.切换到项目根目录,使用composer require 5ini99/think-addons:dev-master命令安装thinkphp插件 如果是root用户或是管理员执行的话会有提示 等一 ...
- Linux内核OOM killer机制
程序运行了一段时间,有个进程挂掉了,正常情况下进程不会主动挂掉,简单分析后认为可能是运行时某段时间内存占用过大,系统内存不足导致触发了Linux操作系统OOM killer机制,将运行中的进程杀掉了. ...