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

// 非嚴格模式
function foo() {
  console.log(this); // window（瀏覽器環(huán)境）
}
foo(); // 獨立調(diào)用，觸發(fā)默認綁定
// 嚴格模式
function bar() {
  'use strict';
  console.log(this); // undefined
}
bar();
// 嵌套函數(shù)的默認綁定
const obj = {
  fn() {
    // 這里的 this 是 obj（隱式綁定）
    function inner() {
      console.log(this); // window（非嚴格模式，獨立調(diào)用觸發(fā)默認綁定）
    }
    inner(); // 無調(diào)用前綴，獨立執(zhí)行
  }
};
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：函數(shù)賦值給獨立變量
const hi = user.sayHi; // 僅獲取函數(shù)引用，未執(zhí)行
hi(); // undefined（this = window，非嚴格模式）
// 陷阱2：作為回調(diào)函數(shù)傳遞
setTimeout(user.sayHi, 1000); // undefined（定時器回調(diào)獨立執(zhí)行）
[1,2,3].forEach(user.sayHi); // undefined（forEach 回調(diào)獨立執(zhí)行）

function printInfo(job) {
  console.log(`${this.name}，從事${job}工作`);
}
const personA = { name: "錢七" };
const personB = { name: "孫八" };
// call：立即執(zhí)行，參數(shù)逐個傳遞
printInfo.call(personA, "前端開發(fā)"); // 錢七，從事前端開發(fā)工作
// apply：立即執(zhí)行，參數(shù)以數(shù)組傳遞
printInfo.apply(personB, ["后端開發(fā)"]); // 孫八，從事后端開發(fā)工作
// bind：返回新函數(shù)，this 永久綁定
const printTeacher = printInfo.bind(personA, "講師");
printTeacher(); // 錢七，從事講師工作
// 即使后續(xù)用 call 嘗試修改，也無效
printTeacher.call(personB, "產(chǎn)品經(jīng)理"); // 錢七，從事講師工作

printInfo.call(null, "設(shè)計師"); // undefined，從事設(shè)計師工作（非嚴格模式）

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 綁定優(yōu)先級高于顯式綁定
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() {
    // 普通函數(shù)作為回調(diào)：this 指向 window（默認綁定）
    setTimeout(function() {
      console.log(this.name); // undefined
    }, 500);
    // 箭頭函數(shù)作為回調(diào)：this 繼承外層 asyncTask 的 this（即 obj）
    setTimeout(() => {
      console.log(this.name); // 王十二
    }, 1000);
  }
};
obj.asyncTask();
// 箭頭函數(shù)無法用 new 調(diào)用（會報錯）
const ArrowFn = () => {};
new ArrowFn(); // TypeError: ArrowFn is not a constructor
// 箭頭函數(shù)的 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 優(yōu)先級高于 bind，this 指向?qū)嵗?

const company = {
  name: "字節(jié)跳動",
  department: {
    name: "前端研發(fā)部",
    getDepartmentName() {
      console.log(this.name);
    }
  }
};
const getDeptName = company.department.getDepartmentName;
getDeptName(); // 答案：undefined（獨立調(diào)用，默認綁定 window）
company.department.getDepartmentName(); // 答案：前端研發(fā)部（this 指向 department）