鉴于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. iOS使用UIBezierPath实现ProgressView

    实现效果如下: 界面采用UITableView和TabelViewCell的实现,红色的视图采用UIBezierPath绘制.注意红色的部分左上角,左下角是直角哟!!!!不多说<这里才是用UIB ...

  2. 使用 WebStorm alt+f2 快速打开浏览器测试的一点bug

    这个bug是涉及到中英文文件名的问题(不涉及到路径名): Case 1: 中文文件名 当打开alt+f2快捷方式打开含有中文名的html文件时,路径名直接变为localhost,所以找不到要打开的文件 ...

  3. Hibernate不同数据库的连接及SQL方言

    本文讲述Hibernate不同数据库的连接及SQL方言.Hibernate不同数据库的连接可能会出现错误,有一种情况是由于Hibernate SQL方言设置不正确而导致的. 以下代码展示Hiberna ...

  4. Django模板系统-标签Tags

    for <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} </ul ...

  5. Java工程师研发面经大合集

    百度研发面经整合版 软件研发工程师 基础研发工程师 百度智能云 百度核心搜索部 百度今年的提前批有点奇怪,好像都不走流程,牛客上好几个百度内推的帖子,我投了几个,基本上都是百度智能云的,当然也有其他部 ...

  6. linux系统查看当前正在运行的服务

    --查看当前服务器所有服务 service --status-all -- 查看当前所有正在运行的服务 service --status-all | grep running --查看指定服务运行状态 ...

  7. Cisco的动态Nat、PAT

    Lab_C(config)# interface Ethernet0/0  ip address 192.168.30.2 255.255.255.0 router rip  network 172. ...

  8. CISCO路由器WAN口动态ISP配置

        Building configuration... version 15.0 service timestamps debug datetime msec service timestamps ...

  9. Linux 概念与快捷方式

    概念 何为shell Shell 是指"提供给使用者使用界面"的软件(命令解析器),类似于 DOS 下的 command(命令行)和后来的 cmd.exe .普通意义上的 Shel ...

  10. 【案例分享】SpreadJS金融行业应用实践,开发基于Web Excel的指标补录平台

    SpreadJS作为一款基于 HTML5 的纯前端电子表格控件,以“高速低耗.高度类似Excel.可无限扩展”为产品特色,提供移动跨平台和浏览器支持,可同时满足 .NET.Java.App 等应用程序 ...