怎么理解this？改变this指向的方法

最新推荐文章于 2025-12-06 22:07:37 发布
原创 最新推荐文章于 2025-12-06 22:07:37 发布 · 100 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #css #html #开发语言

本文介绍了JavaScript中this的关键概念，以及apply(),call(),和bind()方法如何改变函数内部this的指向。强调了this的动态绑定特性，并给出了每种方法的语法和使用场景。

理解this

this是面相对象语言里的一个关键字，它不能赋值也不能脱离对象，每个函数在被调用时都会创建一个执行上下文，this就是执行上下文中的一个属性，他是在函数运行时进行绑定的，this的绑定和函数的声明位置没有关系，它取决于函数的调用方式。当在全局调用函数时this指向window，当是对象调用时，this指向对象。绑定事件时在元素（element）上绑定事件this指向全局，绑定点击事件和监听事件时this指向该元素。

该变this指向的方法

1.apply方法

语法：

函数.apply(指向谁，数组传参)

 第一个参数是你要使this指向的元素

 第二个是你要传的参数，他是用数组传参，把所有需要穿的蚕食写入一个数组中进行传值

该方法会立即执行原函数

 2.call方法

语法：

函数.call(指向谁，依次传参)

 该方法参数不限

第一个参数是你要使this指向的元素

之后的参数依次传入

该方法会立即执行原函数

3.bind方法

语法：

函数.bind(指向谁,依次传参)

 该方法参数不限

第一个参数是你要使this指向的元素

之后的参数依次传入

该方法不会立即执行原函数，会返回一个新的函数

tangy_q__
关注
js绑定事件this指向发生改变的问题解决方法
10-27
通过`bind`方法，我们可以控制函数内部`this`的指向，解决绑定事件时`this`指向发生改变的问题。对于开发者来说，合理使用`bind`方法以及其他相关技术（如闭包、箭头函数等），可以极大地提升代码的可读性和可维护性...
javascript this指向相关问题及改变方法
01-21
在学习javascript中我们往往会被this的指向问题弄的头昏转向，今天我们就来学习一下this的指向问题，和改变this指向的方法。 一.this的指向问题 在学习this的指向问题之前我们需要明白两点： 1：this永远指向一个...
this是什么？为什么要改变this？怎么改变 this 指向？
When you can't win by being better, you can win by being different.
03-14 1368
项目中有如下类似例子，find 函数中的 this 指向调用它的 obj 对象；而在定时器 setTimeout 中调用 find()，this 是指向 window 对象的。但我们需要 find 函数中 的 this 指向 obj 对象，因此我们需要修改 this 的指向。共同点：第一个参数都为改变 this 的指针。若第一参数为 null / undefined，this 默认指向 window。
如何改变this指向？this指向总结
小草莓的博客
05-04 1973
1、箭头函数中的 this 是在声明中就定义好了的，而普通函数中的 this 则是在调用时定义好的。2、基本上可以归为五类：① 全局this指向是window ② 普通函数this的指向是调用者③ 构造函数的this是new之后的新对象 ④ 箭头函数this的指向的是其父级指向⑤ call、 apply、bind的this指向的是第一个参数JavaScript 中的this用一句话来概括，就是在执行时确定的。
箭头函数this指向以及改变this指向的方法
何淑女的博客
10-30 6064
箭头函数this指向以及改变this指向的方法 call apply bind 总结 相同点： 都可以改变函数内部的this指向 不同点 ： 1.call和apply会调用函数,并且改变函数内部this的指向 2.call和apply传递的参数不一样,call传递参数aru1,aru2…形式 , apply必须数组形式 3.bind 不会调用函数,可以改变函数内部this指向 主要应用场景 1.call经常做继承 2.apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值 3.bind不调用函数
js中改变this指向的几个方法
wky1151851476的博客
12-01 1507
1、call函数 call函数可以改变具体如下 定义一个对象： var a={ name:'我是你爸爸' } 定义一个普通方法 function b(){ // alert(this) console.log(this)//普通函数中的this指向的是windown } 调用b函数，查看控制台打印,指向的是windown对象 b(...
JS改变this指向方法bind使用
weixin_44021199的博客
07-29 1663
前文中提到的改变this指向的三种方法，想必大家对最后一种方法有疑问，bind需要手动调用为什还用呢？直接用前边两种方法不就好了，这种想法是大错特错的！call和apply在下列情况就用不了啦！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met...
JavaScript 中的 this 及 this 指向的改变方法
m0_73941339的博客
04-22 1251
本文深入剖析JavaScript中this关键字的动态绑定机制，详细讲解普通函数、对象方法、构造函数和箭头函数中this的不同表现。系统介绍call、apply和bind三种改变this指向的方法，通过实例代码对比它们的语法差异与适用场景，帮助开发者掌握精确控制函数执行上下文的核心技巧。
js中改变this指向的方法
weixin_62731214的博客
07-07 1017
文章介绍了js中改变this指向的三种方法
改变this指向的三种方法
weixin_65338906的博客
07-06 823
可以改变this指向，如果有多个参数，第一个参数是用来改变this指向的（不进行传参），其余的参数是参数列表（真正的实参）4.可以改变this指向，如果有多个参数，第一个参数是用来改变this指向的（不进行传参）2. 可以改变this指向，如果没有参数，this指向window。3.可以改变this指向，如果有参数，this指向该参数。3.可以改变this指向，如果有参数，this指向该参数。可以改变this指向，如果有参数，this指向该参数。1.call的第一个作用是可以进行函数的调用。
this指向和改变其指向的方法
w1998725的博客
02-18 2927
this笔记(仅作为个人学习使用) 1、this 的指向 在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象。 下面这个例子，这里的 a() 是被window调用的,所以这里的this指向就是window。 var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // window
改变this指向的方法——六种
LiuHB_的博客
10-24 1636
在外部定义this之前，this会指向obj自身age:19,obj.func();在外部定义this之后，this会指向定义位置的windowage:19,obj.func();
JS中改变this指向的方法(call和apply、bind)
10-22
// 将this指向Child，同时传递参数 } var test = new Child(21); console.log(test.age); // 21 console.log(test.name); // mike, jack, smith ``` 2. `apply`方法： `apply`与`call`类似，但传递参数的...
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 860
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
深度解析前端input标签：从默认样式覆盖到浏览器自动填充和兼容以及文本域
鹏多多的博客
12-03 993
HTML表单中的<input>标签是核心交互元素，支持多种输入类型（如文本、密码、单选、文件上传等），通过type属性定义不同功能。其核心属性包括数据标识（name/id）、状态控制（disabled/readonly）、验证限制（pattern/maxlength）和交互优化（autofocus/autocomplete）。浏览器默认样式存在兼容性问题，可通过CSS重置实现统一外观，特别是对单选/复选框需要特殊样式覆盖处理。自动填充功能基于name属性和表单上下文触发，可通过autocompl
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 1203
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
学Java第五十三天——IO综合练习（1）
最新发布
weixin_67566799的博客
12-06 331
是用的糊涂包Hutool，其余的。完整的获取姓氏的代码。
前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南
anscos的博客
12-05 1069
西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。
多层环形图，自定义tooltip
好记性，不如烂键盘。
12-05 575
多层环形图，自定义tooltip。
this的指向和改变this的方法
10-30
在 JavaScript 中，this 的指向取决于函数的调用方式，以下是不同场景下 this 的指向情况： 1. **普通函数**：this 指向全局对象，在浏览器环境中是 window 对象。例如： ```javascript function fn() { console.log('1.普通函数this指向：' + this); } fn(); // 输出 window ``` 2. **对象的方法**：this 指向调用该方法的对象。例如： ```javascript var o = { sayHi: function() { console.log('2.对象的方法this指向：' + this); } } o.sayHi(); // 输出对象 o ``` 3. **构造函数**：this 指向新创建的实例对象，原型对象里面的 this 也指向该实例对象。例如： ```javascript function Star() {}; Star.prototype.sing = function() {} var ldh = new Star(); // 这里原代码有误，应该是 console.log('3.构造函数this指向:' + ldh); ``` 4. **绑定事件函数**：this 指向触发事件的元素。例如： ```javascript var btn = document.querySelector('button'); btn.onclick = function() { console.log('4.绑定事件函数的this：' + this); }; ``` 5. **定时器函数**：this 指向全局对象 window。例如： ```javascript setTimeout(function() { console.log('5.定时器函数this：' + this); }, 1000); ``` 6. **立即执行函数**：this 指向全局对象 window。例如： ```javascript (function() { console.log('6.立即执行函数this：' + this); })(); ``` 改变 this 指向的方法主要有以下几种： 1. **new 关键字**：使用 new 关键字调用构造函数时，会创建一个新对象，构造函数中的 this 会指向这个新对象。例如： ```javascript function Fn() { this.user = "您好"; } var a = new Fn(); console.log(a.user); // 输出 您好 ``` 2. **call 方法**：call() 方法是 Function.prototype 中的方法，可以通过它来显式地调用一个函数，并且改变函数体内 this 的指向，可以传递多个参数。例如： ```javascript function greet(message) { console.log(message + ', ' + this.name); } var person = { name: 'John' }; greet.call(person, 'Hello'); // 输出 Hello, John ``` 3. **apply 方法**：apply() 方法与 call() 方法类似，区别在于传递参数的方式不同，apply() 方法接受一个包含多个参数的数组作为第二个参数。例如： ```javascript function greet(message) { console.log(message + ', ' + this.name); } var person = { name: 'John' }; greet.apply(person, ['Hello']); // 输出 Hello, John ``` 4. **bind 方法**：bind() 方法也是 Function.prototype 中的方法，它会创建一个新函数，并将调用 bind() 方法的函数中的 this 绑定到新函数中，返回一个新函数，不会立即执行，可以传递多个参数。例如： ```javascript function greet(message) { console.log(message + ', ' + this.name); } var person = { name: 'John' }; var newGreet = greet.bind(person, 'Hello'); newGreet(); // 输出 Hello, John ``` 5. **箭头函数**：箭头函数的 this 是静态的，指向创建函数时的上下文。例如： ```javascript var obj = { name: 'Alice', sayHi: function() { var arrowFunc = () => { console.log('箭头函数this指向：' + this.name); }; arrowFunc(); } }; obj.sayHi(); // 输出 Alice ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值