登录
深入理解JavaScript原型机制：从Java到JS的面向对象编程之路
2025年6月9日 12:55
前言
作为一名前端开发者，相信你一定遇到过这样的困惑：为什么JavaScript没有传统的类概念，却能实现面向对象编程？为什么要用function来模拟类？__proto__和prototype到底有什么区别？
今天我们就来深入探讨JavaScript独特的原型机制，对比传统面向对象语言（如Java），让你彻底理解JS中的面向对象编程。
传统面向对象 vs JavaScript面向对象
传统OOP：以Java为例
让我们先看一个简单的Java类定义：
// 定义Puppy类
public class Puppy{
// 成员变量
int puppyAge;
// 构造方法
public Puppy(int age){ // 注意：这里应该声明参数类型
puppyAge = age;
}
// 公有方法
public void say(){
System.out.println("汪汪汪"); // 小狗应该汪汪叫，不是喵喵叫哦
}
}
在Java中，我们有明确的类概念，通过class关键字定义类，类中包含属性和方法，这就是经典的面向对象编程三大特性：封装、继承、多态。
JavaScript的困境：没有class的时代
在ES6之前，JavaScript并没有class关键字，但作为企业级开发语言，JS必须支持面向对象编程。那么问题来了：没有类，如何实现面向对象？
最初的尝试可能是这样的：
// 对象字面量方式
var Person = {
name: '胡一菲',
hobbies: ['音乐','电影','钓鱼']
}
var pll = {
name: '黄少天',
hobbies: ['音乐','篮球','游戏']
}
这种方式的问题显而易见：创建大量相似对象时非常麻烦，代码重复严重。
JavaScript的解决方案：构造函数 + 原型
构造函数：让function身兼两职
JavaScript采用了一种巧妙的设计：让函数既是函数，又是类。
// 首字母大写的约定：1.类的概念 2.构造函数
function Person(name, age){
// this 指向当前实例化对象
this.name = name
this.age = age
}
// 函数对象的原型对象
Person.prototype = {
sayHello: function(){
console.log(`Hello, my name is ${this.name}`)
}
}
// new 一下，实例化对象
let hu = new Person('黄少天', 20)
hu.sayHello() // Hello, my name is 黄少天
关键概念解析
-
构造函数：首字母大写的函数，用
new操作符调用 -
实例对象：通过
new创建的对象 -
原型对象：每个函数都有
prototype属性，指向原型对象 -
原型链：通过
__proto__属性连接的对象链
深入理解原型机制
__proto__ vs prototype
这是最容易混淆的概念：
function Person(name, age){
this.name = name
this.age = age
}
Person.prototype.sayHello = function(){
console.log(`Hello, my name is ${this.name}`)
}
var hu = new Person('黄少天', 20)
// 关键理解：
console.log(hu.__proto__ === Person.prototype) // true
console.log(Person.prototype.constructor === Person) // true
重点理解：
-
__proto__：每个对象都有的私有属性，指向其构造函数的原型对象 -
prototype：每个函数都有的属性，值是该构造函数的原型对象
原型链的神奇之处
JavaScript的原型机制最强大的地方在于：对象和构造函数之间没有血缘关系！
var hu = new Person('黄少天', 20)
console.log(hu.__proto__) // Person.prototype
// 我们可以动态改变原型指向！
var a = {
name: '孔子',
eee: '鹅鹅鹅',
country: '中国'
}
hu.__proto__ = a
console.log(hu.country) // 中国
console.log(hu.eee) // 鹅鹅鹅
这种设计让JavaScript的面向对象更加灵活：
- 对象的原型可以动态改变
- 不依赖类的继承关系
- 通过原型链实现属性和方法的查找
new操作符的工作原理
理解new的执行过程对掌握原型机制至关重要：
new的执行步骤：
1. new -> 创建空对象{}
2. 执行constructor构造函数
3. this指向新创建的对象
4. 构造函数执行完毕，返回对象
5. 设置__proto__指向constructor.prototype
6. 形成原型链，最终指向null
用代码表示就是：
// new Person('黄少天', 20) 的内部实现
function myNew(constructor, ...args) {
// 1. 创建空对象
let obj = {}
// 2. 设置原型链
obj.__proto__ = constructor.prototype
// 3. 执行构造函数
let result = constructor.apply(obj, args)
// 4. 返回对象
return result instanceof Object ? result : obj
}
原型链查找机制
当我们访问对象的属性时，JavaScript会按照原型链进行查找：
let hu = new Person('黄少天', 20)
// 访问hu.toString()的查找过程：
// 1. 在hu对象本身查找toString方法 -> 没找到
// 2. 在hu.__proto__（Person.prototype）中查找 -> 没找到
// 3. 在Person.prototype.__proto__（Object.prototype）中查找 -> 找到了！
// 4. 如果还没找到，继续向上直到null
console.log(hu.__proto__) // Person.prototype
console.log(hu.__proto__.__proto__) // Object.prototype
console.log(hu.toString()) // [object Object] - 来自Object.prototype
实际应用：原型继承
基于原型机制，我们可以实现继承：
// 父类
function Animal(name) {
this.name = name
}
Animal.prototype.eat = function() {
console.log(`${this.name} is eating`)
}
// 子类
function Dog(name, breed) {
Animal.call(this, name) // 调用父类构造函数
this.breed = breed
}
// 设置原型继承
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog
Dog.prototype.bark = function() {
console.log(`${this.name} is barking`)
}
let myDog = new Dog('旺财', '哈士奇')
myDog.eat() // 旺财 is eating - 继承自Animal
myDog.bark() // 旺财 is barking - Dog自己的方法
总结
JavaScript的原型机制虽然看起来复杂，但理解了核心概念后会发现它的强大之处：
核心要点
- JavaScript本没有类，用首字母大写的函数来表示类
- 构造函数身兼两职：既是函数又是类
-
原型链是灵魂：通过
__proto__连接对象，实现属性和方法的继承 - 动态性是优势：对象的原型可以动态改变，比传统继承更灵活
关键区别
- 传统OOP：类 -> 实例，关系固定
- JavaScript OOP：构造函数 -> 实例，通过原型链连接，关系动态
实用建议
- 理解
__proto__和prototype的区别 - 掌握原型链的查找机制
- 学会使用原型实现继承
- 在现代开发中，可以使用ES6的
class语法，但理解底层原型机制仍然重要
虽然ES6引入了class关键字，让JavaScript看起来更像传统面向对象语言，但底层仍然是基于原型的。理解原型机制不仅能帮你写出更好的代码，也能让你在面试中脱颖而出！
