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)

通过 callapplybind 调用函数时,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'
    arrow();
  }
};
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实例  如何快速配置高效服务器建站软件?  晋江文学城电脑版官网 晋江文学城网页版直接进入