面试题更新之-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保持数据不丢失的方式…

企升编辑器word编写插件

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

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

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

【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. 创建角色并将…

设置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?二、什么…

模拟实现消息队列

目录 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 客户端额外…

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…

redis原理 8:有备无患 —— 主从同步

很多企业都没有使用到 Redis 的集群&#xff0c;但是至少都做了主从。有了主从&#xff0c;当 master 挂掉的时候&#xff0c;运维让从库过来接管&#xff0c;服务就可以继续&#xff0c;否则 master 需要经过数据恢复和重启的过程&#xff0c;这就可能会拖很长的时间&#xff…

String 类的运用

目录 1.字符串构造 2.String对象的比较 2.1比较是否引用同一个对象 2. 2boolean equals(Object anObject) 2.3int compareTo(String s) 方法: 按照字典序进行比较 2.4int compareToIgnoreCase(String str) 3.字符串查找 4.2大小写转换 4.3字符串转数组 4.4 格式化 5.字…

web-初始前端

不区分大小写&#xff0c;单双引号&#xff0c; <html><head><title>初识HTML</title></head><body><h1>Hello world!</h1><img src OIF-C.jfif/></body> </html> <!-- 文件格式 --> <!DOCTYPE h…

42. 疯狂爬取王者荣耀所有皮肤高清海报(文末源码)

目录 前言 目的 思路 代码实现 1. 导包&#xff0c;部署好环境 2. 伪装请求头 3. 访问英雄列表&#xff0c;获取英雄ID 4. 分别访问各英雄主页&#xff0c;查看图片详情 5. 写入本地文件夹&#xff08;文件夹自动命名&#xff09; 完整源码 运行效果 总结 前言 阔…

SQL Server数据库 -- 索引与视图

文章目录 一、索引 聚集索引非聚集索引二、视图三、自定义函数 标量函数表值函数四、游标五、总结 前言 在学习完创建库表、查询等知识点后&#xff0c;为了更加方便优化数据库的存储和内容&#xff0c;我们需要学习一系列的方法例如索引与视图等等&#xff0c;从而使我们更加…

用 docker 创建 jmeter 容器,能做性能测试?

我们都知道&#xff0c;jmeter 可以做接口测试&#xff0c;也可以用于性能测试&#xff0c;现在企业中性能测试也大多使用 jmeter。docker 是最近这些年流行起来的容器部署工具&#xff0c;可以创建一个容器&#xff0c;然后把项目放到容器中&#xff0c;就可以构建出一个独立的…