JavaScript this指向相关原理及实例解析


Posted in Javascript onJuly 10, 2020

记得初学 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 的指向。 后面我会专门写一篇关于更改 this 指向的文章,这里就不再赘述了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 #Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 #Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 #Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 #Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 #Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 #Javascript
You might like
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP数组实例详解
2016/06/26 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
laravel5.6实现数值转换
2019/10/23 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
python实现划词翻译
2020/04/23 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Python制作爬虫采集小说
2015/10/25 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python实现简易动态时钟
2018/11/19 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
物资采购方案
2014/06/12 职场文书
大学生学期个人总结
2015/02/12 职场文书
工作时间调整通知
2015/04/24 职场文书
入党申请书怎么写?
2019/06/21 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server