浅谈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 相关文章推荐
js查错流程归纳
May 04 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
window.location.hash知识汇总
Nov 09 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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动态变静态原理
2006/11/25 PHP
PHP语法速查表
2007/01/02 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php常用hash加密函数
2014/11/22 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
JS的get和set使用示例
2014/02/20 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
js微信分享实现代码
2020/10/11 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
如何使用Python 打印各种三角形
2019/06/28 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
小学生个人先进事迹材料
2014/05/08 职场文书
创建青年文明号材料
2014/05/09 职场文书
作风整顿剖析材料
2014/09/30 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
大学生暑期实践报告
2015/07/13 职场文书
军事理论课感想
2015/08/11 职场文书
如何写好竞聘报告
2019/04/03 职场文书