详解JavaScript中的this指向问题
作者:清蒸胖头鱼 发布时间:2023-08-23 00:52:03
题记
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对象呢?
这里需要补充三点:
如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
如果一个函数中有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
,又因setInterval
是window
点出了的,所以this
指向window
。
call
、apply
、bind
改变指向情况
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
方法在该情况比较常用,当然如果使用call
或apply
方法来代替也行,得到的结果也是正确的,但是call
和apply
方法会在调用后马上执行,那样就没了延时的效果,定时器也就没有意义了。
来源:https://juejin.cn/post/6924956367577546759
猜你喜欢
- 以下是我做美工的两年生活中一条条总结出来的经验,每一点都是我常用的,虽然不是什么大学问,但我觉得要互相学习才能提高,所以现在拿出来和大家一起
- 在sql语句后使用 SCOPE_IDENTITY() 当然您也可以使用 SELECT @@IDENTITY 但是使用 SELECT @@ID
- language.xml 代码如下:<?xml version="1.0" encoding=
- 尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一
- 论坛上看到有人问ASP是否可以定时触发事件,我就顺便做了一个玩玩。其实做这个的原理是很简单的,只是我们当时没有仔细的去想想该怎么实现,我这里
- 核心代码# -*- coding: utf-8 -*-'''python读取英文文件,将每个单词按照空格分开,并将每
- 导航设计是结构层面设计中的主要工作之一,在软件中,导航设计的好坏,直接关系到用户使用是否能够流畅。面对较复杂的导航,我们第一反应是将其简化。
- ASP给图片加水印是需要组件的...常用的有aspjpeg软件和中国人自己开发的wsImage软件,可以上网搜索下载这两个软件,推荐使用咱们
- 我们提倡无论何时都尽可能地使用CSS,这样我们更容易取得成功.现在浏览器对CSS的支持已经非常好,肯定足以让你用来控制你的网页布局与排版.但
- asp之家注:那么为什么要使用分页呢?当记录不多的时候,如10个或20个,我们可以也没必要使用分页来显示数据,但是数据是在不断增加的,当到了
- 本文实例为大家分享了python实现抖音点赞功能的具体代码,供大家参考,具体内容如下#coding=utf-8from time impor
- 一、匿名块和命名块◆PL/SQL块分为良好总:命名块和匿名块。◆匿名块:以declare或begin开始,每次执行匿名块都要通过客户端工具将
- 经过一个阶段的asp学习,下面我们结合所学过的内容建立一个最简单的聊天室,虽然很简单,但是大家可以通过他来掌握一个聊天室建立的基本过程,并且
- 很多文章都有提到关于使用phpExcel实现Excel数据的导入导出,大部分文章都差不多,或者就是转载的,都会出现一些问题,下面是本人研究p
- 本文介绍了6个asp常用的判断函数的语法和使用方法,有IsArray 函数,IsDate 函数 ,IsEmpty 函数,IsNull 函数,
- 在MySQL的管理过程中,会遇到PC Server脱机或者重启,我需要在主机启动后再将MySQL服务启动。如果上百台或者更多的MySQL主机
- 下面我们以论坛排行榜举例说明:<% @ LANGUAGE="VBSCRIPT" %&
- 在数据库的开发过程中,经常会遇到复杂的业务逻辑和对数据库的操作,这个时候就会用SP来封装数据库操作。如果项目的SP较多,书写又没有一定的规范
- 随着信息技术的飞速发展,数据处理不仅在数量上要求越来越大,而且在质量上也要求越来越高。操作系统的稳定对数据库来说是十分紧要的,在数据库可操作
- // 执行AJAX请求的通用函数//带一个参数,是包含一系列选项的对象function ajax(options){//如果用户没有提供某个