企业官网建设流程全解析

前言

JavaScript 的原型机制是实现方法共享和继承的核心基础。其核心分为构造函数的prototype（原型对象）和实例的__proto__（对象原型），通过层级关联形成原型链。以下从四大模块系统梳理原型与原型链的完整机制。

一、原型对象 prototype

概念

prototype是构造函数的专属属性，本质是一个普通对象，用于存储可被所有实例共享的属性和方法。

核心作用

1. 共享方法，节省内存
   将公共方法定义在原型上，所有实例共享同一函数地址，避免重复创建。
2. 实现原型继承
   子类可通过绑定父类原型复用父类逻辑。

代码示例

function Star(name, age) { this.name = name; // 实例独有属性 this.age = age; } // 公共方法挂载到原型 Star.prototype.sing = function() { console.log(`${this.name}会唱歌`); }; const ldh = new Star('刘德华', 18); ldh.sing(); // 输出："刘德华会唱歌"

作用：

• 1. constructor

• 每一个函数的prototype对象，默认自带一个constructor属性，指向函数本身
  • 指向该原型的构造函数，（指向我的爸爸）

• 1.判断引用类型（对象，数组，自定义对象）

  const arr = [1,2,3]; const obj = {}; const date = new Date(); console.log(arr.constructor === Array); // true （是数组） console.log(obj.constructor === Object); // true （是对象） console.log(date.constructor === Date); // true （是日期对象）

  2.可修复原型链指向（继承/重写原型时必备）

  当 我们手动重写构造函数的原型对象时 ，constructor 会丢失，必须手动修复，否则会导致类型判断错误

  function Person() {} // 错误：直接覆盖原型，constructor 会指向 Object Person.prototype = { constructor: Person, // 手动修复指向 sayHi() { console.log("你好"); } }; const p = new Person(); console.log(p.constructor === Person); // false（错误！） console.log(p.constructor === Object); // true

注意点

• 构造函数和原型方法中的this均指向实例对象。
• 避免直接覆盖原型对象，否则需手动修复constructor指向

二、对象原型 __proto__

概念

所有实例对象通过__proto__属性关联其构造函数的原型对象（prototype），形成访问共享成员的通道。

• 原型 = 共享的方法仓库
• new = 造一个新对象，并把他连上原型
• __proto__ 指向原型的路线
• __proto__存在 → 所以对象能共享原型的属性 / 方法
• new每次都会造一个全新的空对象 ** → 所以两个new出来的对象不是同一个

核心验证

function Star() {} const ldh = new Star(); console.log(ldh.__proto__ === Star.prototype); // true console.log(ldh.__proto__.constructor === Star); // true

关键规则

1. 实例化后修改原型对已创建的实例无效（需遵循先改原型，后实例化）。
2. 特例：Object.create(null)创建的对象无__proto__。（是俩个杠）

记忆口诀

• 对象必有__proto__，指向构造函数原型。
• 原型必有constructor，回指构造函数本身。

三、原型继承

实现原理

子类原型指向父类实例，复用父类属性；手动修复constructor并扩展子类方法。

完整示例

// 1. 定义【父构造函数】Person（公共属性） function Person() { // 实例属性：所有继承 Person 的实例都会拥有这些属性 this.eye = 2; this.head = 1; } // ------------------------------ // 2. 定义【子构造函数】Woman // ------------------------------ function Woman() { // 子构造函数内部可以写自己的属性 } // 3. 【原型继承核心】 // 让 Woman 的原型 指向 Person 的实例 // 实现：属性继承 + 方法共享，节省内存 Woman.prototype = new Person(); // 4. 【关键修复】修正 constructor 指向 // 因为直接替换了 prototype，constructor 会变成 Person，必须手动指回自己的构造函数 Woman Woman.prototype.constructor = Woman; // 5. 给子构造函数 Woman 添加【独有原型方法】 Woman.prototype.bear = function () { console.log('生女宝宝'); }; // 6. 实例化 Woman const girl = new Woman(); console.log(girl, '女'); console.log(girl.__proto__); // 现在能正常看到 eye、head、bear 方法 console.log(Woman.prototype); // 与 girl.__proto__ 一致 // ------------------------------ // 7. 定义【子构造函数】Man（同理） // ------------------------------ function Man() { } // 原型继承 Person Man.prototype = new Person(); // 修复 constructor 指向 Man.prototype.constructor = Man; // 实例化 Man const man1 = new Man(); console.log(man1, '男');

注意点

• 避免直接在子类原型上修改父类引用类型属性（需深拷贝或重新赋值）。

四、原型链

定义

通过__proto__逐级向上查找形成的链式结构，终点为Object.prototype.__proto__（即null）。

查找规则

1. 优先查找实例自身属性。
2. 若无，沿__proto__向上查找至顶层原型。
3. 如果还么有就查找原型对象的原型（Object 的原型对象）
4. 依次类推一直找到Object 为止（null）
5. __proto__对象原型的意义就在于对象成员查找机制提供一个方向，或者说一条路线
6. 可以使用instanceof运算符用于检测构造函数的prototype 属性是否出现在某个实例对象的原型链上

• 记忆口诀

  1.只要是对象就有 __proto__,指向该对象的原型对象

  2.只要是原型对象，就有constructor指向构造函数

• 这个隐式属性指向它的原型

instanceof 原理

判断前者是不是等与后者

console.log(Object.prototype) console.log(Object.prototype.__proto__) //null console.log(Man1 instanceof Object) //true console.log(Array instanceof Object) //true 万物皆对象

总结

1. 原型对象：prototype共享方法，constructor标记来源。
2. 对象原型：__proto__关联实例与构造函数原型。
3. 原型继承：子类原型绑定父类实例，修复constructor。
4. 原型链：基于__proto__的层级查找机制。

通过理解这四大模块，可系统掌握 JavaScript 的原型设计思想。