一分钟搞懂this指向

前端的日常2025-07-19 14:40

独立函数调用------默认绑定！this指向全局对象（浏览器中就是Window）

scss 复制代码

function fire() {
  console.log(this); // 浏览器中: Window
}
fire(); // 函数直接调用

通过对象调用------隐式绑定！this指向调用它的对象

javascript 复制代码

const weapon = {
  name: "AK47",
  shoot() {
    console.log(this.name); // AK47
  }
};
weapon.shoot(); // 通过对象调用

call/apply/bind------显式绑定！强行指定this指向

scss 复制代码

function reload() {
  console.log(this.bullet); 
}

const gun = { bullet: 30 };
reload.call(gun);   // 30
reload.apply(gun);  // 30
const bindReload = reload.bind(gun);
bindReload();       // 30

new实例化------构造函数模式！this指向新创建的对象

javascript 复制代码

function Sniper(name) {
  this.name = name; // this指向新对象
}
const awp = new Sniper("AWM"); 
console.log(awp.name); // AWM

箭头函数是例外！没有自己的this，继承外层上下文

js复制代码

javascript 复制代码

const obj = {
  timer: function() {
    setTimeout(() => {
      console.log(this); // obj（继承外层this）
    }, 100);
  }
};
obj.timer();

记住口诀：谁调用指向谁，new对象最优先，箭头继承看外层！