// 函數(shù)定義時(shí)，this毫無(wú)意義
function sayHi() {
  console.log(this.name);
}

// 調(diào)用方式1：普通函數(shù)調(diào)用 → this指向window（瀏覽器）/global（Node）
const name = "全局";
sayHi(); // 輸出“全局”

// 調(diào)用方式2：對(duì)象方法調(diào)用 → this指向?qū)ο?
const obj = { name: "張三", sayHi };
obj.sayHi(); // 輸出“張三”

// 調(diào)用方式3：new調(diào)用 → this指向新實(shí)例
function Person(name) {
  this.name = name;
}
const p = new Person("李四");
console.log(p.name); // 輸出“李四”

const obj1 = { a: 1, foo: function() { console.log(this.a); } };
const obj2 = { a: 2 };
obj1.foo.call(obj2); // 輸出 2 → 顯式綁定覆蓋隱式

function foo(a) { this.a = a; }
const boundFoo = foo.bind({ a: 10 }); // 顯式綁定到 {a:10}
const instance = new boundFoo(20);    // new 綁定
console.log(instance.a); // 輸出 20 → new 覆蓋 bind

Function.prototype.bind = function (context) {
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);

  var fBound = function () {
    var bindArgs = Array.prototype.slice.call(arguments);
    // new創(chuàng)建的時(shí)候，this指向new出來(lái)的對(duì)象實(shí)例，這個(gè)實(shí)例通過(guò)new創(chuàng)建的，那么實(shí)例的constructor指向fBound
    return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));
  }
  // 修改返回函數(shù)的 prototype 為綁定函數(shù)的 prototype，實(shí)例就可以繼承綁定函數(shù)的原型中的值
  fBound.prototype = this.prototype;
  return fBound;
}

// 非嚴(yán)格模式
function normalCall() {
  console.log("非嚴(yán)格模式：", this); // window（瀏覽器）
}
normalCall();

// 嚴(yán)格模式
function strictCall() {
  "use strict";
  console.log("嚴(yán)格模式：", this); // undefined
}
strictCall();

// 坑點(diǎn)：函數(shù)內(nèi)嵌套函數(shù)，仍按普通調(diào)用處理
function outer() {
  console.log("outer this：", this); // window（非嚴(yán)格模式）
  function inner() {
    console.log("inner this：", this); // window（非嚴(yán)格模式）
  }
  inner(); // 普通調(diào)用，與outer的this無(wú)關(guān)
}
outer();

const user = {
  name: "張三",
  sayHi() {
    console.log("this指向：", this); // 指向user對(duì)象
    console.log("用戶名：", this.name); // 輸出“張三”
  },
  address: {
    city: "北京",
    getCity() {
      console.log("城市：", this.city); // 指向address對(duì)象，輸出“北京”
    }
  }
};

// 直接調(diào)用對(duì)象方法 → this指向?qū)ο?
user.sayHi(); 
user.address.getCity(); 

// 坑點(diǎn)1：方法賦值給變量后，變成普通調(diào)用
const sayHi = user.sayHi;
sayHi(); // 普通調(diào)用 → this指向window，name為undefined

// 坑點(diǎn)2：嵌套對(duì)象中，this指向直接調(diào)用的對(duì)象（非外層）
user.address.getCity.call(user); // 強(qiáng)制改變this為user，輸出undefined（user無(wú)city屬性）

// 函數(shù)定義在外部
function getUserName() {
  console.log(this.name);
}

// 掛載到不同對(duì)象調(diào)用
const obj1 = { name: "李四", getUserName };
const obj2 = { name: "王五", getUserName };

obj1.getUserName(); // 輸出“李四”（this指向obj1）
obj2.getUserName(); // 輸出“王五”（this指向obj2）

function Person(name, age) {
  // new調(diào)用時(shí)，this指向新創(chuàng)建的Person實(shí)例
  this.name = name;
  this.age = age;
  console.log("構(gòu)造函數(shù)this：", this); // Person { name: "...", age: ... }
}

// new調(diào)用 → this綁定到實(shí)例
const p1 = new Person("趙六", 25);
console.log(p1.name); // 輸出“趙六”

// 坑點(diǎn)：構(gòu)造函數(shù)返回對(duì)象會(huì)覆蓋this
function PersonWithReturn(name) {
  this.name = name;
  // 返回對(duì)象時(shí)，new創(chuàng)建的實(shí)例會(huì)被這個(gè)對(duì)象替代
  return { name: "錢七" };
}
const p2 = new PersonWithReturn("孫八");
console.log(p2.name); // 輸出“錢七”（this被覆蓋）

// 注意：返回基本類型（如number、string）不會(huì)覆蓋this
function PersonWithPrimitive(name) {
  this.name = name;
  return 123; // 基本類型，不影響this
}
const p3 = new PersonWithPrimitive("周九");
console.log(p3.name); // 輸出“周九”

function sayInfo(age, city) {
  console.log(`姓名：${this.name}，年齡：${age}，城市：${city}`);
}

const user = { name: "吳十" };

// apply調(diào)用 → 數(shù)組傳參，立即執(zhí)行
sayInfo.apply(user, [28, "上海"]); // 輸出“姓名：吳十，年齡：28，城市：上?！?

// call調(diào)用 → 逗號(hào)傳參，立即執(zhí)行
sayInfo.call(user, 28, "上海"); // 輸出同上

// bind調(diào)用 → 返回新函數(shù)，延遲執(zhí)行
const boundSayInfo = sayInfo.bind(user, 28);
boundSayInfo("上海"); // 輸出同上

// 坑點(diǎn)：bind是硬綁定，后續(xù)無(wú)法被apply/call修改
const newObj = { name: "鄭十一" };
boundSayInfo.call(newObj, "北京"); // 仍輸出“吳十”（this無(wú)法改變）

// 非嚴(yán)格模式：obj為null/undefined時(shí)，this綁定全局
sayInfo.call(null, 28, "廣州"); // 姓名：undefined（window.name為空）

// 嚴(yán)格模式：obj為null/undefined時(shí)，this綁定obj本身
function strictSayInfo() {
  "use strict";
  console.log(this);
}
strictSayInfo.call(null); // 輸出null
strictSayInfo.call(undefined); // 輸出undefined

// 場(chǎng)景1：箭頭函數(shù)作為對(duì)象方法 → this繼承外層（window）
const obj = {
  name: "王十二",
  sayHi: () => {
    console.log(this.name); // undefined（this指向window）
  }
};
obj.sayHi();

// 場(chǎng)景2：箭頭函數(shù)嵌套在對(duì)象方法中 → 繼承方法的this
const obj2 = {
  name: "李十三",
  outer() {
    const inner = () => {
      console.log(this.name); // 繼承outer的this，指向obj2，輸出“李十三”
    };
    inner();
  }
};
obj2.outer();

// 場(chǎng)景3：箭頭函數(shù)無(wú)法被apply/call改變this
const arrowFn = () => {
  console.log(this);
};
arrowFn.call({ name: "張十四" }); // 輸出window（非嚴(yán)格模式），無(wú)法改變

// 場(chǎng)景4：箭頭函數(shù)不能作為構(gòu)造函數(shù)
const ArrowPerson = () => {};
new ArrowPerson(); // 報(bào)錯(cuò)：ArrowPerson is not a constructor

const btn = document.createElement("button");
btn.textContent = "點(diǎn)擊我";
document.body.appendChild(btn);

// 普通函數(shù) → this指向btn
btn.addEventListener("click", function() {
  console.log(this); // <button>點(diǎn)擊我</button>
});

// 坑點(diǎn)：箭頭函數(shù) → this繼承外層（window）
btn.addEventListener("click", () => {
  console.log(this); // window（無(wú)法獲取btn）
});

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(this.name);
  }
}

const user = new User("劉十五");
user.sayHi(); // 輸出“劉十五”（this指向?qū)嵗?

// 坑點(diǎn)：方法賦值后調(diào)用 → 嚴(yán)格模式下this為undefined
const sayHi = user.sayHi;
sayHi(); // 報(bào)錯(cuò)：Cannot read properties of undefined (reading 'name')

// 解決方案：在constructor中綁定this
class UserWithBind {
  constructor(name) {
    this.name = name;
    // 綁定this到實(shí)例
    this.sayHi = this.sayHi.bind(this);
  }

  sayHi() {
    console.log(this.name);
  }
}
const user2 = new UserWithBind("陳十六");
const sayHi2 = user2.sayHi;
sayHi2(); // 輸出“陳十六”（this已綁定）

const obj = {
  name: "趙十七",
  sayHi() {
    console.log(this.name);
  }
};
const hi = obj.sayHi;
hi(); // undefined（this指向window）

const obj = {
  name: "孫十八",
  delaySayHi() {
    setTimeout(function() {
      console.log(this.name); // undefined（this指向window）
    }, 1000);
  }
};
obj.delaySayHi();

const obj = {
  prefix: "編號(hào)：",
  processArr(arr) {
    return arr.map(function(item) {
      return this.prefix + item; // undefined（this指向window）
    });
  }
};
obj.processArr([1, 2, 3]); // ["undefined1", "undefined2", "undefined3"]

class Button {
  constructor() {
    this.text = "點(diǎn)擊";
    this.btn = document.createElement("button");
    this.btn.textContent = this.text;
    this.btn.addEventListener("click", this.handleClick);
  }

  handleClick() {
    console.log(this.text); // undefined（this為undefined，嚴(yán)格模式）
  }
}
new Button();

const obj = {
  name: "周十九",
  sayHi: () => {
    console.log(this.name); // undefined（this指向window）
  }
};
obj.sayHi();

function Product(name) {
  this.name = name;
  // 錯(cuò)誤：返回對(duì)象覆蓋this
  return { name: "默認(rèn)商品" };
}
const phone = new Product("手機(jī)");
console.log(phone.name); // 輸出“默認(rèn)商品”

function fn() {
  console.log(this.name);
}
const obj1 = { name: "吳二十" };
const obj2 = { name: "鄭二十一" };

// 多次bind，只有第一次生效
const bound1 = fn.bind(obj1);
const bound2 = bound1.bind(obj2);
bound2(); // 輸出“吳二十”（obj2綁定無(wú)效）

// 外層非嚴(yán)格模式
function outer() {
  "use strict"; // 內(nèi)層嚴(yán)格模式
  function inner() {
    console.log(this); // undefined（嚴(yán)格模式）
  }
  inner();
}
outer();

function sayHi() {
  console.log(`Hi, ${this.name}`);
}

const userA = { name: "用戶A", sayHi };
const userB = { name: "用戶B", sayHi };

userA.sayHi(); // Hi, 用戶A
userB.sayHi(); // Hi, 用戶B