JavaScript中的this指向什么_在不同场景下如何确定?
发布时间 - 2025-12-26 00:00:00 点击率:次JavaScript中this指向取决于函数被调用时的执行上下文:普通调用(非严格模式→全局对象,严格模式→undefined)、对象方法调用(→点号左侧对象)、显式绑定(call/apply/bind→指定对象)、new调用(→新实例)、箭头函数(→继承外层this),优先级为new>显式>隐式>默认。
JavaScript 中的 this 指向谁,不取决于函数定义的位置,而取决于函数**被调用时的执行上下文**。换句话说,看的是“谁在调用这个函数”,而不是“这个函数写在哪”。掌握 this 的核心规律,关键在于识别调用方式。
普通函数调用(非严格模式 vs 严格模式)
当函数独立调用(没有点号、没有 new、没有 call/apply/bind)时,this 的值由是否启用严格模式决定:
- 非严格模式下,this 指向全局对象(浏览器中是
window,Node.js 中是global) - 严格模式下,this 是
undefined,不会自动绑定到全局对象
例如:
function foo() { console.log(this); }
foo(); // 非严格模式 → window;严格模式 → undefined
对象方法调用(隐式绑定)
当函数作为对象的属性被调用(即用 obj.method() 形式),this 指向该对象(即点号左边的对象)。
- 注意:只看调用时的“最近一层”对象,嵌套不影响
- 如果把方法赋值给变量再调用,就丢失了对象绑定,退化为普通调用
例如:
const obj = {
name: 'Alice',
say() { console.log(this.name); }
};
obj.say(); // 'Alice' → this 指向 obj
const fn = obj.say;
fn(); // undefined(严格模式)或 window.name → this 不再是 obj
显式绑定与硬绑定(call / apply / bind)
通过 call、apply 或 bind 调用函数时,this 被明确指定为第一个参数的值。
-
func.call(obj, a, b)→ this = obj -
func.apply(obj, [a, b])→ this = obj -
const bound = func.bind(obj)→ 返回的新函数永远以 obj 为 this -
bind生成的函数即使再次用 call 改写,也无法覆盖原始绑定(硬绑定优先级高)
构造函数调用(new 绑定)
使用 new 调用函数时,会创建一个新对象,并将 this 绑定到该新实例上。
- 函数内部的 this 指向新创建的对象
- 若构造函数显式返回一个对象,则 this 的结果被忽略;返回原始值则不影响 this 绑定
例如:
function Person(name) {
this.name = name; // this 指向 new 出来的实例
}
const p = new Person('Bob');
console.log(p.name); // 'Bob'
箭头函数(无自己的 this)
箭头函数**不绑定自己的 this**,它会沿作用域链向上查找,继承外层普通函数(或全局)的 this 值。
- 不能用 call/apply/bind 修改其 this
- 不能作为构造函数(不能 new)
- 适合用于回调、事件处理器等需要保持外层 this 的场景
例如:
const obj = {
name: 'Charlie',
regular() {
console.log(this.name); // 'Charlie'
const arrow = () => console.log(this.name); // 也输出 'Charlie'
a
rrow();
}
};
obj.regular();
优先级顺序(绑定规则冲突时)
当多种绑定方式共存,按以下优先级判断 this:
- new 绑定 > 显式绑定(call/apply/bind) > 隐式绑定(对象方法) > 默认绑定(普通调用)
- 箭头函数不参与该排序,它直接跳过所有规则,取外层 this
不复杂但容易忽略。
# javascript
# java
# js
# node.js
# node
# 处理器
# 浏览器
# app
# win
# 作用域
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
JavaScript如何实现继承_有哪些常用方法
如何撰写建站申请书?关键要点有哪些?
Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程
javascript中的数组方法有哪些_如何利用数组方法简化数据处理
js实现获取鼠标当前的位置
Laravel如何生成和使用数据填充?(Seeder和Factory示例)
javascript日期怎么处理_如何格式化输出
Python自动化办公教程_ExcelWordPDF批量处理案例
SQL查询语句优化的实用方法总结
javascript如何操作浏览器历史记录_怎样实现无刷新导航
焦点电影公司作品,电影焦点结局是什么?
深圳网站制作培训,深圳哪些招聘网站比较好?
java中使用zxing批量生成二维码立牌
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站?
原生JS实现图片轮播切换效果
Android滚轮选择时间控件使用详解
Python文本处理实践_日志清洗解析【指导】
Laravel的.env文件有什么用_Laravel环境变量配置与管理详解
如何安全更换建站之星模板并保留数据?
如何快速生成高效建站系统源代码?
如何在建站主机中优化服务器配置?
Laravel怎么自定义错误页面_Laravel修改404和500页面模板
Laravel集合Collection怎么用_Laravel集合常用函数详解
再谈Python中的字符串与字符编码(推荐)
laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法
Laravel怎么调用外部API_Laravel Http Client客户端使用
如何制作一个表白网站视频,关于勇敢表白的小标题?
如何在阿里云虚拟主机上快速搭建个人网站?
Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能
Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑
魔毅自助建站系统:模板定制与SEO优化一键生成指南
Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性
微信小程序制作网站有哪些,微信小程序需要做网站吗?
nodejs redis 发布订阅机制封装实现方法及实例代码
php 三元运算符实例详细介绍
如何用已有域名快速搭建网站?
网站制作价目表怎么做,珍爱网婚介费用多少?
怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗?
如何在宝塔面板创建新站点?
Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】
Laravel DB事务怎么使用_Laravel数据库事务回滚操作
如何选择可靠的免备案建站服务器?
Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言
如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环
Python文件操作最佳实践_稳定性说明【指导】
历史网站制作软件,华为如何找回被删除的网站?
java获取注册ip实例
如何快速配置高效服务器建站软件?
晋江文学城电脑版官网 晋江文学城网页版直接进入


rrow();
}
};
obj.regular();