浅谈JavaScript中this的指向问题


Posted in Javascript onJuly 28, 2020

JavaScript中this指向问题

记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包、原型(原型链)并称 JS 武林中的三大魔头。如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒。个人认为在这三大魔头中,this 指向问题的武功最菜(难度最低)。俗话说柿子捡软的捏,那我们就先从 this 指向问题下手。

先记住攻克 this 指向问题的口诀(前辈们的总结):哪个对象调用函数,函数里的 this 就默认指向哪个对象(注意 this 只能指向对象)。这里说“默认指向”是因为我们通过箭头函数、call、apply、bind等手段来改变 this 的指向。现在我们只讨论 this 的默认指向。

全局作用域下以及全局作用域的函数中,this默认指向全局对象window

在严格模式下,全局作用域的函数中,this默认指向 undefined, 这是严格模式所规定的。

// 非严格模式下
console.log(this); // Window
function doSomething(){
 console.log(this); // Window
}
doSomething(); // 这里可以看成window.doSomething(),所以函数里的this指向全局对象window
// 严格模式下
'use strict';
console.log(this); // Window
function doInStrict(){
 console.log(this); // undefined
}
doInStrict();

对象里的函数,this指向该对象

var a = 1;
var obj = {
 a: 2,
 fn: function(){
  console.log(this); // {a: 2, fn: ƒ}
  console.log(this.a); // 2
 }
};
obj.fn();

上面函数被调用后,从打印结果可以看出此时 this 指向的是调用函数的对象 obj。如果将对象中的函数赋给全局对象中定义的变量 fn1,执行 fn1 又会出现什么结果呢?

var a = 1;
var obj = {
 a: 2,
 fn: function(){
  console.log(this); // Winidow
  console.log(this.a); // 1
 }
};
var fn1 = obj.fn;
fn1(); // 可以看成window.fn1();

从上面的例子可以看出,fn1 与 obj.fn 指向的函数是相同的,但是调用它的对象不同,那么函数中 this 的指向也就不一样了。

再看一个比较复杂的例子:

var a = 0;
function fn(){
	consoloe.log(this.a);
}
var obj1 = {
	a: 1,
	fn: function(){
		console.log(this.a);
	}
};
var obj2 = {
	a: 2,
	fn: function(){
		fn();
		obj1.fn();
		console.log(this.a);
	}
}
obj2.fn();

先说下执行结果,分别打印 0 1 2。当 obj2 调用 fn 函数时,先执行的是 fn(),这个函数是在全局作用域中定义的,该调用可以看成 window.fn(),所以,该函数内部的 this 指向的是 window 全局对象,this.a 自然就是全局对象中的 a 值(0)。

接着执行的是 obj1.fn(),它会从 obj1 中找到 fn 函数并执行。obj1 中的函数 fn 执行时调用它的对象是 obj1,所以,此时函数内部的 this 指向的就是 obj1 自身。那么 this.a 查到的值也就是对象 obj1 中 a 的值(1)。

最后打印函数中 this 所处的函数 fn 是被 obj2 调用的,那么自然而然 this 就指向了 obj2,所以 this.a 的结果就是 2 了。

从上面这个例子我们可以看出:函数内部 this 指向跟调用函数的对象有关,跟函数在哪里调用没有关系。

Window内置函数的回调函数中,this指向Window对象。

window 的内置函数( setInterval setTimeout 等),其回调函数中的 this 指向的是window对象。

var name = 'window';
var obj = {
 name: 'obj',
 func: function(){
  setTimeout(function () {
   console.log(this.name) // window
  },1000)
 }
}

obj.func()

但是一般在开发中,很多场景都需要改变 this 的指向。 请参考JS中this指向的更改,这里就不再赘述了。
this 既不指向函数自身也不指向函数的词法作用域,this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

找到函数直接调用的位置后用下面的几条规则就可以判断出 this 的绑定对象。

  1. 由 new 调用?绑定到新创建的实例对象上。
  2. 由 call、apply、bind调用?绑定到指定的对象上。
  3. 由上下文对象调用?绑定到那个上下文对象上。
  4. 默认:在严格模式下绑定到 undefined,否则绑定到全局对象 Window 上。
  5. ES6 中的箭头函数会继承外层函数调用的 this 绑定,这和 var self = this;的绑定机制一样。

到此这篇关于浅谈JavaScript中this的指向问题的文章就介绍到这了,更多相关JavaScript中this指向问题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
浅谈JavaScript中this的指向更改
Jul 28 #Javascript
Postman内建变量常用方法实例解析
Jul 28 #Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 #Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 #Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 #Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 #Javascript
vue实现虚拟列表功能的代码
Jul 28 #Javascript
You might like
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python urlopen 使用小示例
2008/09/06 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python设计模式大全
2016/06/27 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python笔记之代理模式
2019/11/20 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
python3 kubernetes api的使用示例
2021/01/12 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
计算机科学系职业生涯规划书
2014/03/08 职场文书
座谈会主持词
2014/03/20 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年行政部工作总结
2015/04/28 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL