搞懂构造函数与原型，才算真正入门 JavaScript 面向对象-程序员充电站

本文将带你从构造函数与原型这两个核心概念入手，拆解它们的设计初衷与协作逻辑，从而理解 JavaScript 独特的编程思想。

为什么需要构造函数？

在 JavaScript 中，当我们需要创建多个具有相同属性和方法的对象时，直接使用对象字面量会产生大量重复代码。
构造函数正是为了解决这个问题而生，它让对象的创建更具规范性和可维护性。

1. 构造函数的作用

批量创建对象：通过一个模板快速生成多个结构相似的实例。
初始化实例：在创建对象时，就为其赋予初始的属性和行为。
标识类型：通过 instanceof 可以判断对象的构造函数，从而明确其 “类型”。

2. 基础示例

// 定义构造函数functionPerson(name,age){this.name=name;this.age=age;this.sayHello=function(){console.log(`你好，我是${this.name}，今年${this.age}岁`);};}// 创建实例constp1=newPerson("张三",22);constp2=newPerson("李四",25);p1.sayHello();// 你好，我是张三，今年22岁p2.sayHello();// 你好，我是李四，今年25岁// 验证类型console.log(p1instanceofPerson);// true

冗余问题

每个实例都会单独创建一个 sayHello 方法。

这不仅浪费内存，也不符合代码复用的思想。

console.log(p1.sayHello===p2.sayHello);// false// 说明每个实例的sayHello都是一个新的函数对象

如果创建 1000 个 Person 实例，就会生成 1000 个完全相同的 sayHello 函数，这在性能和内存上都是极大的浪费。

原型（共享与复用的关键）

为了解决方法冗余的问题，JavaScript 引入了原型（Prototype）机制。
每个函数都有一个 prototype 属性，它指向一个对象，我们称之为原型对象。

原型的特性

共享机制：所有通过该构造函数创建的实例，都会共享原型对象上的属性和方法。
查找链：当访问实例的一个属性或方法时，如果实例本身没有，就会去原型对象上查找。
动态更新：对原型对象的修改会立即反映到所有现有实例上。

优化后的代码

functionPerson(name,age){this.name=name;this.age=age;}// 将方法定义在原型上Person.prototype.sayHello=function(){console.log(`你好，我是${this.name}，今年${this.age}岁`);};// 新增共享属性Person.prototype.species="人类";constp1=newPerson("张三",22);constp2=newPerson("李四",25);console.log(p1.sayHello===p2.sayHello);// trueconsole.log(p1.species);// 人类console.log(p2.species);// 人类

构造函数 + 原型

在 ES6 之前，JavaScript 并没有真正的 class 关键字。

它正是通过构造函数 + 原型的组合，模拟出了面向对象中 “类” 的效果。

ES6 Class 的本质

ES6 引入的 class 语法，其实只是构造函数 + 原型的语法糖。

它让代码更符合传统面向对象的写法，但底层逻辑并未改变。

// ES6 Class 写法classPerson{constructor(name,age){this.name=name;this.age=age;}// 实例方法，会被挂载到原型上sayHello(){console.log(`你好，我是${this.name}，今年${this.age}岁`);}// 静态方法，不会被挂载到原型上staticcreate(name,age){returnnewPerson(name,age);}}// 底层依然是构造函数 + 原型console.log(typeofPerson);// functionconsole.log(Person.prototype.sayHello);// [Function: sayHello]// 使用静态方法创建实例constp3=Person.create("王五",30);p3.sayHello();// 你好，我是王五，今年30岁

原型链与继承

原型的作用不止于方法复用，它还是 JavaScript 实现继承的基础。

通过修改构造函数的原型指向另一个类型的实例，就能让该类型的实例继承另一个类型的属性和方法，这就是原型链继承。

原型链继承示例

// 父类构造函数functionAnimal(name){this.name=name;}Animal.prototype.eat=function(){console.log(`${this.name}正在吃东西`);};// 子类构造函数functionDog(name,breed){Animal.call(this,name);// 继承父类的属性this.breed=breed;}// 继承父类的方法Dog.prototype=Object.create(Animal.prototype);Dog.prototype.constructor=Dog;// 修复constructor指向// 子类的方法Dog.prototype.bark=function(){console.log(`${this.name}正在汪汪叫`);};constmyDog=newDog("旺财","中华田园犬");myDog.eat();// 旺财正在吃东西myDog.bark();// 旺财正在汪汪叫