【高频考点精讲】JavaScript中的原型模式：从对象创建到性能优化

最新推荐文章于 2025-11-26 15:59:01 发布

原创

最新推荐文章于 2025-11-26 15:59:01 发布 · 829 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #css #面试题 #react #vue

JavaScript中的原型模式：从对象创建到性能优化

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊JavaScript中那个让人又爱又恨的原型模式。这玩意儿就像JavaScript的DNA，搞懂了它，你就能看透这门语言的本质。

原型是个啥？

想象一下，你有个祖传秘方（比如老李家的红烧肉配方），你儿子想学做菜，不用从头发明，直接继承你的配方就行。在JS里，原型就是这个"祖传秘方"。

每个JavaScript对象都有个隐藏的[[Prototype]]属性（可以通过__proto__访问，但不推荐直接使用），它指向另一个对象——这就是原型。当你访问对象的属性时，如果对象本身没有，JS就会去原型上找，原型没有就去原型的原型上找，这就是原型链。

// 全栈老李示例：原型基础演示
function Person(name) {
   
   
  this.name = name;
}

// 在原型上添加方法
Person.prototype.sayHi = function() {
   
   
  console.log(`Hi, 我是${
     
     this.name}，来自全栈老李的示例`);
};

const person1 = new Person('张三');
person1.sayHi(); // 输出: Hi, 我是张三，来自全栈老李的示例

// 检查原型关系
console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

为什么需要原型？

你可能要问：为啥不直接把方法写在构造函数里？来，老李给你算笔账：

// 不推荐写法：方法写在构造函数内
function BadPerson(name) {
   
   
  this.name = name;
  this.sayHi = function() {
   
   
    console.log(`Hi, 我是${
     
     this.name}`);
  };
}

const bad1 = new BadPerson('李四');
const bad2