this绑定规则

在JavaScript中，this的绑定规则决定了函数执行时this指向的对象。理解这些规则对编写可维护的代码至关重要，尤其是在处理对象方法、事件回调或高阶函数时。以下是this绑定的核心规则及其应用场景。

默认绑定

当函数独立调用时，this默认指向全局对象（浏览器中为window，Node.js中为global）。严格模式下，this为undefined。

function showThis() {
  console.log(this);
}

showThis(); // 浏览器中输出: Window {...}

严格模式下的行为：

"use strict";
function strictShowThis() {
  console.log(this);
}

strictShowThis(); // 输出: undefined

隐式绑定

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

const user = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

user.greet(); // 输出: Hello, Alice!

注意隐式丢失问题：

const greetFunc = user.greet;
greetFunc(); // 输出: Hello, undefined! (默认绑定生效)

显式绑定

通过call、apply或bind强制指定this的指向。

function introduce(lang) {
  console.log(`I code in ${lang}. My name is ${this.name}`);
}

const dev = { name: "Bob" };
introduce.call(dev, "JavaScript"); // 输出: I code in JavaScript. My name is Bob
introduce.apply(dev, ["Python"]); // 输出: I code in Python. My name is Bob

const boundFunc = introduce.bind(dev, "Rust");
boundFunc(); // 输出: I code in Rust. My name is Bob

new绑定

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

function Person(name) {
  this.name = name;
  this.sayHi = function() {
    console.log(`Hi, I'm ${this.name}`);
  };
}

const charlie = new Person("Charlie");
charlie.sayHi(); // 输出: Hi, I'm Charlie

箭头函数

箭头函数的this继承自外层作用域，且无法通过上述规则修改。

const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
};

timer.start(); // 每秒输出递增数字

对比普通函数的陷阱：

const brokenTimer = {
  seconds: 0,
  start() {
    setInterval(function() {
      // this指向全局对象！
      this.seconds++; // TypeError
    }, 1000);
  }
};

优先级规则

当多个规则同时适用时，按以下优先级决定：

1. new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

function Demo() {
  console.log(this);
}

const obj = {};
const boundDemo = Demo.bind(obj);

new boundDemo(); // 输出: Demo实例，而非obj

特殊场景处理

DOM事件处理

事件处理函数中的this指向触发事件的DOM元素：

button.addEventListener("click", function() {
  console.log(this); // 输出: <button>元素
});

定时器回调

非箭头函数的回调中this指向全局对象：

setTimeout(function() {
  console.log(this); // 浏览器中输出: Window
}, 100);

高阶函数

数组方法可接收第二个参数指定this：

[1, 2, 3].forEach(function(item) {
  console.log(item, this); // this指向{x:10}
}, { x: 10 });

常见误区与解决方案

嵌套函数中的this

const problem = {
  data: 42,
  getData() {
    function inner() {
      return this.data; // this指向全局
    }
    return inner();
  }
};

console.log(problem.getData()); // undefined

解决方案：

const solution = {
  data: 42,
  getData() {
    const inner = () => this.data; // 箭头函数继承this
    return inner();
  }
};

回调函数绑定

class Loader {
  constructor() {
    this.data = null;
    // 需要显式绑定
    document.addEventListener("load", this.handleLoad.bind(this));
  }

  handleLoad() {
    this.data = "loaded";
  }
}

高级模式

软绑定（Soft Binding）

实现可覆盖的默认绑定：

Function.prototype.softBind = function(obj) {
  const fn = this;
  return function() {
    fn.apply(!this || this === global ? obj : this, arguments);
  };
};

function foo() {
  console.log(this.name);
}

const obj1 = { name: "obj1" },
      obj2 = { name: "obj2" };

const bar = foo.softBind(obj1);
bar(); // obj1

obj2.bar = bar;
obj2.bar(); // obj2 (隐式绑定优先)

this与原型链

方法通过原型链调用时，仍遵循隐式绑定规则：

const parent = {
  name: "Parent",
  getName() {
    return this.name;
  }
};

const child = Object.create(parent);
child.name = "Child";

console.log(child.getName()); // 输出: Child