JavaScript 中的 this 绑定机制深入解析

function sayHi() {
  console.log(this.name);
}
const person1 = { name: "张三", sayHi };
const person2 = { name: "李四", sayHi };
person1.sayHi(); // 张三
person2.sayHi(); // 李四

// 非严格模式
function foo() {
  console.log(this); // window（浏览器环境）
}
foo(); // 独立调用，触发默认绑定
// 严格模式
function bar() {
  'use strict';
  console.log(this); // undefined
}
bar();
// 嵌套函数的默认绑定
const obj = {
  fn() {
    // 这里的 this 是 obj（隐式绑定）
    function inner() {
      console.log(this); // window（非严格模式，独立调用触发默认绑定）
    }
    inner(); // 无调用前缀，独立执行
  }
};
obj.fn();

const user = {
  name: "王五",
  age: 28,
  introduce() {
    console.log(`我是${this.name}，今年${this.age}岁`);
  },
  address: {
    city: "北京",
    showLocation() {
      console.log(`我在${this.city}`); // this 指向 address 对象
    }
  }
};
user.introduce(); // 我是王五，今年28岁（this = user）
user.address.showLocation(); // 我在北京（this = address）

const user = {
  name: "赵六",
  sayHi() {
    console.log(this.name);
  }
};
// 陷阱1：函数赋值给独立变量
const hi = user.sayHi; // 仅获取函数引用，未执行
hi(); // undefined（this = window，非严格模式）
// 陷阱2：作为回调函数传递
setTimeout(user.sayHi, 1000); // undefined（定时器回调独立执行）
[1,2,3].forEach(user.sayHi); // undefined（forEach 回调独立执行）

function printInfo(job) {
  console.log(`${this.name}，从事${job}工作`);
}
const personA = { name: "钱七" };
const personB = { name: "孙八" };
// call：立即执行，参数逐个传递
printInfo.call(personA, "前端开发"); // 钱七，从事前端开发工作
// apply：立即执行，参数以数组传递
printInfo.apply(personB, ["后端开发"]); // 孙八，从事后端开发工作
// bind：返回新函数，this 永久绑定
const printTeacher = printInfo.bind(personA, "讲师");
printTeacher(); // 钱七，从事讲师工作
// 即使后续用 call 尝试修改，也无效
printTeacher.call(personB, "产品经理"); // 钱七，从事讲师工作

printInfo.call(null, "设计师"); // undefined，从事设计师工作（非严格模式）

function Person(name, age) {
  this.name = name;
  this.age = age;
  console.log(this); // Person { name: '周九', age: 30 }（this 指向新实例）
}
const person1 = new Person("周九", 30);
console.log(person1.name); // 周九（this 绑定到 person1）
// new 绑定优先级高于显式绑定
const person2 = { name: "吴十" };
const BoundPerson = Person.bind(person2); // 显式绑定到 person2
const person3 = new BoundPerson("郑十一", 25);
console.log(person3.name); // 郑十一（this 指向新实例 person3，而非 person2）

const obj = {
  name: "王十二",
  asyncTask() {
    // 普通函数作为回调：this 指向 window（默认绑定）
    setTimeout(function() {
      console.log(this.name); // undefined
    }, 500);
    // 箭头函数作为回调：this 继承外层 asyncTask 的 this（即 obj）
    setTimeout(() => {
      console.log(this.name); // 王十二
    }, 1000);
  }
};
obj.asyncTask();
// 箭头函数无法用 new 调用（会报错）
const ArrowFn = () => {};
new ArrowFn(); // TypeError: ArrowFn is not a constructor
// 箭头函数的 this 无法通过 call 修改
const test = () => console.log(this.name);
test.call({ name: "李十三" }); // undefined（this 仍为外层作用域的 this）

const user = {
  name: "小明",
  fn1() {
    setTimeout(function() {
      console.log(this.name); // 答案：undefined（默认绑定 window）
    }, 0);
  },
  fn2() {
    setTimeout(() => {
      console.log(this.name); // 答案：小明（继承 fn2 的 this = user）
    }, 0);
  }
};
user.fn1();
user.fn2();

function Foo() {
  this.value = 100;
}
const obj = { value: 200 };
const BoundFoo = Foo.bind(obj); // 显式绑定到 obj
const instance = new BoundFoo();
console.log(instance.value); // 答案：100（new 优先级高于 bind，this 指向实例）

const company = {
  name: "字节跳动",
  department: {
    name: "前端研发部",
    getDepartmentName() {
      console.log(this.name);
    }
  }
};
const getDeptName = company.department.getDepartmentName;
getDeptName(); // 答案：undefined（独立调用，默认绑定 window）
company.department.getDepartmentName(); // 答案：前端研发部（this 指向 department）