JavaScript中this指向各种场景_前端中this的指向

liuian 2025-09-09 04:34 29 浏览

在 JavaScript 中，this的指向是一个核心概念，其值取决于函数的调用方式，而非定义位置（箭头函数除外）。以下是this指向的常见场景及具体说明：

1. 全局作用域中的this

在全局作用域（非函数内部），this指向全局对象：

浏览器环境中，全局对象是window；
Node.js 环境中，全局对象是global。

console.log(this === window); // 浏览器中：true
console.log(this === global); // Node.js中：true

注意：严格模式（"use strict"）下，全局作用域的this仍然指向全局对象（与非严格模式一致）。

2. 普通函数调用（独立调用）

当函数独立调用（不依附于任何对象）时，this的指向分两种情况：

非严格模式：this指向全局对象（浏览器中为window）；
严格模式：this为undefined。

// 非严格模式
function foo() {
  console.log(this); // window（浏览器）
}
foo(); // 独立调用

// 严格模式
function bar() {
  "use strict";
  console.log(this); // undefined
}
bar(); // 独立调用

3. 对象方法调用

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

const obj = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name); // this指向obj
  }
};

obj.sayHi(); // 输出："Alice"（调用者是obj）

特殊情况：如果方法被赋值给变量后独立调用，this会变回全局对象（非严格模式）或undefined（严格模式）：

const say = obj.sayHi;
say(); // 非严格模式下输出：undefined（this指向window，window.name为空）

4. 构造函数调用（new关键字）

当函数通过new关键字作为构造函数调用时，this指向新创建的实例对象。

function Person(name) {
  this.name = name; // this指向新实例
}

const p = new Person("Bob");
console.log(p.name); // 输出："Bob"（this指向p）

注意：如果忘记使用new，函数会变为普通调用，this指向全局对象：

const p = Person("Bob"); // 错误：未使用new
console.log(window.name); // 输出："Bob"（this指向window）

5. 箭头函数中的this

箭头函数没有自己的this，其this继承自外层作用域的this（定义时确定，永不改变）。

const obj = {
  foo: function() {
    // 普通函数，this指向obj
    const bar = () => {
      console.log(this); // 箭头函数继承foo的this（即obj）
    };
    bar();
  }
};

obj.foo(); // 输出：obj

场景对比：箭头函数 vs 普通函数

const timer = {
  delay: 100,
  start: function() {
    // 普通函数：this指向window（非严格模式）
    setTimeout(function() {
      console.log(this.delay); // 输出：undefined（window.delay不存在）
    }, this.delay);

    // 箭头函数：this继承start的this（即timer）
    setTimeout(() => {
      console.log(this.delay); // 输出：100（timer.delay）
    }, this.delay);
  }
};

timer.start();

6. 事件处理函数中的this

在 DOM 事件处理函数中，this通常指向触发事件的元素（即绑定事件的 DOM 节点）。

<button id="btn">点击我</button>
<script>
  const btn = document.getElementById("btn");
  btn.onclick = function() {
    console.log(this); // 指向按钮元素（<button>）
    console.log(this === btn); // true
  };
</script>

注意：如果用箭头函数作为事件处理函数，this会继承外层作用域的this（通常是window）：

btn.onclick = () => {
  console.log(this); // 指向window（外层作用域的this）
};

7.apply/call/bind改变this指向

这三个方法可以手动指定函数中this的指向：

func.call(thisArg, arg1, arg2, ...)：立即调用函数，参数逐个传入；
func.apply(thisArg, [argsArray])：立即调用函数，参数以数组形式传入；
func.bind(thisArg, arg1, arg2, ...)：返回新函数，this被永久绑定，参数可部分预设（柯里化）。

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person1 = { name: "Charlie" };
const person2 = { name: "Diana" };

greet.call(person1); // 输出："Hello, Charlie"（this指向person1）
greet.apply(person2); // 输出："Hello, Diana"（this指向person2）

const greetCharlie = greet.bind(person1);
greetCharlie(); // 输出："Hello, Charlie"（this永久绑定person1）