详解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 window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
原生js实现下拉框选择组件
Jan 20 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 读取Postgresql中的数组
2013/04/14 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
Javascript 解疑
2009/11/11 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python中实现的RC4算法
2015/02/14 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
windows下python安装小白入门教程
2018/09/18 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python math模块的基本使用教程
2021/01/16 Python
局域网标准
2016/09/10 面试题
Linux的文件类型
2012/03/07 面试题
毕业评语大全
2014/05/04 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js