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

在这里插入图片描述

文章目录

  • this指向是什么
  • 常见情况下 this 的指向
  • 怎么修改this的指向


this指向是什么

JavaScript 中的 this 关键字用于引用当前执行代码的对象。它的指向是动态的,根据执行上下文的不同而变化。

常见情况下 this 的指向

  1. 全局作用域中的 this:
    在全局作用域中,this 指向全局对象,即在浏览器环境中指向 window 对象,在 Node.js 环境中指向 global 对象。

console.log(this); // 在浏览器环境中输出 window 对象,在 Node.js 环境中输出 global 对象

  1. 函数中的 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!"
  1. 箭头函数中的 this:
    箭头函数的 this 不会被绑定到任何特定的对象,而是继承自外部作用域。它捕获了函数定义时的上下文,并在整个箭头函数的生命周期中保持不变。
const obj = {name: 'John',sayHello: () => {console.log(`Hello, ${this.name}!`);}
};obj.sayHello(); // 输出 "Hello, undefined!",因为箭头函数的 this 继承自外部作用域,此处的 this 指向全局对象

怎么修改this的指向

  1. 使用 call() 方法:
    call() 方法允许你显式地调用函数,并指定函数执行时的上下文对象(即 this 的值)以及传递参数。
function sayHello() {console.log(`Hello, ${this.name}!`);
}const obj = { name: 'John' };
sayHello.call(obj); // 输出 "Hello, John!"
  1. 使用 apply() 方法:
    apply() 方法与 call() 方法类似,不同之处在于参数的传递方式。apply() 方法接受一个包含参数的数组。
function sayHello(greeting) {console.log(`${greeting}, ${this.name}!`);
}const obj = { name: 'John' };
sayHello.apply(obj, ['Hello']); // 输出 "Hello, John!"
  1. 使用 bind() 方法:
    bind() 方法创建一个新的函数,其 this 值被绑定到指定的对象。它不会立即执行函数,而是返回一个绑定了新的 this 值的函数。
function sayHello() {console.log(`Hello, ${this.name}!`);
}const obj = { name: 'John' };
const boundFunction = sayHello.bind(obj);
boundFunction(); // 输出 "Hello, John!"
  1. 使用箭头函数:
    箭头函数的 this 值继承自外部作用域,因此无法通过上述方法进行修改。箭头函数的 this 始终指向定义时的上下文。
const obj = {name: 'John',sayHello: function() {const arrowFunction = () => {console.log(`Hello, ${this.name}!`);};arrowFunction(); // 输出 "Hello, John!"}
};obj.sayHello();

这些方法可以帮助你在 JavaScript 中修改 this 的指向。根据不同的场景和需求,选择适合的方法来修改 this 的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

内网横向移动—WinLinux内存离线读取Hashcat破解RDPSSH存储提取

内网横向移动—Win&Linux&内存离线读取&Hashcat破解&RDP&SSH存储提取 1. 前言2. Windows系统密码提取2.1. 在线读取2.2. 离线读取2.2.1. 无存储读取2.2.1.1. 读取文件2.2.1.2. 本地解密 2.2.2. 有存储读取 2.3. 解决高版本2.3.1. 修改注册表2.3.2. 重新登陆…

分布式Redis详解

目录 前言安装redis的俩种方法Redis 与 MySQL的区别Redis可以实现那些功能Redis常用的数据类型有序列表的底层是如何实现的?什么是跳跃表 Redis在Spring中的使用Redis 中为什么单线程比多线程快Redis的分布式锁如何实现Redis 分布式锁可能出现的问题Redis保持数据不丢失的方式…

掌握C语言输入技巧:getchar()函数消除回车符困扰

在C语言编程的旅程中,你可能会遇到一个令人困惑的情况:使用getchar()函数获取字符时,那讨厌的回车符(\n)又是如何产生和处理的呢?本文将为你揭示这个问题,并分享几种消除回车符困扰的经验。 一…

企升编辑器word编写插件

面向用户群体招投标人员,用统一的模板来编写标书,并最终合并标书。项目经理,编写项目开发计划书,项目验收文档等。开发人员,编写项目需求规格说明书、设计说明书、技术总结等文档。其他文档编写工作量较多的岗位人员。…

vue 点击顶部tab重新请求列表

我们点击 1 2 来回切换时,发现客户经理的列表不会重新请求(菜单中含有客户经理) 这时我们添加以下代码就可以了 watch: {$route(route) {this.getList()}},/** 查询客户经理列表 */getList() {this.loading true;listManager(this.queryParams).then(response > {this.mana…

垃圾搜集器UseParallelGC

查看jdk支持的垃圾收集器有哪些? 当前进程使用的垃圾收集器是什么? 查看默认设置 查看默认设置命令: java -XX:PrintCommandLineFlags -version# -XX:UseParallelGC 查看默认垃圾收集器详细信息命令 通过新生代、老年代名字确定垃圾收集器…

【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

文章目录 一、需求说明二、动画代码分析1、地图背景设置2、热点动画位置测量3、热点动画布局分析4、动画定义5、小圆点实现6、波纹效果盒子实现7、延迟动画设置 三、代码示例 一、需求说明 实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心 是实现 向四周…

git使用(常见用法)

一.下载git git官方下载跳转 安装简单,有手就行 二. git的简单使用 1. 连接远程仓库 #初始化 git init #配置账户 git config --global user.name “输入你的用户名” git config --global user.email “输入你的邮箱” git config --list #--q退出 #配置验证邮箱 ssh-key…

前端懒加载

懒加载的概念 懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分…

【网络编程】利用套接字实现一个简单的网络通信(UDP实现聊天室 附上源码)

网络编程套接字 🐛预备知识🦋理解源IP地址和目的IP地址🐌认识端口号🐞 理解 "端口号" 和 "进程ID"🐜简单认识TCP协议🦟简单认识UDP协议🦗 什么是网络字节序 🕷相…

使用 Docker 和 Streamlit 构建和部署 LangChain 支持的聊天应用程序

文章目录 前言聊天应用程序组件和技术LangChain Python框架开放人工智能模型前端 Streamlit UI使用 Docker 进行部署Docker 优化以实现轻量级和快速构建Docker-compose.yaml 文件基础设施Streamlit 公共云谷歌应用引擎使用 Google Cloud Run 部署应用1.启动服务2. 创建角色并将…

Debezium系列之:增量快照初始化历史数据实际应用案例

Debezium系列之:增量快照初始化历史数据实际应用案例 一、需求背景二、查看数据库表数据三、使用增量快照采集历史数据四、初始化历史数据一、需求背景 采集数据库数据发送到Kafka Topic,供下游实时开发消费,在采集最新数据的同时,希望把历史数据也发送到Kafka Topic同时采…

设置height:100%无效的原因以及两种解决方法

原因&#xff1a;我们知道在把盒子宽度自适应为浏览器窗口宽度&#xff0c;只需设置width:100%就可轻松解决问题&#xff0c;但是让盒子的高度自适应浏览窗口的高度并非那么容易&#xff0c;这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class"…

Vscode-工具使用

Vscode &#xff0c;这玩意儿是开源的&#xff0c;以前用收费的破解版&#xff0c;过段时间就高版本不匹配&#xff0c;这次搞个不要钱的玩玩&#xff0c;记录使用心得 下载 下载地址&#xff1a;官网 点击下载&#xff0c;但是这里有个问题下载比较慢&#xff0c;解决办法&a…

【Git】保姆级详解:Git配置SSH Key(密钥和公钥)到github

博主简介&#xff1a;22级计算机科学与技术本科生一枚&#x1f338;博主主页&#xff1a;是瑶瑶子啦每日一言&#x1f33c;: “当人们做不到一些事情的时候&#xff0c;他们会对你说你也同样不能。”——《当幸福来敲门》 克里斯加德纳 Git配置SSH Key 一、什么是Git?二、什么…

在CPU上安装部署chatglm-6b实用经验分享

chatglm-6b很强&#xff0c;很多同学都想自己试一试&#xff0c;但不是每个人都有GPU、高端显卡的环境&#xff0c;大多数同学都是一台普通的笔记本。 笔者这里分享一下在自己的8G内存&#xff0c;intel i3笔记本上安装部署chatglm-6b的实际经验。有很多网站都分享了一些经验&…

算法工程师-机器学习面试题总结(3)

FM模型 FM模型与逻辑回归相比有什么优缺点&#xff1f; FM&#xff08;因子分解机&#xff09;模型和逻辑回归是两种常见的预测建模方法&#xff0c;它们在一些方面有不同的优缺点。 FM模型的优点&#xff1a; 1. 能够捕获特征之间的交互作用&#xff1a;FM模型通过对特征向量…

模拟实现消息队列

目录 1. 需求分析1.1 介绍一些核心概念核心概念1核心概念2 1.2 消息队列服务器&#xff08;Broker Server&#xff09;要提供的核心 API1.3 交换机类型1.3.1 类型介绍1.3.2 转发规则&#xff1a; 1.4 持久化1.5 关于网络通信1.5.1 客户端与服务器提供的对应方法1.5.2 客户端额外…

ReadableStream流的js处理

需求 今天接了一个gpt的项目。需要对接接口。后端返回的数据是ReadableStream类型的。记录下如何处理ReadableStream类型的数据 代码 const response ... // response 是服务端返回的数据// 创建了一个数据读取器 const reader response.getReader(); // 创建了一个文本解…

UNIQUE VISION Programming Contest 2023 Summer(AtCoder Beginner Contest 312)D题题解

文章目录 [Count Bracket Sequences](https://atcoder.jp/contests/abc312/tasks/abc312_d)问题建模问题分析1.分析合法括号字符串的特点2.从集合角度分析字符串每个字符的作用代码 Count Bracket Sequences 问题建模 给定一个字符串&#xff0c;字符串内仅有3种字符&#xff…