0

0

javascript的this关键字指向什么?【教程】

紅蓮之龍

紅蓮之龍

发布时间:2026-01-16 22:20:03

|

637人浏览过

|

来源于php中文网

原创

javascript中this的值在函数执行时确定,取决于调用方式:普通调用时指向全局对象或undefined;对象方法调用时指向该对象;call/apply/bind可显式指定;箭头函数继承外层词法作用域的this。

javascript的this关键字指向什么?【教程】

JavaScript 中 this 的值不是写死的,它在函数执行时才确定,且完全取决于「函数如何被调用」,而不是函数定义的位置或方式。

普通函数调用时,this 指向全局对象(非严格模式)或 undefined(严格模式)

这是最容易踩坑的场景:单独写一个函数然后直接调用,this 就会“掉”进全局或 undefined 里。

  • 浏览器中非严格模式下:this 指向 window
  • 严格模式下:thisundefined,访问 this.xxx 会报 TypeError
  • Node.js 环境中,全局对象是 globalThis,但模块顶层的 this 实际指向 module.exports —— 这和浏览器行为不一致,容易混淆
function foo() {
  console.log(this);
}
foo(); // 非严格模式 → window;严格模式 → undefined

作为对象方法调用时,this 指向该对象

这是最符合直觉的情况,也是 this 设计的初衷:让方法能自然访问所属对象的数据。

  • 只看「点号左边是谁」:如果 obj.method()this 就是 obj
  • 即使方法是从原型上继承来的,只要调用形式是 obj.method()this 仍是 obj
  • 注意箭头函数没有自己的 this,它会沿作用域链向上找外层普通函数的 this
const obj = {
  name: 'Alice',
  say() {
    return this.name;
  }
};
obj.say(); // 'Alice'

使用 callapplybind 时,this 由第一个参数显式指定

这三个方法是唯一能「强行改写」this 值的手段。它们的区别只在参数传递方式,对 this 的控制逻辑完全一致。

Python开发网站指南 WORD版
Python开发网站指南 WORD版

本文档主要讲述的是Python开发网站指南;HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器 Python和其他程序语言一样,有自身的一套流程控制语句,而且这些语句的语法和其它程序语言类似,都有for, if ,while 类的关键字来表达程序流程。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载

立即学习Java免费学习笔记(深入)”;

  • func.call(obj, a, b):把 this 绑定到 obj,并立即执行,参数逐个传入
  • func.apply(obj, [a, b]):同上,但参数以数组形式传入
  • func.bind(obj, a):返回一个新函数,this 永久绑定为 obj,参数 a 被预置(柯里化)
  • 如果传入 nullundefined,非严格模式下会被自动替换为全局对象,严格模式下就真的用 null/undefined

箭头函数没有自己的 this,它继承外层词法作用域的 this

这是箭头函数和普通函数最核心的差异之一,也是 React 类组件中常用来避免 this 绑定问题的原因。

  • 箭头函数内部的 this 值,在定义时就固定了,跟调用方式无关
  • 它不会响应 call/apply/bind 的调用,这些方法传入的 this 参数会被忽略
  • 嵌套多层箭头函数时,this 始终等于最外层第一个普通函数的 this
const obj = {
  name: 'Bob',
  regular() {
    console.log(this.name); // 'Bob'
    const arrow = () => console.log(this.name); // 也输出 'Bob'
    arrow();
  }
};
obj.regular();

真正难的不是记住规则,而是识别「函数调用的上下文是否被意外改变」——比如把对象方法赋值给变量后再调用、事件回调、定时器、Promise 回调里丢失 this。这时候别硬扛,优先用箭头函数或 bind,比手动猜 this 指向更可靠。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1049

2024.03.01

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

554

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

718

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6045

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

492

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

219

2023.09.04

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.8万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号