鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

首先

this is all about context.

this说白了就是找大佬,找拥有当前上下文(context)的对象(context object)。

大佬可以分为六层,层数越高权力越大,this只会认最大的。

第一层:世界尽头
权力最小的大佬是作为备胎的存在,在普通情况下就是全局,浏览器里就是window;在use strict的情况下就是undefined。

第二层:点石成金

第二层大佬说白了就是找这个函数前面的点"."。

如果用到this的那个函数是属于某个 context object 的,那么这个 context object 绑定到this。

比如下面的例子,boss是returnThis的 context object ,或者说returnThis属于boss。

下面这个例子就要小心点咯,能想出答案么?

答案是boss1和window哦,猜对了吗。

只要看使用this的那个函数。

在boss2.returnThis里,使用this的函数是boss1.returnThis,所以this绑定到boss1;

在boss3.returnThis里,使用this的函数是returnThis,所以this绑定到备胎。

要想把this绑定到boss2怎么做呢?

没错,只要让使用this的函数是属于boss2就行。

第三层:指腹为婚

第三层大佬是Object.prototype.call和Object.prototype.apply,它们可以通过参数指定this。(注意this是不可以直接赋值的哦,this = 2会报ReferenceError。)

第四层:海誓山盟

第四层大佬是Object.prototype.bind,他不但通过一个新函数来提供永久的绑定,还会覆盖第三层大佬的命令。

第五层:内有乾坤

一个比较容易忽略的会绑定this的地方就是new。当我们new一个函数时,就会自动把this绑定在新对象上,然后再调用这个函数。它会覆盖bind的绑定。

第六层:军令如山

最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的this不再妖艳,被永远封印到当前词法作用域之中,称作 Lexical this ,在代码运行前就可以确定。没有其他大佬可以覆盖。

这样的好处就是方便让回调函数的this使用当前的作用域,不怕引起混淆。

所以对于箭头函数,只要看它在哪里创建的就行。

下面这种奇葩的使用方式就需要注意:

如果你不知道最后为什么会是 boss2,继续理解“对于箭头函数,只要看它在哪里创建”这句话。

JavaScript This 的六道坎的更多相关文章

  1. JavaScript基础知识----六道有趣的Js基础题以及解答

    题目: 1.找出数字数组中最大的元素(使用Math.max函数)2.转化一个数字数组为function数组(每个function都弹出相应的数字)3.给object数组进行排序(排序条件是每个元素对象 ...

  2. 六道JavaScript测验题

    1.找出数字数组中最大的元素(使用Match.max函数) var a=[123,23432,345,3,34]; console.log(Math.max.apply(null,a)); 2.转化一 ...

  3. 《JavaScript权威指南》学习——js闭包

    序:闭包这个玩意啊~在很多没有代码块的语言中都会出现,已经成为大多程序员入门的一道坎,闭包让很多程序员觉得晦涩(事实上百度一下这个名词,真的说的很晦涩啊亲==|||),我第一次知道闭包这个名词是从&l ...

  4. JavaScript第一回-来龙去脉

    简写:JavaScript-JS   ECMAScript-ES 写在前面的话:啃文字大多时间不是件愉快的事情,但是我们必须过这个坎,让自己习惯,让自己不讨厌,至于喜欢不喜欢,我们等时间给出答案. J ...

  5. .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  6. JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

    一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...

  7. JavaScript基础入门教程(四)

    说明 前面三篇博客介绍了js中基本的知识点,包括变量类型及其转换.表达式.运算符等小知识点,这篇博客主要讲的是对象.如果你学过java等语言,你也许在下文的阅读中发现在js中的对象与java中的对象存 ...

  8. 《浏览器工作原理与实践》<10>作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?

    在上一篇文章中我们讲到了什么是作用域,以及 ES6 是如何通过变量环境和词法环境来同时支持变量提升和块级作用域,在最后我们也提到了如何通过词法环境和变量环境来查找变量,这其中就涉及到作用域链的概念. ...

  9. JavaScript 通过身份证号获取出生日期、年龄、性别 、籍贯

    JavaScript 通过身份证号获取出生日期.年龄.性别 .籍贯(很全) 效果图: 示例代码: //由于没有写外部JS,所以代码比较长!!! <!DOCTYPE html PUBLIC &qu ...

随机推荐

  1. split 使用

    split作用:把字符串变成列表,这个字符串必须是多行文字.如果是单行文字或一个单词是不行的,实例操作如下: In [46]: output=subprocess.check_output(['df' ...

  2. 安装IE11必备更新

    https://support.microsoft.com/zh-cn/help/2847882

  3. CTF—攻防练习之HTTP—SQL注入(SSI注入)

    主机:192.168.32.152 靶机:192.168.32.161 ssI是赋予html静态页面的动态效果,通过ssi执行命令,返回对应的结果,若在网站目录中发现了.stm .shtm .shtm ...

  4. centos下kill、killall、pkill命令区别

    kill是用来终止进程的 首先可以通过ps aux查看系统有哪些进程正在运行. 1.用kill来杀死某一个进程 #kill,加选项-9,加PID,表示杀死进程编号为PID的这个进程# -1 重启#ki ...

  5. Django-MVC框架和MTV框架

    MVC框架 全称Model View Controller,分为三个基本部分:模型Model.视图View和控制器Controller,具有耦合性低.重用性高.生命周期低等优点. 结构 View层,操 ...

  6. 云计算Openstack介绍(1)

    一.云计算的前世今生 所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 IT系统架构的发展到目前为止大致 ...

  7. Java中对比单继承与多继承的优劣,以及java的解决方案

    继承是一种面相对象的基本特征之一,但在具体语言的语法设计中有两种方式:单继承和多继承. 所谓多继承是指一个子类可以拥有多个父类:单继承则是一个子类只拥有一个父类. 单继承与多继承的优劣: 多继承优点在 ...

  8. Macaca环境搭建(三)----uirecorder Android录制

    一.安装Macaca-Android 命令窗口输入:npm i macaca-android -g 二.安装android-SDK 1.下载并安装ADT-bundle,官网下载地址我就不提供了,因为下 ...

  9. 【模板】SPFA(不完全详解)

    一种最短路求法(个人觉得比DIJKSTRA好用) 用于有向图. 大概思路:从根节点开始,枚举每一个点,同时更新他们所联通的点的最短路径,如果路径被更新,则把这个点入队,一直重复这个操作直到队伍为空为止 ...

  10. C++学习 之 继承(笔记)

    1.继承基础: 继承就像是生物里的遗传与变异,即派生类(子代)从基类(父代)那里继承基类的某些特性(遗传),并在此基础上拥有自己的特性(变异). C++派生语法: class Base//定义一个基类 ...