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 ...
随机推荐
- 利用SQL语句查找某数据库中所有存储过程包含的内容(转)
Use 数据库DECLARE @ProcName varchar(50)Create Table #tmpName(Content varchar(2000))Create Table #tmp(P ...
- C基础知识(5):指针--传递指针给函数&返回指针的函数
下面从3个代码例子分别讲述以下2个知识点: (1) 传递指针给函数(参数类型为指针) (2) 返回指针的函数(返回类型为指针) #include <stdio.h> // 传递指针给函数& ...
- 解决win10 windows mobile 设备中心无法打开问题,MC3200无法连上win10问题
1.下载高版本的安装包 从微软官方下载:https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=3182 2. 运行service ...
- 应用安全 - 社工 - 大数据 - Fofa - 汇总
搜索语法 title=”abc” header=”abc” body=”abc” domain=”xx.com” host=”.xx.cn” port=”443” ip=”1.1. ...
- C++中map和unordered_map的用法
1. 简介 map和unordered_map都是c++中可以充当字典(key-value)来用的数据类型,但是其基本实现是不一样的. 2. map 对于map的底层原理,是通过红黑树(一种非严格意义 ...
- 编译安装php7.3
./configure --prefix=/usr/local/php7.3.9 --with-gd --enable-mysqlnd --with-mysqli=mysqlnd --with-pdo ...
- 安装VMWare tools 及安装后/mnt中有hgfs但没共享文件的解决办法
一.首先是安装VMWare tools打开虚拟机软件,在菜单栏‘虚拟机’子菜单下‘安装VMware Tools' 1.以root身份进入Linux 2.此时把linux的/dev/cdrom设备挂载到 ...
- 自然语言处理工具hanlp定制用户词条
作者:baiziyu 关于hanlp的文章已经分享过很多,似乎好像大部分以理论性的居多.最近有在整理一些hanlp应用项目中的文章,待整理完成后会陆续分享出来.本篇分享的依然是由baiziyu 分享的 ...
- python基础_面向对象
面向对象定义 把一组数据结构和处理它们的方法组成对象(object),把相同行为的对象归纳为类(class),通过类的封装(encapsulation)隐藏内部细节,通过继承(inheritance) ...
- Chromium浏览器启动参数
序号 参数 说明1 --allow-outdated-plugins 不停用过期的插件.2 --allow-running-insecure-content 默认情况下,https 页面不允许从 ht ...