当前位置: 首页 > 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; …...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...