JavaScript原型继承机制：深入理解F.prototype-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00759/article/details/148361611

JavaScript原型继承机制：深入理解F.prototype

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

前言

在JavaScript中，原型继承是其核心特性之一。理解F.prototype的工作原理对于掌握JavaScript面向对象编程至关重要。本文将深入剖析构造函数原型机制，帮助开发者构建更清晰的JavaScript对象模型认知。

构造函数与原型基础

当我们使用构造函数创建对象时，如new F()，JavaScript引擎会执行一个关键操作：将新对象的内部[[Prototype]]属性设置为F.prototype所引用的对象。

function Animal(name) {
  this.name = name;
}

// 设置构造函数的原型
Animal.prototype = {
  eats: true
};

let dog = new Animal('Buddy');
console.log(dog.eats); // true

这里有几个关键点需要注意：

F.prototype是构造函数的一个普通属性，而非对象本身的[[Prototype]]
该属性仅在new F()调用时发挥作用
修改F.prototype不会影响已创建的对象

默认原型与constructor属性

每个函数在创建时都会自动获得一个prototype属性，其默认值为：

function F() {}
// 默认原型
F.prototype = { constructor: F };

这种设计形成了一个有趣的循环引用：

构造函数F拥有prototype属性
该prototype对象又通过constructor属性指回构造函数

function Rabbit() {}

let rabbit = new Rabbit();
console.log(rabbit.constructor === Rabbit); // true

这种机制在实际开发中非常有用，例如：

function Car(model) {
  this.model = model;
}

let bmw = new Car('X5');
let mercedes = new bmw.constructor('S-Class');

原型重写的注意事项

当我们需要扩展原型时，常见的错误做法是完全重写原型对象：

function Cat() {}
Cat.prototype = {
  purrs: true
  // 丢失了constructor属性
};

let garfield = new Cat();
console.log(garfield.constructor === Cat); // false

更安全的做法是：

方案一：逐步添加属性

function Cat() {}
Cat.prototype.purrs = true;
// 保留默认constructor

方案二：手动恢复constructor

Cat.prototype = {
  purrs: true,
  constructor: Cat // 显式设置
};

原型链工作机制

理解原型链需要区分几个关键概念：

__proto__（现已标准化为Object.getPrototypeOf）：对象实际的原型链引用
prototype：构造函数的特殊属性，用于设置新对象的原型
constructor：原型对象指向构造函数的引用

function Person() {}
let john = new Person();

// 原型关系
console.log(Object.getPrototypeOf(john) === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

实际应用建议

保持constructor完整性：在修改原型时始终维护constructor的正确指向
避免过度重写：优先采用原型扩展而非完全替换
理解时序影响：原型修改只影响之后创建的对象
类型检查替代方案：虽然可以使用constructor进行类型判断，但instanceof通常更可靠

function Vehicle() {}
function Car() {}

// 建立原型链
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car; // 修复constructor

let tesla = new Car();
console.log(tesla instanceof Vehicle); // true
console.log(tesla.constructor === Car); // true