javascipt中this的指向问题记录

一、前言

前端中this的指向一直是令人比较头疼的问题。由于没有弄懂this的指向,导致在学习框架总会出现undefined错误,这次借这个机会梳理一下。

二、this指向的几种情况

  • 在全局作用域中
  • 在函数中
  • 在方法中
  • 在箭头函数中
  • 在事件处理函数中

三、在全局作用域中

注意:在不同执行环境下的全局作用于中this指向是不一样的,这取决于开发者是如何绑定的。在浏览器执行环境中,this表示Window对象;在node执行环境中,this表示{};在react框架中,this表示undifined。

四、在函数中

在函数中,如果没有修改指向,this指向与全局作用域的this指向保持一致。

五、在方法中

在方法中,如果没有修改指向,this指向调用者,谁调用就指向谁。

六、在箭头函数中

在箭头函数中,this指向与上一层this保持一致。与上述在函数中的this比较,显然成立。箭头函数常用于方法内部的回调函数中,使this指向与方法内部的this指向保持一致,指向调用方法的对象。

七、在事件处理函数中

在事件处理函数中,如果是内嵌函数绑定,那么this指向与在函数中this指向保持一致;如果是内嵌方法调用绑定,那么this指向与在方法中this指向保持一致;如果是element.onEvent=function(){}和element.addEventListener("event", function(){})绑定,那么this指向触发事件的元素。

相关推荐
千慌百风定乾坤10 小时前
Go 语言入门指南:基础语法和常用特性解析(下) | 豆包MarsCode AI刷题
青训营笔记
FOFO10 小时前
青训营笔记 | HTML语义化的案例分析: 粗略地手绘分析juejin.cn首页 | 豆包MarsCode AI 刷题
青训营笔记
滑滑滑2 天前
后端实践-优化一个已有的 Go 程序提高其性能 | 豆包MarsCode AI刷题
青训营笔记
柠檬柠檬2 天前
Go 语言入门指南:基础语法和常用特性解析 | 豆包MarsCode AI刷题
青训营笔记
用户967136399652 天前
计算最小步长丨豆包MarsCodeAI刷题
青训营笔记
用户52975799354723 天前
字节跳动青训营刷题笔记2| 豆包MarsCode AI刷题
青训营笔记
clearcold3 天前
浅谈对LangChain中Model I/O的见解 | 豆包MarsCode AI刷题
青训营笔记
夭要7夜宵4 天前
【字节青训营】 Go 进阶语言:并发概述、Goroutine、Channel、协程池 | 豆包MarsCode AI刷题
青训营笔记
用户336901104444 天前
数字分组求和题解 | 豆包MarsCode AI刷题
青训营笔记
dnxb1234 天前
GO语言工程实践课后作业:实现思路、代码以及路径记录 | 豆包MarsCode AI刷题
青训营笔记