javascript this是什么_它的指向规则如何确定

发布时间 - 2025-12-26 00:00:00    点击率:
this是运行时绑定的引用,值取决于函数调用方式:独立调用指向全局对象(严格模式为undefined),对象方法调用指向该对象,new调用指向新实例,call/apply/bind显式指定,箭头函数继承外层this。

this 是 JavaScript 中的一个关键字,它不是一个固定值,而是一个在函数执行时才确定的**运行时绑定**的引用,指向当前函数被调用时所处的**执行上下文对象**。它的值不取决于函数如何定义,而取决于函数**如何被调用**。

普通函数调用(非严格模式)

当函数独立调用(即不通过对象属性、new 或 call/apply/bind 调用)时,this 指向全局对象:

  • 浏览器中是 window
  • Node.js 中是 global

例如:

function foo() { console.log(this); }
foo(); // window(浏览器)

作为对象方法调用

当函数作为对象的属性被调用时,this 指向该对象(即“点号左边的对象”):

const obj = {
  name: 'Alice',
  say() { console.log(this.name); }
};
obj.say(); // 'Alice' → this 指向 obj

注意:只看调用时的写法,和函数定义位置无关;若把方法赋给变量再调,this 会丢失(变*局对象或 undefined)。

构造函数调用(new)

使用 new 调用函数时,JavaScript 引擎会创建一个新对象,并将 this 绑定到这个新对象上:

function Person(name) {
  this.name = name; // this 指向新创建的实例
}
const p = new Person('Bob'); // p.name === 'Bob'

显式绑定(call / apply / bind)

可通过 callapplybind 显式指定 this 的值:

  • func.call(obj, arg1, arg2) —— 立即执行,this 设为 obj
  • func.apply(obj, [arg1, arg2]) —— 同上,参数传数组
  • func.bind(obj) —— 返回新函数,永久绑定 this 为 obj

bind 生成的函数无法再被 call/apply 覆盖(硬绑定优先级最高)。

箭头函数没有自己的 this

箭头函数不绑定 this,它会**沿作用域链向上查找外层普通函数的 this 值**(词法绑定):

const obj = {
  name: 'Charlie',
  regular() { console.log(this.name); },
  arrow: () => { console.log(this.name); } // this 是外层作用域的 this(通常是 window)
};
obj.regular(); // 'Charlie'
obj.arrow();   // undefined(因为外层 this 不是 obj)

因此箭头函数适合避免 this 失去上下文的场景(如事件回调、定时器),但不能用作构造函数或需要动态 this 的方法。

严格模式下的普通调用

在严格模式下,独立调用函数时 this 不再自动绑定到全局对象,而是保持为 undefined

'use strict';
function foo() { console.log(this); }
foo(); // undefined(不是 window)

这有助于提前发现 this 绑定错误。

优先级顺序(从高到低)

当多种规则同时存在时,this 的最终指向由以下优先级决定:

  • new 绑定 > 显式绑定(call/apply/bind) > 隐式绑定(对象方法) > 默认绑定(独立调用)
  • 箭头函数不参与该链条,它直接继承外层 this

理解 this 的关键是:别猜定义,盯住调用方式。每次看到函数执行,先问一句——“它是怎么被调用的?”


# javascript  # java  # js  # node.js  # node  # 浏览器  # app  # win  # 作用域 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  如何将凡科建站内容保存为本地文件?  三星网站视频制作教程下载,三星w23网页如何全屏?  太平洋网站制作公司,网络用语太平洋是什么意思?  如何快速搭建高效WAP手机网站?  Internet Explorer官网直接进入 IE浏览器在线体验版网址  制作电商网页,电商供应链怎么做?  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf?  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  如何制作一个表白网站视频,关于勇敢表白的小标题?  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  高防服务器租用如何选择配置与防御等级?  湖南网站制作公司,湖南上善若水科技有限公司做什么的?  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  Java解压缩zip - 解压缩多个文件或文件夹实例  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  Python文件异常处理策略_健壮性说明【指导】  如何在云虚拟主机上快速搭建个人网站?  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  实现点击下箭头变上箭头来回切换的两种方法【推荐】  Python3.6正式版新特性预览  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站?  深圳网站制作平台,深圳市做网站好的公司有哪些?  Laravel如何为API生成Swagger或OpenAPI文档  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊?  如何选择PHP开源工具快速搭建网站?  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  JavaScript如何实现路由_前端路由原理是什么  深圳防火门网站制作公司,深圳中天明防火门怎么编码?  如何在Windows环境下新建FTP站点并设置权限?  nodejs redis 发布订阅机制封装实现方法及实例代码  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界?  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  Python高阶函数应用_函数作为参数说明【指导】  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  nginx修改上传文件大小限制的方法  php485函数参数是什么意思_php485各参数详细说明【介绍】  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Android利用动画实现背景逐渐变暗  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  用yum安装MySQLdb模块的步骤方法  香港服务器网站推广:SEO优化与外贸独立站搭建策略