布鲁斯前端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