JavaScript This 的六道坎
鉴于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 的六道坎的更多相关文章
- JavaScript基础知识----六道有趣的Js基础题以及解答
题目: 1.找出数字数组中最大的元素(使用Math.max函数)2.转化一个数字数组为function数组(每个function都弹出相应的数字)3.给object数组进行排序(排序条件是每个元素对象 ...
- 六道JavaScript测验题
1.找出数字数组中最大的元素(使用Match.max函数) var a=[123,23432,345,3,34]; console.log(Math.max.apply(null,a)); 2.转化一 ...
- 《JavaScript权威指南》学习——js闭包
序:闭包这个玩意啊~在很多没有代码块的语言中都会出现,已经成为大多程序员入门的一道坎,闭包让很多程序员觉得晦涩(事实上百度一下这个名词,真的说的很晦涩啊亲==|||),我第一次知道闭包这个名词是从&l ...
- JavaScript第一回-来龙去脉
简写:JavaScript-JS ECMAScript-ES 写在前面的话:啃文字大多时间不是件愉快的事情,但是我们必须过这个坎,让自己习惯,让自己不讨厌,至于喜欢不喜欢,我们等时间给出答案. J ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...
- JavaScript基础入门教程(四)
说明 前面三篇博客介绍了js中基本的知识点,包括变量类型及其转换.表达式.运算符等小知识点,这篇博客主要讲的是对象.如果你学过java等语言,你也许在下文的阅读中发现在js中的对象与java中的对象存 ...
- 《浏览器工作原理与实践》<10>作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
在上一篇文章中我们讲到了什么是作用域,以及 ES6 是如何通过变量环境和词法环境来同时支持变量提升和块级作用域,在最后我们也提到了如何通过词法环境和变量环境来查找变量,这其中就涉及到作用域链的概念. ...
- JavaScript 通过身份证号获取出生日期、年龄、性别 、籍贯
JavaScript 通过身份证号获取出生日期.年龄.性别 .籍贯(很全) 效果图: 示例代码: //由于没有写外部JS,所以代码比较长!!! <!DOCTYPE html PUBLIC &qu ...
随机推荐
- iOS服务器数据请求"汉字编码"问题
下面记录一下数据请求问题: 1.不知道大家有木有遇到过,当数据请求的URL带有汉字的时候,请求数据肯定会报404错误,也就是参数或者是接口URL错误<虽然说404,500等错误一般都是服务器问题 ...
- nginx主配置文件实例
1.修改配置文件 重要:修改配置文件使用虚拟机,否则怎么配置都不生效,添加如下用户 [root@host-10-1-1-161 html]# ll /etc/nginx/nginx.conf -rw- ...
- springboot子模块 @Autowired无法找到其他模块的接口和类的解决方法
在main的启动类上添加 @SpringBootApplication(scanBasePackages = {"com.shangsheng"})或者@ComponentScan ...
- 在单元测试中处理Debug.Assert的好方法
在单元测试项目的配置文件中配置好, <?xml version="1.0" encoding="utf-8"?> <configuration ...
- ASP.NET(C#) 面试总结面试题大全
一.对于 Web 性能优化,您有哪些了解和经验吗?出现指数:五颗星主要考点:这道题是博主在博客园的新闻里面看到的,回想之前几年的面试经历,发现此题出现概率还是比较高的.因为它的考面灰常广,可以让面试官 ...
- flask 之(二) --- 视图|模版|模型
Flask框架 打开pycharm编译器,新建一个Flask项目,选择提前建好的虚拟环境 . 项目结构: static:静态资源文件,可以直接被浏览器访问 templates:模版文件,必须在项目的p ...
- PJzhang:微软出口管制条例
猫宁!!! 翻译:PJzhang 微软公司的技术,产品和服务受美国出口管理法规(EAR)的约束,由美国商务部工业与安全局(BIS)监督执行. 此外,财政部,国务院对其他与出口相关的技术和产品转让,交易 ...
- xgboost的使用
1.首先导入包 import xgboost as xgb 2.使用以下的函数实现交叉验证训练xgboost. bst_cvl = xgb.cv(xgb_params, dtrain, num_boo ...
- jmeter性能测试重要指标以及性能结果分析
一.Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告 如果大家都是做Web应用的性能测试,例如只有一个登录的请求,那么在Aggregate Re ...
- (4.16)mysql备份还原——物理备份之XtraBackup实践
关键词:XtraBackup实践,物理备份,xtrabackup备份,innobackupex备份 [1]如何使用? [3]系列:innobackupex --help |more [4]系列:xtr ...