JavaScript 原型

小蜜蜂dry2025-10-28 17:56

这个图描述了构造函数，实例对象和原型三者之间的关系，是原型链的基础：

实例对象由构造函数new产生；
构造函数的原型属性与实例对象的原型对象均指向原型
原型对象中有一个属性constructor指向对应的构造函数

原型链的基础都是从上图延展的，下面再来一张完整的关系图：

一个简单的demo

javascript 复制代码

function funA(name) {
  this.name = name;
}
funA.prototype.sayHello = function () {
  return `${this.name} say hello`
}

const a1 = new funA()
// a1.__proto__ === funA.prototype
// funA.prototype.constructor === funA

需要注意的点：

Function.prototype === Function.__proto__ // true
只有 Function.prototype 原型是一个 function；其它函数的原型都是 object
所有构造函数的实例公用一个原型对象，它自身的方法、属性不共享
只有对象才有 __proto__属性
只有函数才有prototype属性
Function 和 Object 是 object & function，它们是js框架底层自己实现
理解几个关键概念：new、prototype、construtor、__proto__

原型链介绍

比较好的文章

掘金上找到一布局比较好的图片：

当访问对象的属性或方法时，JavaScript 会：

原型链的核心是通过 __proto__ 属性串联起来的，它是对象之间继承关系的 "连接线"
首先在对象自身查找
如果没有找到，沿着原型链向上查找
直到找到属性或到达原型链末端（null）

ES6 类语法（语法糖）

javascript 复制代码

class Vehicle {
    constructor(brand, year) {
        this.brand = brand;
        this.year = year;
    }
    
    getInfo() {
        return `${this.brand} (${this.year})`;
    }
    
    start() {
        console.log(`${this.brand} starting...`);
    }
}

const myCar = new Car("Honda", 2021, 4);

总结

构造函数 ：用于创建对象的函数，通过 new 关键字调用
prototype：函数特有的属性，包含应该被所有实例共享的方法
原型链 ：对象通过 __proto__ 链接形成的继承链
继承：通过设置子类 prototype 为父类实例来实现
ES6 class：语法糖，底层仍然基于原型继承

理解原型系统是掌握 JavaScript 面向对象编程的关键，它解释了 JavaScript 中对象如何共享方法和属性，以及继承是如何工作的。