JavaScript中绑定this的方法

JavaScript的回调函数内部this的指向问题以及四种绑定this指向的方法 常见回调函数内部的this指向问题JavaScript的以及四种绑定this指向的方法 阅读详情

this可以用在构造函数之中,表示实例对象。除此之外,this还可以用在别的场合。但不管是什么场合,this都有一个共同点:它总是返回一个对象。

简单说,this就是属性或方法“当前”所在的对象。

代码示例:

function f() {
    return '姓名:'+ this.name;
}

var A = {
    name: '张三',
    describe: f
};

var B = {
    name: '李四',
    describe: f
};

console.log(A.describe()) // "姓名:张三"
console.log(B.describe()) // "姓名:李四"

可以看到this就是指向当前所在的对象,第一个输出语句所在的对象是A,此时this就指向A这个对象,第二个输出语句就指向B这个对象。

接下来再看一个例子:


var user = {
    name:'张三',
    age: 20,
    describe: function (){
        setTimeout(function (){
            console.log('姓名:'+this.name)
        },1000)
    }
}
user.describe() //此时this指向的是window

当然这里给一个解决方案:

var user = {
    name:'张三',
    age: 20,
    describe: function (){
        let $this = this;
        setTimeout(function (){
            console.log( '姓名:'+$this.name)
        },1000)
    }
}
user.describe()

可以看到我们在定时器之前设置了一个$this来获取到了指向user的this,后续我们也只调用$this.

当然不止这一种困扰我们的情况,接下来我就只给出三个绑定this指向的方法:

Function.prototype.call() 

函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

上面代码中,全局环境运行函数f时,this指向全局环境(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f。

call的第一个参数就是this所要指向的那个对象(如果参数为空、null和undefined,则默认传入全局对象。),后面的参数则是函数调用时所需的参数。

func.call(thisValue, arg1, arg2, ...)

Function.prototype.apply()

apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

Function.prototype.bind()

bind()方法用于将函数体内的this绑定到某个对象,然后返回一个新函数,它与上面两个的区别就是不调用函数而是返回一个函数。

var fun1 = fun2.bind(obj);

此时fun1与fun2的区别就是fun1指向obj对象。

31、贝叶斯认知建模与隐马尔可夫模型:理论与应用 本文探讨了贝叶斯认知建模与隐马尔可夫模型(HMM)的理论基础及其在认知科学和神经科学中的应用。重点介绍了贝叶斯定理和HMM的基本原理,并结合实际案例,如情绪识别系统和脑机接口(BCI),展示了它们在处理复杂认知任务中的强大能力。文章还讨论了贝叶斯-HMM模型的技术细节、优势与局限性,以及未来的发展前景。 阅读详情

相关推荐

【机器人】机械臂控制入门技术栈分享

机械臂控制入门技术栈分享1.前言2.机器人控制入门技术栈2.1.空间描述和变化2.2.运动学分析2.3.动力学建模2.4.控制入门学习3.进阶部分3.1.机器人参数辨识3.2.非线性控制3.3.现代机器人描述方法:指数坐标4.总结 1.前言 今天看到优快云上有个分享个人技术栈的活动,虽然我不是一个正规的程序员,也不搞前端、后端这些,但我一直在优快云上通过写博客对我的学习进行总结,于是我突发奇想,不如我也写一下我的个人技术栈,针对机械臂控制入门的,因为我水平也不高,所以本文内容也许不够饱满,也不够准确,但

要恰饭得嘛 5858

JavaScript对象方法本质与this绑定实战指南

JavaScript对象方法并非传统面向对象语言中的固有行为,而是一种动态挂载的函数值;其核心机制依赖执行上下文决定this指向,而非定义位置。理解‘方法即函数+调用时绑定’这一原理,是解决TypeError: xxx is not a function、this丢失等高频问题的关键。该机制支撑了原型链复用、ES6 class语法糖、链式调用等重要特性,并直接影响内存性能与工程健壮性。本文结合对象字面量、prototype、class、工厂函数等多种定义方式,聚焦真实开发场景——如事件回调、定时器、数组方法

congbao6525的博客 473

ICT模拟零件测试方法--电容测试

通常,小到 100 pF 的电容需要补偿,因为夹具和系统的电容(20 到 50 pF)相对于被测设备的值是显著的。软件在需要补偿的电容测试中加入 comp 选项,而在不需要补偿的电容测试中加入 nocomp 选项。在调试期间,通过向电容语句添加 pc 选项验证您的电容测试。在测试单独的电容时,从测量结果中减去学到的值,然后与测试限制进行比较以决定通过或失败。请注意,如果用于需要补偿的电容测试上的感应总线使用了单独的探针,测量将无效。在测试电容时,应注意两个方面:电容的电阻元件,以及夹具和系统本身的电容。

可可南木的博客 1217

js中function执行时使用bind函数修改this指向

ff.fun() 执行时 this 指向 ff。f() 执行时 this 被指向了data。

Mo_jon的博客 236

VS2103+Intel2013+MSMPI运行Fortran并行程序

VS2103+Intel2013+MSMPI运行Fortran并行程序MSMPI安装新建Fortran90项目编写Fortran并行程序在cmd运行编译完成的执行文件 MSMPI安装 我这里采用的是Microsoft MPI v9.0.1,可以点此下载。下载完成后同时安装msmpisdk.msi、msmpisetup.exe两个文件,安装位置默认即可。 其中msmpisdk.msi的默认安装路径在C:\Program Files (x86)\Microsoft SDKs\MPI,该文件包含了mpi环境所需

weixin_43176703的博客 2937

C++和OpenGL实现3D游戏编程【连载6】——不规则图形的纹理贴图(附源码)

上一节我们讨论了纹理贴图的相关基础操作,但上一节的纹理贴图操作基本上都是规则图形,包括圆形和球形虽然复杂一点,但是它也是规则的。这一节课我们要讨论一下,怎么在不规则图形上纹理贴图,就比如文章下图的心形纹理贴图,以及纹理的平移、旋转、放大缩小功能。

zhooyu的博客 1308

一文带你彻底弄懂JS中的bind()和this

var a = { b : function(){ var func = function(){ console.log(this); console.log(this.c); } console.log(this); func.bind(obj)(); //这里不仅给a的b的func绑定了一个叫做obj的对象作为其this指针,还调用了这个函数 }, c : 'Hel

skywf的博客 2618

基于知识图谱的智能决策系统

作者:禅与计算机程序设计艺术 1.简介 知识图谱(Knowledge Graph)最早由美国斯坦福大学的Jure Sifne等人于2013年提出,它是一个用于存储、整理和推理复杂多变的网络结构信息的数据模型。它的基本特征是每个事实都有一个统一的标识符ID,并且可以以图形的方式展示各种关系及其边缘。因此,

AI天才研究院 2184

js 【详解】函数中的 this 指向

执行时谁在调用函数,就指向谁

朝阳39的博客 5684

在树莓派4B上基于NCNN框架部署YOLOv8的实战教程

摘要:本文详细介绍了在树莓派4B上基于NCNN框架部署YOLOv8目标检测模型的完整流程。从PyTorch模型转换为NCNN格式,到树莓派环境配置(OpenCV和NCNN编译),再到C++代码实现与优化,涵盖模型加载、推理和绘图等核心功能。测试结果显示,树莓派4B上可实现约2 FPS的检测速度,Windows平台达6~7 FPS。文章还提供了量化模型、多线程优化等实用建议,并附常见问题解答,为边缘设备部署轻量化目标检测提供了可行方案。(149字)

m0_64661770的博客 595

【Bug已解决】Claude Desktop Cowork 报错 Workspace unavailable 解决方案

方案适用场景推荐指数确认虚拟机镜像下载完整性排查的第一步,最基础的前提检查⭐⭐⭐⭐⭐确认虚拟机平台功能已启用Windows 系统功能层面的必要条件⭐⭐⭐⭐⭐重启 CoworkVMService快速尝试恢复服务正常状态⭐⭐⭐⭐完全重启客户端排除临时性状态错乱⭐⭐⭐⭐降级使用文件工具临时替代方案,不阻塞当前工作⭐⭐⭐报错的本质是Cowork 功能依赖的虚拟机管理服务,在 Windows 应用包隔离机制下未能正确定位虚拟机文件的实际存放路径。

博客 6229

【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~...

   javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this   一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最核心的一点——函数中的this总指向调用它的对象,接下来的故事都将围绕这一点展开   (提醒前排的筒子们准备好茶水和西瓜,我要开始讲故事啦!!)     【故事】有一个年轻人叫"迪斯"...

weixin_34279579的博客 224

cesium 实时轨迹

运用cesium中model和polyline添加模型和轨迹线,用CallbackProperty方法来实时改变经纬度。

God's asylum的博客 1964

JS:Function对象call、apply、bind改变this指向

1、对象中的this var name = 'Tom'; let obj = { name: this.name, }; console.log(obj); // Chrome // {name: "Tom"} // Node.js // { name: undefined } 2、函数中的this let tom = { name: 'Tom', sayHello() { // this 默认指向了tom 对象 console.log(`name is ${th

彭世瑜的博客 1434

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

终极指南:掌握JavaScript箭头函数的this绑定规范处理方法

在JavaScript编程中,箭头函数是提升代码简洁性和可读性的强大工具,尤其在处理`this`绑定时展现出独特优势。idiomatic.js项目作为JavaScript编码规范的权威指南,详细阐述了如何通过箭头函数解决传统函数中`this`指向混乱的问题,帮助开发者编写更一致、更可维护的代码。 ## 为什么箭头函数彻底改变了this绑定规则? 🚀 传统函数中的`this`绑定一直是Java

gitblog_00024的博客 1010

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

js中事件绑定3种方法以及事件委托_彻底搞懂JavaScript中的this指向问题

JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。想要理解this,你可以先记住以下两点:1:this永远指向一个对象;2:this的指向完全取决于函数调用的位置;针对以上的第一点特别好理解,不管在什么地方使用this,它必然会指向某个对象;确定了第一点后,也引出了一个问题,就是this使用的...

weixin_39552874的博客 337

JavaScript 中,class 的方法默认不会绑定 this

JavaScript 中,class 的方法默认不会绑定 this 在 JavaScript 中,class 的方法默认不会绑定 this!!!!!!!!!!!!!!

no_name_left的博客 1356

JavaScript this绑定:call、apply、bind方法深度解析

你是否曾经在JavaScript开发中遇到过这样的困惑:明明在对象内部定义的方法,却在调用时丢失了this指向?或者在事件处理程序中,this突然指向了DOM元素而不是你期望的对象?这些问题的根源都来自于JavaScript中this的动态绑定机制。 本文将深入解析JavaScript中this的绑定规则,以及如何通过call、apply、bind这三个强大的方法来精确控制this的指向。读完本...

gitblog_00084的博客 727

【JavaScript】this关键字:绑定this的方法

JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。

weixin_45980065的博客 1126

JavaScript call() apply() bind() 三种方法绑定this

this的动态切换,为Javascript带来巨大的灵活性,初学js,结合资料,总结一下绑定this的三种方法,防止以后忘记。 call apply bind call() 方法,可以指定函数内部this的指向(即函数执行时的所在的作用域),然后在所指定的作用域里面,调用该函数。 var obj ={}; var f=function(){ return this; }...

CoderLife_的博客 874

JS-14 this绑定规则;默认绑定;隐式绑定;显式绑定;new绑定call、apply、bind方法;this绑定规则优先级;箭头函数及编写优化+this规则之外;this面试题;

this绑定规则;默认绑定;隐式绑定;显式绑定;new绑定call、apply、bind方法;this绑定规则优先级;箭头函数及编写优化+this规则之外;this面试题;

qq_54075517的博客 812

js setTimeout 在类中,绑定this的方法

setTimeout 最常用的用法是: setTimeout(functionName,1000); //functionName 为一个函数的名字 在一个类中,调用setTimeout,会出现问题,this指向了window var firstName = "zhengxiang"; var name ={ firstName : "xiong", showNa

xiongzhengxiang的专栏 7091

javascript绑定this的几种方法

首先 ,理清一下js中的this,js中的this对象指向调用当前方法的对象,这个指向是在执行的时候才确定下来的,跟函数在何时何处声明是无关的。 但是,在实际使用过程中,我们经常会遇到要改变当前this指向的需求,一下的对绑定this方法的归纳 1、call和apply 这里把call和apply放在一起讲,是因为这两个方法及其相似,其作用都是直接调用一个函数,并使其具有一个指定的this,...

小敏哥的专栏 1646

JavaScript对象方法本质:this绑定、原型委托与调用机制解析

JavaScript中的对象方法并非简单函数调用,而是涉及this绑定规则、原型链委托、内部槽(Internal Slots)和[[Call]]抽象操作的核心机制。理解方法调用如何动态确定执行上下文,是解决this丢失、事件处理器失效、链式调用异常等高频问题的基础。从DOM元素的addEventListener到数组map/filter的链式组合,再到Class静态/实例方法区分及现代API如structuredClone、at()的落地实践,本质都源于对象模型的设计逻辑。掌握隐式绑定、显式绑定、箭头函数继

adiking520110的博客 417

js的this的3种绑定方法

1. call() 2. apply() 3. bind()

qq_28686911的博客 6万+

js类绑定this(react类组件方法为什么要绑定this)

js类绑定this(react类组件方法为什么要绑定this)

huangfengnt的博客 208

OpenClaw Talk Mode 全解析:连续语音对话循环、ElevenLabs 语音指令与 macOS/iOS/Android 三端实现

Talk Mode 是 OpenClaw(中文社区版 Clawdbot)内置的**连续语音对话模式**:开启后无需按键即可持续"听你说 → 想 → 开口回答",由 ElevenLabs 流式 TTS 完成低延迟语音合成,并支持通过回复中的 JSON 指令动态切换音色与语速。本文以仓库文档 [docs/nodes/talk.md](https://link.gitcode.com/i/281126a

gitblog_01001的博客 1118
上一篇: JavaScript学习笔记
下一篇: JavaScript原型和原型链
echofly0722
博客等级 码龄5年 127粉丝 12原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值