布魯斯前端JS面試題目 - JS的new、原型鏈與Class實作解析

// 建構函數
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 原型方法 - 所有實例共享一份
Person.prototype.introduce = function() {
  return `我是 ${this.name}，今年 ${this.age} 歲`;
};

// 模擬靜態方法
Person.createAnonymous = function () {
  return new Person('Anonymous', 0);
};

// 建立實例
const john = new Person('小明', 30);
console.log(john.introduce());   // "我是 小明，今年 30 歲"

// Class 語法（ES6+）
class Person {
  // 建構函式
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  // 原型方法（共享）
  introduce() {
    return `I'm ${this.name}, ${this.age} years old`;
  }
  
  // 靜態方法 - 直接掛在類別上，不需要實例化就能調用
  static createAnonymous() {
    return new Person('Anonymous', 0);
  }
}

// 直接使用 new 建立實例
const jane = new Person('Jane', 25);

// 靜態方法調用
const anonymous = Person.createAnonymous();

/* 
直接new vs靜態方法建立實例的差異：

1. 直接new：
   - 優點：直觀明確，完全控制參數
   - 缺點：重複邏輯無法封裝，每次都需要提供完整參數

2. 靜態方法：
   - 優點：封裝複雜建構邏輯，提供預設值，實現工廠模式
   - 優點：可實現單例模式或物件池等設計模式
   - 缺點：間接性可能降低程式碼可讀性

實務應用：
- 當物件建立邏輯複雜或需要重複使用特定配置時，靜態方法更合適
- 常見於React.createElement()、Array.from()等API設計
*/

// 原型鏈示例
function Animal() {}
Animal.prototype.eat = function() { return '吃東西...'; };

function Dog() {}
// 設置原型繼承
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;  // 修正 constructor
Dog.prototype.bark = function() { return '汪汪！'; };

const doggy = new Dog();
console.log(doggy.bark());  // "汪汪！" - 在 Dog.prototype 找到
console.log(doggy.eat());   // "吃東西..." - 在 Animal.prototype 找到

// 獲取原型
Object.getPrototypeOf(obj);  // 替代 obj.__proto__

// 設置原型
Object.setPrototypeOf(obj, prototype);  // 替代 obj.__proto__ = prototype

// 創建帶有指定原型的新物件
Object.create(prototype);  // 比 new 更直接

function Counter() {
  // 私有變數
  let count = 0;
  
  // 公開方法
  this.increment = function() {
    count++;
    return count;
  };
  
  this.decrement = function() {
    count--;
    return count;
  };
  
  this.getValue = function() {
    return count;
  };
}

const counter = new Counter();
console.log(counter.getValue());   // 0
counter.increment();
console.log(counter.getValue());   // 1
console.log(counter.count);        // undefined (無法直接訪問)

class BankAccount {
  #balance = 0;  // 私有屬性
  
  constructor(initialBalance) {
    if (initialBalance > 0) {
      this.#balance = initialBalance;
    }
  }
  
  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
      return true;
    }
    return false;
  }
  
  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
console.log(account.getBalance());  // 100
// console.log(account.#balance);   // SyntaxError: Private field