浅谈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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
浅谈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中截取中文字符串的代码小结
2011/07/17 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
对python Tkinter Text的用法详解
2018/10/11 Python
详解python中index()、find()方法
2019/08/29 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
教师业务学习制度
2014/01/25 职场文书
优秀求职信范文分享
2014/01/26 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python