详解JavaScript中的this指向问题


Posted in Javascript onFebruary 05, 2021

题记

JS中的this指向一直是个让初学者头疼的问题。今天,我们就一起来瞅瞅this倒地是咋回事,详细说说this指向原则,从此不再为了this指向操碎了心。

开篇

首先我们都知道this是Javascript语言的一个关键字。

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。 那么接下来我们一步步探索下这个问题。

探索一

function a() {
  var user = "清蒸胖头鱼";
  console.log(this.name); //undefined
  console.log(this); //Window
 }
 a();
 window.a();//两种结果相同

如我们上文所说的this的最终指向的是那个调用它所在函数的对象,这里a其实是由window对象点出来的。

探索二

var obj = {
  name: '清蒸胖头鱼',
  f1: function () {
   console.log(this.name);//清蒸胖头鱼
  }
 };
 obj.f1();

再次强调一点this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁;这个例子this所在的f1函数是由obj对象调用的,所以这里的this指向obj对象。

探索三

如果要彻底的搞懂this必须看接下来的几个例子

var obj = {
  a: 5,
  b: {
   a: 10,
   fn: function () {
    console.log(this.a); //10
   }
  }
 };
 obj.b.fn();

不是说this的最终指向的是那个调用它所在函数的对象吗?这里为什么不指向obj对象呢?

这里需要补充三点:

  1. 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
  2. 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
  3. 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

看到这相信大家基本掌握了this指向的原则了吧,再碎碎念一遍:this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。

下面给大家介绍this几种不同的使用情况

构造函数(new 关键字)情况

function Student() {
  this.name = '清蒸胖头鱼';
 }
 var s1 = new Student();
 console.log(s1.name);// 清蒸胖头鱼

这里之所以对象s1可以点出函数Student里面的name 是因为new关键字可以改变this的指向,将这个this指向对象s1.

// new 关键字执行的过程
 1. 在函数体内创建一个空的对象.
 2. 让当前this指向这个空的对象.
 3. 通过this给当前空的对象添加键值对.
 4. 返回已经添加好所有键值对的对象给外面的变量.

定时器里的this指向情况

var num = 0;
 function Obj() {
  this.num = 1;
  this.getNum1 = function () {
   console.log(this.num);
  };
  this.getNum2 = function () {
   setInterval(function () {
    console.log(this.num);
   }, 1000);
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//0 (window.num)

o.getNum2()值之所以为0,也就是这里的this指向window,再拿出我们的this指向原则解释:this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。

解: this.num所在的函数为定时器setInterval内的function () { console.log(this.num);},根据this指向原则当该函数被执行,this指向它的上一级对象。setInterval,又因setIntervalwindow点出了的,所以this指向window

callapplybind 改变指向情况

var num = 0;
 function Obj() {
  this.num = 1;
  this.getNum1 = function () {
   console.log(this.num);
  };
  this.getNum2 = function () {
   setInterval(function () {
    console.log(this.num);
   }.bind(this), 1000);//利用bind将this绑定到这个函数上
  };
 }
 var o = new Obj();
 o.getNum1();//1  (o.num)
 o.getNum2();//1 (o.num)

解释:

bind()方法是Function.prototype上的一个方法,当被绑定函数调用时,bind方法会创建一个新函数,并将第一个参数作为新函数的运行时的this。

根据原则:

没使用bind方法前:被调用时:this.num指向的是调用它所在函数的对象,也就是window.setTimeout对象。 使用bind方法后:被调用时:将原来的this重新指向到→调用getSum2函数(就是新this所在的函数)的对象。这里构造函数,通过new调用,所以指向o对象。

bind方法在该情况比较常用,当然如果使用callapply方法来代替也行,得到的结果也是正确的,但是callapply方法会在调用后马上执行,那样就没了延时的效果,定时器也就没有意义了。

以上就是详解JavaScript中的this指向问题的详细内容,更多关于JavaScript this指向的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
JS数组去重详情
Nov 07 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 #Javascript
详解javascript脚本何时会被执行
Feb 05 #Javascript
前端如何实现动画过渡效果
Feb 05 #Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 #Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
如何在JavaScript中使用localStorage详情
Feb 04 #Javascript
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
You might like
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
win10安装python3.6的常见问题
2020/07/01 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
华为慧通笔试题
2016/04/22 面试题
违反学校规定检讨书
2014/01/18 职场文书
三年级语文教学反思
2014/02/01 职场文书
五一手机促销方案
2014/03/08 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
情况说明书格式及范文
2019/06/24 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB