面试题更新之-this指向问题

文章目录
- this指向是什么
- 常见情况下 this 的指向
- 怎么修改this的指向
this指向是什么
JavaScript 中的 this 关键字用于引用当前执行代码的对象。它的指向是动态的,根据执行上下文的不同而变化。
常见情况下 this 的指向
- 全局作用域中的 this:
在全局作用域中,this 指向全局对象,即在浏览器环境中指向 window 对象,在 Node.js 环境中指向 global 对象。
console.log(this); // 在浏览器环境中输出 window 对象,在 Node.js 环境中输出 global 对象
- 函数中的 this:
在函数中,this 的指向取决于函数的调用方式。以下是几种常见的情况:
- 函数作为普通函数调用:
当函数作为普通函数调用时,this 指向全局对象(在严格模式下是 undefined)。
function myFunction() {console.log(this);
}myFunction(); // 在浏览器环境中输出 window 对象,在 Node.js 环境中输出 undefined(在严格模式下)
- 函数作为对象的方法调用:
当函数作为对象的方法调用时,this 指向调用该方法的对象。
const obj = {name: 'John',sayHello: function() {console.log(`Hello, ${this.name}!`);}
};obj.sayHello(); // 输出 "Hello, John!"
- 函数作为构造函数调用:
当函数使用 new 关键字作为构造函数调用时,this 指向新创建的实例对象。
function Person(name) {this.name = name;
}const john = new Person('John');
console.log(john.name); // 输出 "John"
- 函数使用 call、apply 或 bind 方法调用:
使用 call、apply 或 bind 方法可以显式地指定函数调用的上下文对象。
function sayHello() {console.log(`Hello, ${this.name}!`);
}const obj1 = { name: 'John' };
const obj2 = { name: 'Jane' };sayHello.call(obj1); // 输出 "Hello, John!"
sayHello.apply(obj2); // 输出 "Hello, Jane!"const boundFunction = sayHello.bind(obj1);
boundFunction(); // 输出 "Hello, John!"
- 箭头函数中的 this:
箭头函数的 this 不会被绑定到任何特定的对象,而是继承自外部作用域。它捕获了函数定义时的上下文,并在整个箭头函数的生命周期中保持不变。
const obj = {name: 'John',sayHello: () => {console.log(`Hello, ${this.name}!`);}
};obj.sayHello(); // 输出 "Hello, undefined!",因为箭头函数的 this 继承自外部作用域,此处的 this 指向全局对象
怎么修改this的指向
- 使用 call() 方法:
call() 方法允许你显式地调用函数,并指定函数执行时的上下文对象(即 this 的值)以及传递参数。
function sayHello() {console.log(`Hello, ${this.name}!`);
}const obj = { name: 'John' };
sayHello.call(obj); // 输出 "Hello, John!"
- 使用 apply() 方法:
apply() 方法与 call() 方法类似,不同之处在于参数的传递方式。apply() 方法接受一个包含参数的数组。
function sayHello(greeting) {console.log(`${greeting}, ${this.name}!`);
}const obj = { name: 'John' };
sayHello.apply(obj, ['Hello']); // 输出 "Hello, John!"
- 使用 bind() 方法:
bind() 方法创建一个新的函数,其 this 值被绑定到指定的对象。它不会立即执行函数,而是返回一个绑定了新的 this 值的函数。
function sayHello() {console.log(`Hello, ${this.name}!`);
}const obj = { name: 'John' };
const boundFunction = sayHello.bind(obj);
boundFunction(); // 输出 "Hello, John!"
- 使用箭头函数:
箭头函数的 this 值继承自外部作用域,因此无法通过上述方法进行修改。箭头函数的 this 始终指向定义时的上下文。
const obj = {name: 'John',sayHello: function() {const arrowFunction = () => {console.log(`Hello, ${this.name}!`);};arrowFunction(); // 输出 "Hello, John!"}
};obj.sayHello();
这些方法可以帮助你在 JavaScript 中修改 this 的指向。根据不同的场景和需求,选择适合的方法来修改 this 的值。
相关文章:
面试题更新之-this指向问题
文章目录 this指向是什么常见情况下 this 的指向怎么修改this的指向 this指向是什么 JavaScript 中的 this 关键字用于引用当前执行代码的对象。它的指向是动态的,根据执行上下文的不同而变化。 常见情况下 this 的指向 全局作用域中的 this: 在全局作…...
商品推荐系统浅析 | 京东云技术团队
一、综述 本文主要做推荐系统浅析,主要介绍推荐系统的定义,推荐系统的基础框架,简单介绍设计推荐的相关方法以及架构。适用于部分对推荐系统感兴趣的同学以及有相关基础的同学,本人水平有限,欢迎大家指正。 二、商品…...
【力扣每日一题】2023.8.8 任意子数组和的绝对值的最大值
目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们一个数组,让我们找出它的绝对值最大的子数组的和。 这边的子数组是要求连续的,让我们找出一个元素之和…...
SpringBoot Web开发静态资源处理
Web开发探究 简介 其实SpringBoot的东西用起来非常简单,因为SpringBoot最大的特点就是自动装配 使用SpringBoot的步骤: 1、创建一个SpringBoot应用,选择我们需要的模块,SpringBoot就会默认将我们的需要的模块自动配置好 2、手动…...
Dockerfile定制Tomcat镜像
Dockerfile中的打包命令 FROM : 以某个基础镜像作为此镜像的基础 RUN : RUN后面跟着linux常用命令,如RUN echo xxx >> xxx,注意,RUN 不能用于执行命令,因为每个RUN都是独立运行的,RUN 的cd对镜像中的…...
【计算机网络】概述及数据链路层
每一层只依赖于下一层所提供的服务,使得各层之间相互独立、灵活性好,已于实现和维护,并能促进标准化工作。 应用层:通过应用进程间的交互完成特定的网络应用,HTTP、FTP、DNS,应用层交互的数据单元被称为报…...
Java——基础语法(二)
前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 「推荐专栏」: ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄,vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄ÿ…...
数据结构----算法--分治,快速幂
数据结构----算法–分治,快速幂 一.分治 1.分治的概念 分治法:分而治之 将一个问题拆解成若干个解决方式完全相同的问题 满足分治的四个条件 1.问题难度随着数据规模缩小而降低 2.问题可拆分 3.子问题间相互独立 4.子问题的解可合并 2.二分查找(折半搜索)…...
【ChatGPT 指令大全】怎么使用ChatGPT写履历和通过面试
目录 怎么使用ChatGPT写履历 寻求履历的反馈 为履历加上量化数据 把经历修精简 为不同公司客制化撰写履历 怎么使用ChatGPT通过面试 汇整面试题目 给予回馈 提供追问的问题 用 STAR 原则回答面试问题 感谢面试官的 email 总结 在职场竞争激烈的今天,写一…...
微服务:从header中获取用户存入当前线程
1、从网关gateway工程filter中解析token携带的当前用户信息并添加到header中 //获取token携带的idObject userid claimsBody.get("id");//在header中添加新的信息ServerHttpRequest serverHttpRequest request.mutate().headers(httpHeaders -> {httpHeaders.ad…...
C语言系列之原码、反码和补码
一.欢迎来到我的酒馆 讨论c语言中,原码、反码、补码。 目录 一.欢迎来到我的酒馆二.原码 二.原码 2.1在计算机中,所有数据都是以二进制存储的,但不是直接存储二进制数,而是存储二进制的补码。原码很好理解,就是对应的…...
程序框架——UI管理模块
UI基类BasePanel 负责帮助我们通过代码快速的找到所有的子控件,方便我们在子类中处理逻辑,节约找控件的工作量。 public class BasePanel : MonoBehaviour {//通过里式转换原则 来存储所有的控件private Dictionary<string, List<UIBehaviour>…...
MySQL 慢查询探究分析
目录 背景: mysql 整体结构: SQL查询语句执行过程是怎样的: 知道了mysql的整体架构,那么一条查询语句是怎么被执行的呢: 什么是索引: 建立索引越多越好吗: 如何发现慢查询࿱…...
wpf 项目中使用 Prism + MaterialDesign
1.通过nuget安装MaterialDesign 2.通过nuget安装Prism 3.修改App.xmal <prism:PrismApplication x:Class"VisionMeasureGlue.App"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/…...
【Spring Boot】Thymeleaf模板引擎 — Thymeleaf页面布局
Thymeleaf页面布局 熟悉Thymeleaf的语法和表达式后,后面开发起来会更加得心应手。接下来好好研究一下Thymeleaf如何实现完整的Web系统页面布局。 1.引入代码片段 在模板中经常希望包含来自其他模板页面的内容,如页脚、页眉、菜单等。为了做到这一点&a…...
整理mongodb文档:删
个人博客 整理mongodb文档:删 求关注,哪儿不足,求大佬们指出,哪儿写的不够通俗易懂跟清晰,也求指出 文章概叙 本文主要是介绍了删除数据的几个方法,主要还是在介绍deleteMany、deleteOne以及remove,对于…...
篇二十三:设计模式的综合实例:构建完整项目
篇二十三:"设计模式的综合实例:构建完整项目" 开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun/。 另外有2本不错的关于设计模…...
FFmpeg常见命令行(三):FFmpeg转码
前言 在Android音视频开发中,网上知识点过于零碎,自学起来难度非常大,不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》。本文是Android音视频任务列表的其中一个, 对应的要学习的内容是:如何使…...
合宙Air724UG LuatOS-Air script lib API--scanCode
Table of Contents scanCode scanCode.request(cbFnc, timeout) scanCode 模块功能:扫码. 支持二维码、条形码扫描 scanCode.request(cbFnc, timeout) 设置扫码请求 参数 名称 传入值类型 释义 cbFnc function 扫码返回或者超时未返回的回调函数,回调…...
2023年新手如何学剪辑视频 想学视频剪辑如何入门
随着短视频、vlog等媒体形式的兴起,视频剪辑已经成为了热门技能。甚至有人说,不会修图可以,但不能不会剪视频。实际上,随着各种智能软件的发展,视频剪辑已经变得越来越简单。接下来,一起来看看新手如何学剪…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
