当前位置: 首页 > news >正文

JS中this指向问题

首先,this的绑定和定义的位置无关,它的指向只和调用方式有关,this只有在运行时才知道指向谁。

一,默认绑定

默认绑定,也可以说是独立函数调用,这时this指向window。

function foo() {console.log(this)
}
foo()

二,隐式绑定

隐式绑定,可以认为是函数被绑定到某个对象,通过对象来调用,此时this指向该对象。

let obj = {test: function () {console.log(this)}
}obj.test()//隐式绑定

this的指向只有在最后才能确定,即使是对象的方法赋给变量,该变量的this在该函数调用前是未知的。

let obj = {test: function () {console.log(this)}
}
let func = obj.test
func()//-----------------------------------function superfunc(func) {func()
}superfunc(obj.test)

func的调用形式为独立调用,那么即使它是由对象方法赋值而来,this的指向也是window,符合默认绑定。 或者使用高阶函数来调用,只要形式不变,那么this仍旧指向window。

三,显式绑定

显式绑定涉及三个方法,apply,call,bind。在之前使用this时,如果我们想要让this指向一个对象就只能在对象中添加方法来实现,但这样会污染对象,我们是可以借用函数来对某个对象作用的,当然,你也可以理解为我们将函数的this指向改变为某个对象,而这个过程就是显式绑定。

function foo() {console.log(this)}let obj = {name: "Mike"
}
//apply的参数传递使用数组形式
foo.apply(obj, ["a", "b", "c"])
//call的参数传递使用列表形式
foo.call(obj, "a", "b", "c")
foo.call("hello")
foo.call(1234)//调用foo时总是绑定到obj上,但不希望对象中有函数
let test = foo.bind(obj)
test()//这里的函数是独立调用,但是指向的对象却是obj,这涉及到优先级的问题

使用的方法很简单,第一个参数为this指向的对象,其余的参数为函数传参,apply和call的区别在于函数传参的方式不同,前者为数组形式,后者为列表形式。对于bind,这个属于一劳永逸的方法,只要绑定对象后,后续独立调用this仍然指向先前绑定的对象,相当于this被持续的改变为绑定对象。而apply和call是一次性的。bind实际开发中用的不多,在一些特殊情况下会被使用。

 

四,new绑定

new在执行时会返回一个空对象,函数的this指向也会相应的改变为该空对象,如果函数没有对象返回,那么就默认返回该空对象。如下图,constructor构造函数的函数体内创建了this.name = "Mike",但此时是无法确认this指向的(因为不明确函数调用方式,如果为独立调用this指向window),我们创建一个实例对象来接收这个空对象,因为函数调用方式为new,所以this指向空对象,所以结果也显而易见了。

function constructor() {this.name = "Mike"//this指向现在还不能确定
}
const instance = new constructor()//this指向new产生的空对象,然后返回这个对象
console.log(instance)

绑定的优先级

这个可以自己测试一下,优先级为:

new > bind > apply = call > 隐式绑定 > 默认绑定 

 

相关文章:

JS中this指向问题

首先,this的绑定和定义的位置无关,它的指向只和调用方式有关,this只有在运行时才知道指向谁。 一,默认绑定 默认绑定,也可以说是独立函数调用,这时this指向window。 function foo() {console.log(this) …...

大厂面试:小米嵌入式面试题大全及参考答案(130+道 12万长文)

Flink 架构介绍 Flink 是一个分布式流处理和批处理框架,具有高吞吐、低延迟、高可靠等特点。其架构主要由以下几个部分组成: 客户端(Client):负责将作业提交到集群,并与作业管理器进行交互,获取作业的状态信息。客户端可以是命令行工具、IDE 插件或者自定义的应用程序。…...

React 更新界面

文章目录 发现宝藏引入 useState声明和使用状态多个组件的状态管理解析代码 状态的局部性和性能优化结论 发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 在 React 中&#xff…...

JavaSE-易错题集-001

1. AccessViolationException异常触发后,下列程序的输出结果为( ) 1 2 3 4 5 6 7 8 9 10 11 12 13 static void Main(string[] args) { try { throw new AccessViolationException(); Console.Write…...

【人工智能学习笔记】1_人工智能基础

本系列是个人学习《阿里云人工智能工程师ACA认证免费课程(2023版)》的笔记,仅为个人学习记录,欢迎交流,感谢批评指正 人工智能概述 智能的三大能力:感知、记忆与思维、学习与适应能力人工智能的定义 明斯基…...

【前端】animation动画以及利用vue制作简单的透明度改变动画,包含vue生命周期实现

一. 问题描述 想做一个文字透明度从1到0然后再从0到1的css动画。 二. 代码写法 2.1 animation写法 2.1.1 animation属性key 2.1.2 代码展示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…...

mysql优化案例分享

一、mysql介绍 1、InnoDB引擎 mysql5.5.8版本开始后。InnoDB引擎就是默认存储引擎&#xff0c;本文介绍知识点也都是围绕该引擎展开。 知识点1聚集存储 InnoDB引擎采用聚集存储&#xff0c;即每张表的存储都是主键的顺序进行存放&#xff0c;也就是每行存储的物理顺序和主键…...

C语言中结构体struct和联合体union的区别

C语言 文章目录 C语言前言一、什么是结构体二、什么是联合体三、结构体和联合体的区别 前言 一、什么是结构体 在C语言中&#xff0c;结构体指的是一种数据结构&#xff0c;是C语言中聚合数据类型的一类。结构体可以被声明为变量、指针或数组等&#xff0c;用以实现较复杂的数…...

Verilog:【8】基于FPGA实现SD NAND FLASH的SPI协议读写

Verilog&#xff1a;【8】基于FPGA实现SD NAND FLASH的SPI协议读写 在此介绍的是使用FPGA实现SD NAND FLASH的读写操作&#xff0c;以雷龙发展提供的CS创世SD NAND FLASH样品为例&#xff0c;分别讲解电路连接、读写时序与仿真和实验结果。 目录 1 FLASH背景介绍 2 样品申请 3…...

目标检测-RT-DETR

RT-DETR (Real-Time Detection Transformer) 是一种结合了 Transformer 和实时目标检测的创新模型架构。它旨在解决现有目标检测模型在速度和精度之间的权衡问题&#xff0c;通过引入高效的 Transformer 模块和优化的检测头&#xff0c;提升了模型的实时性和准确性。RT-DETR 可…...

业务资源管理模式语言09

示例&#xff1a; 图13 表示了QuoteTheMaintenance 模式的一个实例&#xff0c;在汽车修理店系统中&#xff0c;其中“Vehicle”扮演“Resource”&#xff0c;“Repair Quotation”扮演“Maintenance Quotation”&#xff0c;“Repair shop branch”扮演“Source-party”&…...

Spring Boot + Vue 多级目录的构建详解

1. 背景介绍 1.1 为何选择 Spring Boot Vue&#xff1f; 在现代 Web 开发中&#xff0c;前后端分离已成为一种标准实践。Spring Boot 提供了强大的后端开发能力&#xff0c;尤其在构建企业级应用时&#xff0c;其轻量级、高效性和丰富的生态系统让开发者如虎添翼。而 Vue.js…...

Android的Launch

看了一下资料&#xff0c;其实差别并不像一般的bootloader之类那么大。基本上还是和普通的APK程序差不多&#xff0c;基本上是AMS启动的第一个带界面的程序&#xff0c;这个界面也是常规的开发模式。可以设置各种view&#xff0c;可以设置背景。 然后在这个程序中&#xff0c;…...

Deep Ocr

1.圈出内容,文本那里要有内容.然后你保存,并导出数据集. 2.找出deep_ocr_recognition_training_workflow.hdev 文件.修改“DatasetFilename : Test.hdict” 310行 write_deep_ocr (DeepOcrHandle, BestModelDeepOCRFilename) 3.推理test.hdev 但发现很慢&#xff0c;没有mlp…...

图片验证码

导入依赖 <dependencies><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.25</version></dependency> </dependencies> 代码 Service public class ValidateCodeServi…...

004: VTK读入数据---vtkImageData详细说明

VTK医学图像处理---vtkImageData类 目录 VTK医学图像处理---vtkImageData类 简介&#xff1a; 1 Mricro软件的安装和使用 (1) Mricro安装 (2) Mricro转换DICOM为裸数据 2 从硬盘读取数据到vtkImageData 3 vtkImageData转RGB或RGBA格式 4 练习 总结 简介&#xff1a;…...

分割千万级,将大文件分割为小件 csv

依赖 <dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.9.0</version></dependency> package com.topnet.controller;import com.topnet.utils.R; import lombok.extern.slf4j.Slf4…...

SQL COUNT() 函数深入解析

SQL COUNT() 函数深入解析 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系数据库管理系统&#xff08;RDBMS&#xff09;的标准编程语言。在SQL中&#xff0c;COUNT() 函数是一个常用的聚合函数&#xff0c;用于计算数据表中的行数或特定列的值数量…...

vue3和vue2的双向绑定原理

Vue 的双向绑定是其核心特性之一&#xff0c;允许数据和视图之间保持同步。在 Vue 2 和 Vue 3 中&#xff0c;双向绑定的实现原理有所不同。以下是两者的原理对比&#xff1a; Vue 2 的双向绑定原理 在 Vue 2 中&#xff0c;双向绑定是通过以下机制实现的&#xff1a; 响应式…...

[C++]刷题

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年6月20日 最后&#xff1a; 十分感谢你可以耐着性子把它读完和我可以坚持写到这里&#xff0c;送几句话&#xff0c;对你&#xff0c;也对我&#xff1a; 1.一个冷知识&#xff1a; …...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...