web前端开发this指向问题

❗ 函数内部中的 this 指向谁,不是在函数定义时决定的,而是在函数第一次调用并执行的时候决定的

1. call 方法

语法:函数名.call(调用者, 参数1, …)
作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者

function fn(name, age) {
    this.name = name;
    this.age = age;
}
const obj = {}
// 经过call,this指向obj,obj开始有name、age属性
fn.call(obj, '李四', 100)
// 以下this均指向window,name:undefined,age:undefined
fn.call()
fn.call(null)
fn.call(undefined)
结果:普通函数的this指向window,利用call方法将this指向了obj

2. apply方法

语法:函数名.apply(调用者, [参数, …])
作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者

function fn(name, age) {
    this.name = name;
    this.age = age;
}
const obj = {}
// 经过apply,this指向obj,obj开始有name、age属性
fn.apply(obj, ['李四', 100])
// 以下this均指向window,name:undefined,age:undefined
fn.apply()
fn.apply(null)
fn.apply(undefined)

结果:普通函数的this指向window,利用apply方法将this指向了obj

3. bind方法

语法:函数名.bind(调用者, 参数, …)
作用:函数被借用时,不会立即执行,而是返回一个新的函数。需要自己手动调用新的函数来改变this指向

function fn(name, age) {
    this.name = name;
    this.age = age;
}
const obj = {}
// const newFn = fn.bind(obj, '李四', 100)
// newFn()
fn.bind(obj, '李四', 100)()

结果:普通函数的this指向window,利用bind方法将this指向了obj

💤总结:
相同点: 三者都可以把一个函数应用到其他对象身上,注意不是自身对象
不同点:
○ call,apply是直接执行函数调用。bind是绑定,执行需要再次调用。
○ call,bind接收逗号分隔的无限个参数列表;apply接收数组作为参数。

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

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

相关文章

Facebook Horizon:探索虚拟现实中的社交空间

随着科技的不断进步,虚拟现实(VR)技术正成为社交互动和娱乐体验的新前沿。在这个数字时代,Facebook作为全球最大的社交媒体平台之一,正在引领虚拟社交的新时代,其推出的虚拟社交平台Facebook Horizon成为了…

Tomcat线程池原理(下篇:工作原理)

文章目录 前言正文一、执行线程的基本流程1.1 JUC中的线程池执行线程1.2 Tomcat 中线程池执行线程 二、被改造的阻塞队列2.1 TaskQueue的 offer(...)2.2 TaskQueue的 force(...) 三、总结 前言 Tomcat 线程池,是依据 JUC 中的线程池 ThreadPoolExecutor 重新自定义…

深入理解C语言(5):程序环境和预处理详解

文章主题:程序环境和预处理详解🌏所属专栏:深入理解C语言📔作者简介:更新有关深入理解C语言知识的博主一枚,记录分享自己对C语言的深入解读。😆个人主页:[₽]的个人主页&#x1f3c4…

Imagewheel私人图床搭建结合内网穿透实现无公网IP远程访问教程

文章目录 1.前言2. Imagewheel网站搭建2.1. Imagewheel下载和安装2.2. Imagewheel网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道(云端设置)3.3.Cpolar稳定隧道(本地设置) 4.公网访问测…

flutter 文件上传组件和大文件分片上传

文件分片上传 资料 https://www.cnblogs.com/caijinglong/p/11558389.html 使用分段上传来上传和复制对象 - Amazon Simple Storage Service 因为公司使用的是亚马逊的s3桶 下面是查阅资料获得的 亚马逊s3桶的文件上传分片 分段上分为三个步骤:开始上传、上传对…

CSP-J 2023 T3 一元二次方程

文章目录 题目题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 题目传送门题解思路总代码 提交结果尾声 题目 题目背景 众所周知,对一元二次方程 a x 2 b x c 0 , ( a ≠ 0 ) ax ^ 2 bx c 0, (a \neq 0) ax2bxc0,(a0),可…

STM32G030C8T6:定时器1ms中断(以64MHz外部晶振为例)

本专栏记录STM32开发各个功能的详细过程,方便自己后续查看,当然也供正在入门STM32单片机的兄弟们参考; 本小节的目标是,系统主频64 MHZ,采用高速外部晶振,通过定时器3 每秒中断控制 PB9 引脚输出高低电平,从…

20240222作业

完善对话框,点击登录对话框,如果账号和密码匹配,则弹出信息对话框,给出提示“登录成功",提供一个Ok按钮,用户点击OK后,关闭登录界面,跳转到其他界面 如果账号和密码不匹配&…

Java基础-注解

注解 注解是用来干什么的它有什么作用注解的常见分类内置注解Override注解定义 Deprecated注解定义 SuppressWarnings注解定义 元注解Target注解定义ElementType Retention&&RetentionTarget注解定义RetentionPolicy Documented注解定义 Inherited注解定义用法 Repeata…

低代码开发:推动互联网企业数字化转型的关键因素

联网行业作为我国数字经济发展的核心驱动力,在推动国家数字化转型中扮演着至关重要的角色。与其他传统行业相比,互联网企业面临更加紧迫的数字化转型需求,因为它们需要不断适应快速变化的市场环境和技术趋势。 然而,由于互联网企业…

深入理解APDU协议与Java开发

1. 什么是APDU? APDU,即应用协议数据单元(Application Protocol Data Unit),是一种在智能卡与卡片读卡器之间进行通信的协议。APDU定义了在交互中传输的数据格式和规则,允许读卡器发送指令并接收响应。 2…

MFC 皮肤库配置

1.创建MFC 对话框 2.添加皮肤资源 添加资源 添加头文件 关闭SDL检测 添加静态库文件 修改字符集 添加头文件 将皮肤中的ssk文件加载到初始化实例中 > 运行即可

springboot 的 websocket 里面使用 @Autowired 注入 service 或 bean 时,报空指针异常

直接上解决方案: 在你的WebSocketServer服务器中 public static MessageService messageService; //要注入的类// 注入的时候,给类的 service 注入Autowiredpublic void setChatService(MessageService messageService) {WebSocketServer.messageSer…

【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(一)

【寸铁的刷题笔记】树、dfs、bfs、回溯、递归(一) 大家好 我是寸铁👊 总结了一篇刷题关于树、dfs、bfs、回溯、递归的文章✨ 喜欢的小伙伴可以点点关注 💝 105. 从前序与中序遍历序列构造二叉树 模拟分析图 代码实现 /*** Definition for a binary tre…

HarmonyOS—添加/删除Module

Module是应用/服务的基本功能单元,包含了源代码、资源文件、第三方库及应用/服务配置文件,每一个Module都可以独立进行编译和运行。一个HarmonyOS应用/服务通常会包含一个或多个Module,因此,可以在工程中创建多个Module&#xff0…

如何利用内网穿透工具在企业微信开发者中心实现本地接口服务回调

文章目录 1. Windows安装Cpolar2. 创建Cpolar域名3. 创建企业微信应用4. 定义回调本地接口5. 回调和可信域名接口校验6. 设置固定Cpolar域名7. 使用固定域名校验 企业微信开发者在应用的开发测试阶段,应用服务通常是部署在开发环境,在有数据回调的开发场…

SQL查询每个类别价格前3的数据

SELECTproduct_id,category,price FROM (SELECTproduct_id,category,price,ROW_NUMBER() OVER (PARTITION BY category ORDER BY price) AS rankFROMyour_products_table ) AS ranked_products WHERErank < 3;DENSE_RANK() 和 ROW_NUMBER() 是窗口函数&#xff08;Window Fu…

前端知识复习

1.symbol类型 Symbol 是 ECMAScript 6 中引入的一种新的基本数据类型&#xff0c;它表示独一无二的值。Symbol 值是通过 Symbol() 函数创建的。 Symbol 值具有以下特点&#xff1a; 独一无二性&#xff08;唯一性&#xff09;&#xff1a;每个通过 Symbol() 函数创建的 Symb…

十三:集合

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 01、Java 集合框架概述1.1、集合框架与数组的对比及概述1.2、集合框架涉及到的API 02、Collection接口方法2.1、Collection接口中的常用方法12.2、Collection接口中…

在idea中配置Tomcat

1.在idea中点击右上角 2.点击Edit Configurations,点击加号 3.向下拉找到Tomcat Server下的Local,点一下 点击Configure 找到tomcat文件路径,选择apache-tomcat-8.5.63(8.5.63是我的版本号) 选择好路径后点ok就配置好了 总步骤: