0

0

什么是this关键字_它的指向规则是什么【教程】

狼影

狼影

发布时间:2026-01-29 13:47:07

|

845人浏览过

|

来源于php中文网

原创

this 的指向由函数调用时的上下文动态决定:普通调用时非严格模式指向全局对象、严格模式为 undefined;对象点调用时指向该对象;箭头函数继承外层 this;call/apply/bind 和 new 可显式改变 this。

什么是this关键字_它的指向规则是什么【教程】

this 的指向不是由函数定义时决定的,而是由函数**调用时的上下文**动态确定的。它没有固定值,搞错 this 指向是 JavaScript 中最常见、最隐蔽的 bug 来源之一。

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

这是最容易踩坑的场景:把对象方法赋值给变量后单独调用。

const obj = {
  name: 'Alice',
  say() { console.log(this.name); }
};
const fn = obj.say;
fn(); // 非严格模式下输出 undefined(浏览器中 this 指向 window,但 window.name 通常为空);严格模式下报错 "Cannot read property 'name' of undefined"

原因:此时 fn() 是“普通调用”,不带任何上下文绑定。

  • 浏览器非严格模式下,this 指向 window
  • 在严格模式或 Node.js 环境中,thisundefined
  • ES6 模块默认启用严格模式,所以几乎总是 undefined

对象方法调用时,this 指向该对象(但仅限“点调用”)

只有形如 obj.method() 这种直接通过属性访问符调用,才触发“对象方法绑定”规则。

const obj = { name: 'Bob', say() { console.log(this.name); } };
obj.say(); // 输出 'Bob'

注意以下情况不适用:

  • (obj.say)() —— 圆括号不改变调用方式,仍是普通调用(this 失效)
  • setTimeout(obj.say, 100) —— 回调函数被提取后独立调用
  • [obj.say][0]() —— 数组取值再调用,也丢失绑定

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

箭头函数的 this 是词法绑定的,无法被 call/apply/bind 修改,也不能作为构造函数使用。

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

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

下载
const obj = {
  name: 'Charlie',
  regular() { 
    console.log('regular:', this.name); 
    const arrow = () => console.log('arrow:', this.name);
    arrow(); // 输出 'arrow: Charlie',因为继承了 regular 的 this
  }
};
obj.regular();

典型误用:

  • 在事件监听器中写 el.addEventListener('click', () => this.handleClick()) —— this 不会自动指向组件实例,得靠外层函数绑定好再传入
  • 试图用 arrow.bind(obj) 强行改 this —— 无效,语法合法但无效果

显式绑定与 new 调用会覆盖默认规则

callapplybind 可强制指定 thisnew 调用则让 this 指向新创建的实例。

  • func.call(obj, 1, 2)thisobj
  • const bound = func.bind(obj); bound() → 永远指向 obj(即使后续再 call 其他对象也无效)
  • new Func()this 是新生成的空对象,且返回值优先级高于函数内 return 的非对象值

注意:bind 返回的函数如果再被 new 调用,this 绑定会被忽略——这是少数能“绕过” bind 的情况。

真正难的不是记住规则,而是在嵌套回调、异步链、类方法提取、第三方库集成时,快速判断当前执行this 到底是谁。建议在不确定时,直接 console.log(this),比查文档更快。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

104

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2025.12.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

531

2023.09.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

397

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

575

2023.08.10

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

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

514

2023.06.20

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

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

244

2023.07.28

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

2

2026.01.29

热门下载

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

精品课程

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

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

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

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