布魯斯前端JS面試題目 - JavaScript this 關鍵字深入解析

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

printThis(); // window 或 global

// 嚴格模式
function strictFunction() {
  'use strict';
  console.log(this);
}

strictFunction(); // undefined

const user = {
  name: 'Bruce',
  age: 30,
  greet() {
    console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old`);
  },
  profile: {
    title: 'Developer',
    showTitle() {
      console.log(`My title is ${this.title}`);
    }
  }
};

user.greet(); // "Hello, I'm Bruce and I'm 30 years old" (this 指向 user)
user.profile.showTitle(); // "My title is Developer" (this 指向 user.profile)

// 注意：隱含綁定可能丟失
const greetFn = user.greet;
greetFn(); // "Hello, I'm undefined and I'm undefined years old" (this 指向全域物件)

function introduce(hobby1, hobby2) {
  console.log(`I'm ${this.name}, I like ${hobby1} and ${hobby2}`);
}

const person = { name: 'Bruce' };

// call: 參數逐一傳入
introduce.call(person, 'coding', 'reading');
// "I'm Bruce, I like coding and reading"

// apply: 參數以陣列形式傳入
introduce.apply(person, ['coding', 'reading']);
// "I'm Bruce, I like coding and reading"

// bind: 返回一個新函式，不立即調用
const boundFn = introduce.bind(person, 'coding');
boundFn('reading'); // 可以稍後傳入剩餘參數
// "I'm Bruce, I like coding and reading"

function Person(name) {
  this.name = name;
  // this 指向新建立的物件
}

const bruce = new Person('Bruce');
console.log(bruce.name); // "Bruce"

// this 在構造函式中指向新建立的物件實例
// 即使在全域作用域或嚴格模式下，new 綁定也有效

const obj = {
  name: 'Bruce',
  // 傳統函式 - this 依呼叫方式決定
  regularMethod() {
    console.log(this.name);
  },
  // 箭頭函式 - this 鎖定在定義時的環境
  arrowMethod: () => {
    console.log(this.name);
  },
  // 常見用法: 在傳統方法內使用箭頭函式
  delayedGreeting() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // this 仍指向 obj
    }, 1000);
  }
};

obj.regularMethod(); // "Bruce" (this 指向 obj)
obj.arrowMethod();   // undefined (this 指向定義時的全域環境)
obj.delayedGreeting(); // 1秒後輸出 "Hello, Bruce"

// 注意：箭頭函式的 this 不受 call/apply/bind 影響
obj.arrowMethod.call({name: 'Not Bruce'}); // 仍然是 undefined

class Counter {
  constructor() {
    this.count = 0;
    // 將方法的 this 綁定到實例
    this.increment = this.increment.bind(this);
  }
  
  increment() {
    this.count++;
  }
  
  getCount() {
    return this.count;
  }
}

const counter = new Counter();
const incrementFn = counter.increment;
incrementFn(); // 即使脫離物件調用也能正常工作
console.log(counter.getCount()); // 1

class Counter {
  constructor() {
    this.count = 0;
  }
  
  // 使用箭頭函式自動捕獲外層 this
  increment = () => {
    this.count++;
  }
  
  getCount() {
    return this.count;
  }
}

const counter = new Counter();
const incrementFn = counter.increment;
incrementFn(); // 箭頭函式保持 this 指向 counter 實例
console.log(counter.getCount()); // 1

function UserProfile() {
  this.name = 'Bruce';
  this.friends = ['Alice', 'Bob'];
  
  // 使用變數保存 this
  const self = this;
  
  this.showFriends = function() {
    this.friends.forEach(function(friend) {
      console.log(self.name + ' is friends with ' + friend);
      // 使用 self 而非 this，因為這裡的 this 在非嚴格模式下指向全域
    });
  };
}

const profile = new UserProfile();
profile.showFriends();
// "Bruce is friends with Alice"
// "Bruce is friends with Bob"