浅谈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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
jQuery链使用指南
Jan 20 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
node.js require() 源码解读
2015/12/13 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python如何生成树形图案
2018/01/03 Python
python中元组的用法整理
2020/06/15 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
测量实习生自我鉴定
2013/09/19 职场文书
经理职责范文
2013/11/08 职场文书
联谊会主持词
2014/03/26 职场文书
签约仪式策划方案
2014/06/02 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
小学生安全教育主题班会
2015/08/12 职场文书