this 问题这次全了
作者:写Bug 链接:https://segmentfault.com/a/1190000015438195
this的指向已经是一个老生常谈的问题,每逢面试都要去复习复习,近来巩固js的基础,决心彻底掌握这个知识点,一劳永逸。说明一下,为了不影响大家的思考过程,下面的代码都不会去注释答案,想知道答案,只需要去控制台执行一下。
四类场景逐一击破
首先,分析this的指向共有四种类型,在分析之前,我们首先带好两个锦囊:
1、函数被调用时(即运行时)才会确定该函数内this的指向。因为在函数中this与arguments是两个特殊的变量,在函数被调用时才会取得它们,而且搜索这两个变量时只会在活动对象范围里面去搜。(有关活动对象与变量对象的知识,请看js中的活动对象与变量对象什么区别?)
2、要确定函数中this的指向,必须先找到该函数被调用的位置。
认准第一种 test()
形式
var a = 1
function test () {
console.log(this.a)
}
test()
直接不带任何引用形式去调用函数,则this会指向全局对象,因为没有其他影响去改变this,this默认就是指向全局对象(浏览器是window,Node中是global)的。这个结论是在非严格模式的情况下,严格模式下这个this其实是undefined的。
认准第二种 xxx.test()
形式
var a = 1
function test () {
console.log(this.a)
}
var obj = {
a: 2,
test
}
obj.test()
这种形式对比起第一种,很明显 test()
已经是名花有主的了!看清楚,是谁呼唤的 test()
?没错,就是obj,所以this的指向就不言而喻了。一句话,谁去调用这个函数的,这个函数中的this就绑定到谁身上。
var a = 1
function test () {
console.log(this.a)
}
var obj = {
a: 2,
test
}
var obj0 = {
a: 3,
obj
}
obj0.obj.test()
即使是这种串串烧的形式,结果也是一样的, test()
中的this只对直属上司(直接调用者obj)负责。再来看一个综合点的例子:
var a = 1
function test () {
console.log(this.a)
}
var obj = {
a: 2,
test
}
var testCopy = obj.test
testCopy()
嗯,聪明的你一定想到,换了个名字就能骗到我了!?虽然经过了一波改名换姓,但本质上还不是 obj.test()
嘛!结果一定和上面一样!唔,请F12在控制台试试,竟然……其实这里并不需要去思考什么,按照我们的套路,我们就认函数调时的样子,有没有看到最后调用的时候跟第一种情况一毛一样?我再介绍一个场景大家一定不会觉得陌生:
var a = 1
function test () {
console.log(this.a)
}
var obj = {
a: 2,
test
}
setTimeout(obj.test)
你可以意会一下setTimeout的本质,是不是相当于有一个setTimeout函数,接收两个参数:
function setTimeout (fn, time) {
// 这里干了一大波不可描述的事情,最后会去调一下你传进来的回调函数
fn()
}
看到怎样调用你传进来的函数了吗!?再想想我们第一种形式的标题认准第一种 test()
形式。
认准第三种 test.call(xxx)/test.apply(xxx)/test.bind()
形式
看了上面两种形式之后,你可能会想,我非常讨厌上面那些矫情的扭扭捏捏的九曲十八弯的调用方式,让人毫无安全感,我要我自己指定this的指向!没问题,我的代码我做主:
var a = 1
function test () {
console.log(this.a)
}
var obj = {
a: 2,
test
}
var testCopy = obj.test
testCopy.call(obj)
可以看到,我们通过call(apply跟call的区别只是传参,作用是一样的,bind有点区别,bind能让我们的函数延迟执行,apply与call调用就执行,所以bind这样的形式我们也称为函数柯里化,这些就不是我们这里要说的啦)来调用testCopy,并且传入了你想要this指向的上下文,那么this就会乖乖按照你的指示行事啦。看到这里,我们也可以想象第一、二种形式其实可以转化成call/apply的形式,有一篇比较棒的文章描述了这样的思考过程,大家也可以看看【this 的值到底是什么?一次说清楚】
认准第四种 new Test()
形式
终于到了最后一种形式了,这种形式比较好认,因为有标志性的new:
var a = 1
function Test (a) {
this.a = a
}
var b = new Test(2)
console.log(b.a)
new这个操作符其实是new了一个新对象出来,而被new的test我们称为构造函数,我们可以在这个构造函数里定义一下将要到来的新对象的一些属性。那么在构造函数里,我们怎样去描述这个还未出生的新对象呢?没错,就是用this。所以构造函数里的this指的就是将要被new出来的新对象。
One more thing
感谢大家看到这里,但还要说最后一种形式。等等,不是说好的只有四种形式吗!稍安勿躁,正常套路下确实只有上面四种,但是有个东西别忘了,就是大家最喜欢的箭头函数。
var a = 1
var test = () => {
console.log(this.a)
}
var obj = {
a: 2,
test
}
obj.test()
来,往上翻一下我们的第一个锦囊,“函数被调用时(即运行时)才会确定该函数内this的指向。”现在函数这两个字要加个词修饰一下,变成普通函数(非箭头函数)才能区别于箭头函数。箭头函数中的this在函数定义的时候就已经确定,它this指向的是它的外层作用域this的指向。
最后
我们最后还要说:“到此为止,真的没有了。”
希望看完这篇文章之后,再有人问this指向的问题,你可以嘴角微微上扬,冷笑一声:“不要再问我this的指向问题了。”
扬长而去。
- 我的WCF之旅 (11): 再谈WCF的双向通讯-基于Http的双向通讯 V.S. 基于TCP的双向通讯
- 更新弹幕系统的心得体会
- 我的WCF之旅(6):在Winform Application中调用Duplex Service出现TimeoutException的原因和解决方案
- 我的WCF之旅 (11): 再谈WCF的双向通讯-基于Http的双向通讯 V.S. 基于TCP的双向通讯
- 我的WCF之旅(6):在Winform Application中调用Duplex Service出现TimeoutException的原因和解决方案
- 扩展mysql - 手把手教你写udf
- scrapy初体验 - 安装遇到的坑及第一个范例
- Linux性能监控 - CPU、Memory、IO、Network
- 浅谈UDP(数据包长度,收包能力,丢包及进程结构选择)
- WCF版的PetShop之三:实现分布式的Membership和上下文传递
- “高并发”问题如何解决?腾讯云一分钟配置的“黑科技”帮您
- 初探JavaScript(三)——JS带我"碰壁"带我飞
- 初探JavaScript(四)——作用域链和声明提前
- 开发人员看测试之运行Github中的JBehave项目
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发中计算器的sin、cos及tan值计算问题分析
- Android开发实现绘制淘宝收益图折线效果示例
- Android自定义View实现搜索框(SearchView)功能
- android 监听SD卡文件变化的实现代码
- Android监听手机短信的示例代码
- Android开发之图片压缩工具类完整实例
- Android6.0开发中屏幕旋转原理与流程分析
- Android中WebView的基本配置与填坑记录大全
- Android开发实现ListView异步加载数据的方法详解
- Android开发实现AlertDialog中View的控件设置监听功能分析
- 详解Android 语音播报实现方案(无SDK)
- Android实现中轴旋转特效 Android制作别样的图片浏览器
- Android使用DrawerLayout实现双向侧滑菜单
- Android实现3D推拉门式滑动菜单源码解析
- Android编程处理窗口控件大小,形状,像素等UI元素工具类