js中this的六种模式_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

js中this的六种模式

2025-11-10

浏览次数：次

返回列表

this的指向取决于函数调用方式，共六种绑定模式：1. 全局环境中this指向window（浏览器）或global（Node.js）；2. 独立调用时非严格模式指向全局对象，严格模式为undefined；3. 作为对象方法调用时this指向调用者；4. 构造函数中this指向新创建的实例；5. 显式绑定通过call、apply、bind指定this值；6. 箭头函数的this继承外层作用域，不可被显式改变。关键在于调用方式而非定义位置。

js中this的六种模式

在 J*aScript 中，this 的指向并不是固定不变的，它的值取决于函数是如何被调用的。理解 this 的指向是掌握 JS 核心机制的关键之一。以下是 this 的六种常见绑定模式：

1. 全局环境中的 this

在全局执行环境中（浏览器中），无论是否严格模式，this 都指向全局对象。

浏览器中，this 指向 window
Node.js 环境中，this 指向 global

例子：

console.log(this === window); // true（浏览器中）

2. 函数独立调用

当一个普通函数被直接调用时，this 的指向取决于是否启用严格模式。

非严格模式下：this 指向全局对象（window）
严格模式下（use strict）：this 为 undefined

例子：

function foo() {
  console.log(this);
}
foo(); // 非严格模式：window；严格模式：undefined

3. 对象方法中的 this

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

谁调用了方法，this 就指向谁

例子：

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};
obj.greet(); // 输出 'Alice'，this 指向 obj

4. 构造函数中的 this

使用 new 调用函数时，this 指向新创建的实例对象。

UQ云商B2B2C系统

UQCMS云商是一款B2B2C电子商务软件，非常适合初创的创业者，个人及中小型企业。程序采用PHP+MYSQL,模板采用smarty模板，二次开发，简单方便，无需学习其他框架就可以自行模板设计。永久免费使用，操作简单，安全稳定。支持PC+WAP+微信三种浏览方式，支持微信公众号。

1 查看详情 UQ云商B2B2C系统

构造函数内部的 this 代表即将创建的新对象
new 操作会创建一个新对象并将其绑定到 this

例子：

function Person(name) {
  this.name = name;
}
const p = new Person('Bob');
console.log(p.name); // 'Bob'

5. 显式绑定（call、apply、bind）

通过 call、apply 或 bind 方法可以显式指定 this 的指向。

call(arg, ...args)：立即调用，参数逐个传入
apply(arg, [args])：立即调用，参数为数组
bind(arg)：返回新函数，this 固定为指定对象

例子：

function sayHi() {
  console.log(this.name);
}
const user = { name: 'Tom' };
sayHi.call(user); // 'Tom'

6. 箭头函数中的 this

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

不会被 call、apply、bind 改变
始终指向定义时所在上下文的 this

例子：

const obj = {
  name: 'Lucy',
  regularFunc: function() {
    const arrowFunc = () => {
      console.log(this.name); // 'Lucy'
    };
    arrowFunc();
  }
};
obj.regularFunc(); // 箭头函数的 this 指向外层函数的 this

基本上就这些。掌握这六种模式，能帮你准确判断 this 在各种场景下的指向。关键是看函数如何被调用，而不是如何定义。不复杂但容易忽略细节。