首页 > web前端 > js教程 > 正文

javascript_this关键字的绑定规则

夜晨
发布: 2025-12-02 20:18:07
原创
670人浏览过
this的指向由运行时动态确定,遵循四种绑定规则:1. 默认绑定指独立函数调用时this指向全局对象(严格模式下为undefined);2. 隐式绑定指函数作为对象方法调用时this指向该对象,但赋值后调用会丢失绑定;3. 显式绑定通过call、apply或bind手动指定this值,其中call和apply立即执行,bind返回新函数;4. new绑定指使用new调用构造函数时this指向新创建的对象。优先级顺序为:new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。

javascript_this关键字的绑定规则

JavaScript 中 this 的指向问题常常让开发者感到困惑,其实它的绑定遵循一套明确的规则。this 的值不是在函数定义时决定的,而是在函数运行时动态确定的。理解 this 的绑定规则,关键在于掌握四种绑定方式:默认绑定、隐式绑定、显式绑定和 new 绑定。

1. 默认绑定(Default Binding)

这是最基础的绑定规则,适用于独立函数调用的情况。

当一个函数被直接调用,没有上下文对象时,this 指向全局对象(在浏览器中是 window,在严格模式下为 undefined)。

例如:
function sayHi() {
  console.log(this);
}
sayHi(); // 非严格模式下输出 window,严格模式下输出 undefined
登录后复制

2. 隐式绑定(Implicit Binding)

当函数作为对象的方法被调用时,this 指向该对象。

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

注意:只有最后一层引用才起作用。

无涯·问知
无涯·问知

无涯·问知,是一款基于星环大模型底座,结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

无涯·问知 153
查看详情 无涯·问知
例如:
const person = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};
person.greet(); // 输出 'Alice',this 指向 person
登录后复制

如果将方法赋值给变量再调用,会丢失绑定:

const fn = person.greet;
fn(); // 输出 undefined(非严格模式可能是 window),this 不再指向 person
登录后复制

3. 显式绑定(Explicit Binding)

通过 call、apply 或 bind 方法,可以手动指定函数执行时的 this 值。

  • call:立即执行函数,参数依次传入
  • apply:立即执行函数,参数以数组形式传入
  • bind:返回一个新函数,this 被永久绑定
例如:
function introduce(age) {
  console.log(`I'm ${this.name}, ${age} years old`);
}
const user = { name: 'Bob' };
introduce.call(user, 25); // 输出 "I'm Bob, 25 years old"
introduce.apply(user, [30]); // 输出 "I'm Bob, 30 years old"
const boundFn = introduce.bind(user);
boundFn(28); // 输出 "I'm Bob, 28 years old"
登录后复制

4. new 绑定(New Binding)

使用 new 关键字调用函数(构造函数)时,会创建一个新对象,this 指向这个新对象。

例如:
function Person(name) {
  this.name = name; // this 指向 new 创建的对象
}
const p = new Person('Charlie');
console.log(p.name); // 输出 'Charlie'
登录后复制

这四种绑定规则有优先级:new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定。只要记住这个顺序,就能准确判断 this 的指向。

基本上就这些,不复杂但容易忽略细节。

以上就是javascript_this关键字的绑定规则的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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