我对JavaScript中this的一些理解

2023-11-02

因为日常工作中经常使用到this,而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。
这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验,为了能让自己更好的理解this,进而总结一篇文章。

this 是什么

this是 JavaScript 语言的一个关键字。它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数。

this 指向的四种情况

这四种情况基本涵盖了JavaScript中常见的this指向问题

1. 全局的函数调用,this指向window

var a = 1;
function fn() {
   console.log(this.a);
}
fn();  // 1

这种 情况下的this其实就是window对象,这个很好理解。
但是还有一种情况,就是匿名函数的this也会指向window

var a= 'window';
var obj={a: 'object'}
obj.fn=function(){
    console.log(this.a);//Object
    +function(){
        console.log(this.a)//window
    }()
}
obj.fn()

匿名函数的执行环境具有全局性,因此它的this对象通常指向windows。
如果对此有疑惑,可以看知乎上的答案:知乎 - 匿名函数的this指向为什么是window?

2. 作为对象方法的调用,this指向该对象

var a ='window'
var obj={
  a: 'object',
  fn: function(){
    console.log(this.a);
  }
}

obj.fn(); // object

当函数作为某个对象的方法调用时,this就指这个函数所在的对象。

3. 作为构造函数调用,this指向实例

function fn() {
 this.x = 1;
}
var obj = new fn();
console.log(obj.x) // 1

构造函数中的this,在通过new之后会生成一个新对象,this就指这个新对象。
new有疑问的话,可以看 冴羽的博客 JavaScript深入之new的模拟实现

4. 使用call/apply/bind调用, this指向第一个参数

var obj1={
  a: 'boj1'
}
var obj2={
  a: 'obj2'
}
var obj3={
  a: 'obj3'
}
function fn(){
  console.log(this.a);
}
// apply
fn.apply(obj1);// 'obj1'
// call
fn.call(obj2);// 'obj2'
// bind
var fnBind= fn.bind(obj3);
fnBind();// 'obj3'

call/ apply / bind 都有一个共同的特点,就是改变this的指向,使用这种方法可以把别人的方法拿过来用到自己身上。

第一个参数为 null 的时候,视为指向 window.

var a='window'
var obj={
  a: 'boj',
  fn: function (){
    console.log(this.a);
  }
}
obj.fn.call(null);// 'window'

在这里如果是obj.fn()调用的fn()方法,this应该指向obj没错。
但是因为call(null)的存在,改变了指向,所以this指向了window

深入理解

正因为比较难理解,所以this指向也是面试时最容易遇到的问题,比如下面这道我曾遇到的一个面试题:

var length = 10;
function fn(){
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn){
    fn();
    arguments[0]();
  }
};
obj.method(fn, 1);

在这道题里,不仅考察了对this熟悉程度,还考察了函数的传参形式、作用域、以及arguments这种特殊的数组的理解。
只有真正理解了这些才能正确的判断this究竟指向了谁。
所以,只有对JavaScript中的各项知识点深入理解,才会对this的概念越加清晰。

参考:
阮一峰 - Javascript 的 this 用法
前端开发博客 - 深入理解JavaScript this

文章仅日常学习工作所得,欢迎大家访问我的blog

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我对JavaScript中this的一些理解 的相关文章

  • 如何让 Google Apps 脚本进行 SHA-256 加密?

    我需要使用文本输入 1 轮 十六进制输出 SHA 256 加密来加密字符串 这应该是一个长度为 64 的字符串 我在 Google Apps 脚本文档中尝试过的每个 SHA 256 加密模块都会返回一组数字 例如 function SHA2
  • 少吞咽然后缩小任务

    我必须在 gulp 中执行 2 个步骤 减少 css 文件格式 缩小生成的 css 文件 这是我的吞咽文件 var gulp require gulp watch require gulp watch less require gulp l
  • 使用 Javascript 实现 Tinder 风格的拖放手势?

    我正在尝试找出哪些库可以用于仅使用 Javascript 的 Tinder 风格拖放手势 需要创建一个响应拖动手势的 HTML 元素 触摸并按住时 允许元素跟随用户的手指移动 当用户移开手指时 该元素会 动画回到原来的位置 如果元素在释放时
  • 如果Functions是javascript中的对象,为什么function.constructor指向Function而不是Object?

    当像这样从窗口对象创建以下函数时 function userInfo 既然函数是对象 为什么 userInfo constructor 显示 Function 而不是 Object 当使用以下内容时 它甚至显示函数而不是对象 Functio
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • 方向改变后的javascript最大视口高度Android和iOS

    目标 查找设备的最大视口高度 包括设备的空间address bar这样我们就可以动态调整 min body 的大小并将内容向上推 问题 移动浏览器处理方向状态的方式不同 方向变化时更新 DOM 属性的方式也不同 使用 JavaScript
  • 流媒体性能 - Canvas 与

    我正在开发一个应用程序 需要通过 webSocket 连接以每秒至少 30 帧的速度持续传输图像 我遇到了一些性能问题 并希望尽我所能进行优化 我想知道使用不断更新的图像之间的性能差异是什么 就像这样 img src someDynamic
  • 如何在Javascript中声明静态变量[重复]

    这个问题在这里已经有答案了 在下面的代码中 我希望有一个计数器来跟踪创建的 Person 对象的数量 这段代码没有这样做 我该如何实现呢 function Person this name Peter this counter this c
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • 尝试使用 CasperJS 跟踪 iframe 中的链接

    我正在尝试使用CasperJS http casperjs org index html跟踪 iframe 中的链接 但我似乎无法获取 iframe 的文档 这是使用我找到的 iframe 示例页面进行的测试 第三个 iframe 有一个名
  • Facebook 登录无法在移动浏览器中使用

    我使用 react facebook login 在我的网站中实现了 facebook 登录module https github com keppelen react facebook login 我在 ComponentDidMount
  • Javascript“命名空间”和 jQuery AJAX

    我正在使用此处列出的建议 http www odetocode com articles 473 aspx http www odetocode com articles 473 aspx 使用模拟的JavaScript AJAX网络聊天系
  • 如何更改 Vuetify 日历日期格式

    我正在尝试在以下 Vuetify 日历上启用输入事件 https github com vuetifyjs vuetify blob master packages docs src examples calendars complex e
  • 如何在 Next.js 中正确使用 Mongoose 模型?

    我正在使用 TypeScript 和 MongoDB Mongoose 构建 Next js 应用程序 我在使用 Mongoose 模型时开始遇到错误 这导致它们在每次使用模型时都尝试覆盖模型 导致模型覆盖错误的代码 import mong
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • 如何与使用 child_process.spawn 创建的新创建的服务器交互

    我正在尝试为我的私人托管的 反恐精英全球攻势 服务器制作一个前端 当我点击运行服务器时 在前端 一切正常 服务器启动并记录到控制台 但是如何查看服务器IP地址 服务器中的玩家等信息呢 这是我到目前为止运行服务器的内容 router post
  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的
  • 检测图像是否损坏或损坏

    我需要以编程方式检查用户在我的应用程序上选择作为壁纸的图像是否已损坏或损坏 基本上我为用户提供了选择自己的图像作为壁纸的选项 现在 当图像加载时 我只想检查它是否已损坏 如果您正在寻找 PHP 解决方案而不是 javascript 解决方案
  • python 函数返回 javascript date.getTime()

    我正在尝试创建一个简单的 python 函数 它将返回与 javascript 相同的值new Date getTime 方法 如所写here http www w3schools com js js dates asp javascrip
  • 在 Map() 的条目上使用 Promise.all

    我正在使用 Map 来表示一些键 值对 let myMap new Map myMap set foo bar myMap set foo2 bar42 对于每个 Map 条目 我执行一个返回 Promise 的函数 所有这些 Promis

随机推荐

  • 华为推出手机系统云翻新服务:什么是云翻新?如何使用?

    华为手机系统云翻新是华为推出的一项功能 旨在通过云服务提供系统翻新的服务 它可以帮助用户对手机的系统进行优化和更新 以提高手机的性能和流畅度 具体而言 华为手机系统云翻新功能提供了免费的云空间 用户可以将手机中的系统数据备份到云端 并进行系
  • 一位程序员使用M1 Mac的感受

    作为一个window的java开发者 虽然现在window高配置不卡 但是身边的高级开发者都是使用苹果开发 并且给予高度评价 这里也抱着学习的态度去尝试安利一台MAC作为开发 所以去苹果官网看了一下 但是这次苹果出了一个全新的M1芯片 我在
  • STM32网络通信Web Server中SSI和CGI的应用

    介绍 最近由于项目功能需要 开始研究STM32 WebServer通信以及SSI和CGI应用方法 项目结束后 主要总结浏览器与STM32之间进行通行 STM32作为服务器而浏览器做为客户端进行通行 文件介绍 此部分的代码是根据ST官方的We
  • 免费分享一套 SpringBoot + Vue的排课/选课管理系统,挺漂亮的

    大家好 我是锋哥 看到一个不错的SpringBoot Vue 的排课 选课管理系统 分享下哈 项目介绍 近年来 随着网络学校规模的逐渐增大 人工书写数据已经不能够处理如此庞大的数据 为了更好的适应信息时代的高效性 一个利用计算机来实现学生信
  • Python——requests

    requests是python实现的简单易用的HTTP库 使用起来比urllib简洁很多 因为是第三方库 所以使用前需要cmd安装 pip install requests 安装完成后import一下 正常则说明可以开始使用了 基本用法 r
  • c/c++ 计算字符数组/字符串长度

    1 自定义函数求长度 2 使用strlen 函数 3 使用sizeof 操作符 4 使用length 函数 利用自定义函数的方法 int cont str char s int i 0 while str i 0 return i 利用st
  • 已解决【partially initialized module ‘cv2‘ has no attribute ‘gapi_wip_gst_GStreamerPipeline‘】

    已解决 partially initialized module cv2 has no attribute gapi wip gst GStreamerPipeline 在尝试了几乎所有网上能找到的办法之后 本来已经放弃了 但是过了几天抱着
  • VAN:Visual Attention Network

    Visual Attention Network Submitted on 20 Feb 2022 v1 last revised 11 Jul 2022 this version v5 Computer Vision and Patter
  • 微服务zipkin与turbine同时使用遇到的问题

    最近整合zipkin的时候遇到的问题 如果打开turbine监控时 每个turbine刷新周期内都会有rxjava的调用被zipkin捕获到 由于zipkin中的数据是通过Spring cloud sleuth上传的 查阅https clo
  • 数字化转型下数据库面临的12个挑战

    数字化及数字化转型 是近些年来非常火热的话题 本文将从这一角度切入 谈谈数字化场景下对数据库发展趋势带来的影响 1 数据 数字化 数字化转型 数据 是数字化实现的新引擎 数据是企业开展数字化创新和构建企业数字化基因的核心要素 通过对于服务对
  • React--井字棋小游戏

    安装较新版本的node js 这里使用的是v15 0 1 用以记录React学习笔记 1 搭建本地开发环境 在想要创建项目的文件夹下输入cmd 回车 输入命令npx create react app my app等待项目初始化 等待一段时间
  • 【虾说区块链】4个概念解析区块链

    欢迎收听 虾说区块链 现在区块链这个概念在互联网上相当火热 这里简单做一个普及 不涉及项目推广投资 单纯地对区块链相关基础知识概念作一个说明讲解 本人区块链技术爱好者 结合相关区块链资料总结整理了 虾说区块链 也是自己一个学习笔记 涉及相关
  • 深入React源码揭开渲染更新流程的面纱

    转前端一年半了 平时接触最多的框架就是React 在熟悉了其用法之后 避免不了想深入了解其实现原理 网上相关源码分析的文章挺多的 但是总感觉不如自己阅读理解来得深刻 于是话了几个周末去了解了一下常用的流程 也是通过这篇文章将自己的个人理解分
  • java入门篇

    MyEclipse 8 5编辑器 package second public class test public static void main String args 单行注释System out println java practi
  • Java中StringBuilder和StringBuffer用法以及区别

    Java是目前最为流行的编程语言之一 而字符串则是Java程序中不可避免的部分 在字符串的处理中有两个类 StringBuilder和StringBuffer 这两个类都实现了对可变字符串的操作 在一定程度上可以替代String的功能 但它
  • Jenkins 安装提示:Please wait while Jenkins is getting ready to work...

    http mirror xmission com jenkins updates update center json 重启Jenkins 服务即可
  • Apache Druid分析型数据库设计-查询处理

    Apache Druid系列博客 Apache Druid简介 Apache Druid设计 架构 存储设计 查询处理 本文 官方英文原文 Query processing 查询处理 查询分布在Druid集群中 由Broker进行管理 查询
  • 持续集成——jenkins自动化测试环境安装部署

    介绍 Jenkins是一个独立的开源软件项目 是基于Java开发的一种持续集成工具 用于监控持续重复的工作 旨在提供一个开放易用的软件平台 使软件的持续集成变成可能 前身是Hudson是一个可扩展的持续集成引擎 可用于自动化各种任务 如构建
  • 国内有比Damus更强的去中心化社交,王兴的区块城市这次又抄对了?

    近十天来 一款基于去中心化社交协议Nostr 的客户端Damus突然爆火 刷屏了很多人的朋友圈 也激发了国内Web3创业者对社交赛道的关注和讨论 而在这场仍在持续发酵的网络热潮中 原本定位于元宇宙城市的BlockCity 区块城市 不仅被很
  • 我对JavaScript中this的一些理解

    因为日常工作中经常使用到this 而且在JavaScript中this的指向问题也很容易让人混淆一部分知识 这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验 为了能让自己更好的理解this 进而总结一篇文章 this 是什么 t