Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >详解javascript中this的工作原理

详解javascript中this的工作原理

作者头像
用户6167509
发布于 2019-09-04 02:26:17
发布于 2019-09-04 02:26:17
1.2K00
代码可运行
举报
文章被收录于专栏:一路向前端一路向前端
运行总次数:0
代码可运行

在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向。

一、指向 window:

在全局中使用 this,它将会指向全局对象,因为浏览器中运行的 JavaScript 的全局对象默认为 window, 所以,此时 this 指向 window。

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(this) // 控制台将打印出 window 对象

在全局作用域内的函数调用, this 也会执行 window。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function foo(){
    console.log(this);
};

foo(); // 控制台也会打印出 window 对象

此处并不难理解,因为全局对象默认为 window,则 foo() 实质是 window.foo()。

其实,在javascript中函数调用时,this都会指向window对象。看下面的执行结果:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function foo(){
    console.log(this);
};
            
var demo = document.querySelector(".demo");
            
demo.onclick = foo;         //this指向demo元素对象
            
demo.onclick = function(){
    foo();                  //this指向window对象
};

注意:在 ES5 中,使用严格模式时,不存在全局变量, 此时 this 将不再指向 window, 而是 undefined 。

二、指向方法调用的对象

在对象的方法调用中,this 指向该方法调用的对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var obj = {
    getMe: function(){
        console.log(this)
    }
};

obj.getMe(); // 控制台打印出 obj 对象

三、构造函数内,指向调用构造函数所创建的对象实例:

通常我们会使用 new 关键词调用构造函数创建新的对象实例,此时构造函数内的 this 就会指向这个新创建出来的对象。

如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//构造函数
function Person(name){
    this.name = name;
    this.getMe = function(){
        console.log(this);
    }
};

var joe = new Person("joe");

joe.getMe(); //控制台打印出一个新的名字为 “joe” 的 Person 实例

四、使用函数的 call 或 apply 方法时,this 将会被显式设置为函数调用的第一个参数:

例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var obj = {
    name: "object"
};

function a(){
    console.log(this)
};

a.call(obj); //控制台打印出 obj 对象

出现这样的结果是由 call 和 apply 的实现原理决定的,call 和 apply 改变 this 指向的原理是它改变了函数的运行上下文环境。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript中的this指向问题
在JavaScript中,关键字 this 是一个特殊的对象,它在函数被调用时自动创建。通常用来指向当前执行的函数所属的对象。this 的值在函数的每次调用时可能会发生变化,具体取决于函数是如何被调用的。
九仞山
2023/10/14
3150
JavaScript深入学习this、call、apply和bind
this的指向问题一直是面试里的常客。也是es5的众坑之一。对于es6而讲,它极大地避免了this带来的错误。但是为了为了维护一些老代码,还是有必要了解this的。
Javanx
2019/09/04
4150
JavaScript深入学习this、call、apply和bind
《现代JavaScript高级教程》JavaScript函数上下文和this关键字
函数是 JavaScript 中最重要的概念之一,理解函数的定义和调用方式涉及到多个知识点,特别是函数的上下文,即函数中的 this 关键字,是前端面试中必考的知识点。本文将介绍函数上下文、箭头函数以及修正 this 指向的方法。
linwu
2023/07/27
2080
【面试需要】掌握JavaScript中的this,call,apply的原理
掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb
达达前端
2020/02/13
5310
JavaScript 中 this 的使用技巧总结
在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了。
哲洛不闹
2018/09/18
9030
JavaScript 中 this 的使用技巧总结
划重点:js中的this、call、apply
2、作为普通函数调用时,函数中的this指向全局对象,在浏览器环境中,指向的就是全局对象window
前端_AWhile
2019/08/29
1K0
JavaScript 中 this 指向所有场景详细分析(译)
前端开发中,每天和我们见面最多的也许就是 this 关键字了,一直想总结一篇 this 的文章,然后看到了 Gentle Explanation of "this" in JavaScript ,总结的太好了,这里就翻译一下吧。
windliang
2022/09/23
5380
JavaScript 中 this 指向所有场景详细分析(译)
一文读懂Js中的this指向
this关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。
hellocoder2029
2022/10/10
9630
JavaScript中的this关键字
this的值:当前执行代码的环境对象,this的指向不取决于它在什么位置创建,完全取决于函数在什么地方被调用,this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。
w候人兮猗
2020/07/01
6310
JavaScript中的this(你不知道的JavaScript)
JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心;随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所以,自己花费了大约2周的时间去查贴、翻阅之前读的书籍,将this的全貌展示如下。
奋飛
2019/08/15
4720
JavaScript 之 this 详解
JavaScript作为一种脚本语言身份的存在,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript支持函数式编程、闭包、基于原型的继承等高级功能。由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。本文就采撷些例子以浅显说明在不同调用方式下的不同含义。 全局的t
晚晴幽草轩轩主
2018/03/27
1.1K0
javascript基础修炼(2)——What's this(上)
this是javascript关键字之一,是javascript能够实现面向对象编程的核心概念。用得好能让代码优雅高端,风骚飘逸,用不好也绝对是坑人坑己利器。我们常常会在一些资料中看到对this的描述是:
大史不说话
2018/09/10
4530
javascript基础修炼(2)——What's this(上)
关于 JavaScript 中 this 的详细总结
在 JavaScript 中,函数中的 this 指向,很多同学总是理不清楚【这必然会带来一些问题】。确实,JavaScript 中,函数的 this 指向比较复杂多变。它和你调用的方式有关系,和 **严格模式** 或者 **非严格模式** 有关系,和你是否使用了箭头函数有关系,和你在使用函数时是否传入了 this 有关系,和你是否主动修改了调用对象有关系。
零式的天空
2022/03/24
3500
this指针的原理
讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指针,从这个角度理解this指针更加有现实意义。
全栈程序员站长
2022/08/29
2500
七、this
我们在学习JavaScript的过程中,由于对一些概念理解得不是很清楚,但是又想要通过一些方式把它记下来,于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。
用户6901603
2020/07/27
3280
七、this
JavaScript学习总结(四)——this、原型链、javascript面向对象
根据题目要求,对给定的文章进行摘要总结。
张果
2018/01/04
1.5K0
JavaScript学习总结(四)——this、原型链、javascript面向对象
JavaScript函数中的this(一)
在JavaScript中,关键字 this 是一个特殊的对象引用,它指向当前执行函数的上下文对象。this的值在函数被调用时确定,并且可能根据函数的调用方式和上下文的不同而变化。this的使用是非常重要的,它允许我们访问和操作当前执行函数所属的对象和环境。
堕落飞鸟
2023/05/17
6780
带你真正了解 JavaScript 中的 this
任何情况下,this 都不会默认指向函数自己,除非使用 bind 绑定的方式修改 this 为函数自己。
石燕平
2019/10/14
4740
JavaScript 设计模式学习第二篇-关于this、new、bind、call、apply
虽然标题关于this、new、bind、call、apply,但实际上这些都离不开 this,因此本文将着重讨论 this,在此过程中分别讲解其他知识点。
越陌度阡
2020/11/26
2970
js中this指向问题
函数中this指向对于一些开发者来说一直是一个比较头疼的问题,this在js中比较灵活,不同的情况指向不同,小shy总结出了函数调用的this指向的一些情况,供大家参考。
IT工作者
2022/05/11
2.7K0
推荐阅读
相关推荐
JavaScript中的this指向问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验