JavaScript 中的原型与类：揭开面向对象编程的面纱

天涯学馆
148 阅读19分钟

引言：开启 JavaScript 面向对象之旅

在 JavaScript 的奇妙世界中，面向对象编程（OOP）是一项核心技能，它赋予了我们管理复杂代码、提高代码复用性和可维护性的超能力。无论是构建一个简单的网页交互，还是开发一个大型的 Web 应用，面向对象编程都能让我们的代码更加优雅和高效。

在 JavaScript 的面向对象编程体系中，Prototype（原型）和 Class（类）是两个至关重要的概念，它们是实现对象创建、继承和行为定义的关键手段。Prototype 作为 JavaScript 的传统特性，早在 ES5 时代就已经存在，它基于原型链的机制，为对象的创建和继承提供了一种灵活而强大的方式 ，虽然其语法和概念相对复杂，但深入理解 Prototype 是掌握 JavaScript 面向对象编程的基石。

而 Class 则是 ES6 引入的 新特性，它为 JavaScript 带来了更加简洁、直观的面向对象语法，让熟悉传统面向对象语言（如 Java、C++）的开发者能够更加轻松地在 JavaScript 中进行面向对象编程。Class 本质上是基于 Prototype 实现的语法糖，它在保留 Prototype 强大功能的同时，大大提高了代码的可读性和可维护性。

那么，Prototype 和 Class 究竟有何异同？在实际编程中，我们该如何选择使用它们？接下来，就让我们一起深入探索 Prototype 和 Class 的世界，揭开它们神秘的面纱。

一、Prototype：JavaScript 的原型机制

（一）Prototype 的定义与概念

在 JavaScript 中，Prototype（原型）是一个核心概念，它与对象的创建和继承密切相关。简单来说，每个函数都有一个prototype属性，这个属性指向一个对象，我们称之为原型对象。原型对象就像是一个模板，它存储了一些属性和方法，当我们使用构造函数创建新对象时，新对象会继承原型对象上的这些属性和方法 。

例如，当我们定义一个构造函数Person：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

这里的Person函数有一个prototype属性，它指向一个空对象（默认情况下）。这个空对象就是Person构造函数的原型对象，所有通过new Person()创建的实例，都可以访问到这个原型对象上的属性和方法。

原型在 JavaScript 面向对象编程中处于核心地位，它是实现对象继承和属性共享的基础机制。通过原型，我们可以避免在每个对象实例中重复定义相同的属性和方法，从而节省内存空间，提高代码的可维护性和复用性。

（二）Prototype 的工作原理

  1. 构造函数与实例创建：在 JavaScript 中，使用new关键字调用构造函数可以创建一个新的对象实例。当我们执行new Person()时，会发生以下几个步骤：

  • 首先，创建一个新的空对象。

  • 然后，这个新对象的内部属性[[Prototype]]（在大多数浏览器中可以通过__proto__访问）会被赋值为构造函数的prototype属性所指向的对象。

  • 接着，构造函数内部的this会指向这个新对象，并执行构造函数中的代码，为新对象添加属性和方法。

  • 最后，如果构造函数没有显式返回一个对象，则返回这个新创建的对象。

例如：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

let person = new Person('Alice', 25);
console.log(person.__proto__ === Person.prototype); // true

在这个例子中，person是Person构造函数的一个实例，person.__proto__指向Person.prototype，这表明person实例可以访问Person.prototype上的属性和方法。

  1. 原型链机制：原型链是 JavaScript 实现继承的关键机制。当我们访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。

例如：

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

Animal.prototype.speak = function() {
    console.log(this.name +'makes a sound.');
};

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 +'barks.');
};

let myDog = new Dog('Buddy', 'Golden Retriever');
myDog.bark(); // Buddy barks.
myDog.speak(); // Buddy makes a sound.

在这个例子中，Dog构造函数继承自Animal构造函数。myDog是Dog的实例，当我们调用myDog.bark()时，由于myDog本身没有定义bark方法，JavaScript 引擎会沿着myDog的原型链查找，在Dog.prototype中找到了bark方法并执行。当调用myDog.speak()时，myDog本身也没有定义speak方法，继续沿着原型链查找，在Animal.prototype中找到了speak方法并执行。

（三）Prototype 示例代码展示

下面通过一个完整的示例来展示 Prototype 的用法：

// 定义构造函数
function Circle(radius) {
    this.radius = radius;
}

// 在原型上添加方法
Circle.prototype.getArea = function() {
    return Math.PI * this.radius * this.radius;
};

Circle.prototype.getCircumference = function() {
    return 2 * Math.PI * this.radius;
};

// 创建实例
let circle1 = new Circle(5);
let circle2 = new Circle(10);

// 调用原型上的方法
console.log(circle1.getArea()); // 78.53981633974483
console.log(circle1.getCircumference()); // 31.41592653589793
console.log(circle2.getArea()); // 314.1592653589793
console.log(circle2.getCircumference()); // 62.83185307179586

在这个例子中，我们定义了一个Circle构造函数，用于创建圆形对象。然后在Circle.prototype上添加了getArea和getCircumference方法，这些方法可以计算圆形的面积和周长。通过new Circle()创建了两个圆形实例circle1和circle2，它们都可以调用原型上的方法，而不需要在每个实例中重复定义这些方法。

（四）Prototype 的优点与缺点

  1. 优点：

  • 灵活性高：Prototype 模式允许我们在运行时动态地为对象添加、修改和删除属性与方法。这使得代码更加灵活，能够适应各种变化的需求。例如，我们可以在程序运行过程中，根据不同的条件为对象添加不同的功能。

  • 节省内存：由于多个对象实例可以共享原型对象上的属性和方法，而不是每个实例都拥有自己的副本，因此可以节省内存空间。特别是在创建大量相似对象时，这种优势更加明显。

  • 语法简单轻量：相比于一些复杂的面向对象编程模式，Prototype 模式的语法相对简单，容易理解和掌握。对于初学者来说，更容易上手。

  1. 缺点：

  • 可维护性差：随着代码规模的增大和逻辑的复杂化，Prototype 模式可能会导致代码的可维护性变差。因为属性和方法的定义分散在构造函数和原型对象中，可能会增加查找和修改代码的难度。例如，当我们需要修改某个方法的逻辑时，可能需要在多个地方查找和修改代码。

  • 不直观：Prototype 模式的继承机制相对比较隐晦，不像一些基于类的编程语言那样直观。对于不熟悉 Prototype 模式的开发者来说，理解和调试代码可能会有一定的困难。例如，在查找属性和方法时，需要了解原型链的查找规则，否则可能会出现意想不到的结果。

二、Class：ES6 带来的语法糖

（一）Class 的定义与引入背景

在 ES6 之前，JavaScript 主要通过构造函数和原型链来实现面向对象编程，虽然这种方式功能强大，但语法相对复杂，对于初学者来说理解和使用起来有一定难度。为了让 JavaScript 的面向对象编程更加直观和简洁，ES6 引入了class关键字 。

class关键字为 JavaScript 开发者提供了一种更加接近传统面向对象语言（如 Java、C++）的语法糖，它使得对象的创建和继承操作更加符合人们的思维习惯。通过class，我们可以将相关的属性和方法封装在一个类中，然后通过实例化这个类来创建对象。需要注意的是，class本质上还是基于原型和构造函数实现的，它并没有引入新的面向对象继承模型，只是对原有的原型继承机制进行了封装，使其语法更加简洁、易读。

（二）Class 的工作原理

  1. 类的定义与构造函数：在 JavaScript 中，使用class关键字来定义一个类。类中可以包含一个特殊的方法constructor()，它是类的构造函数，用于初始化类的实例。当我们使用new关键字创建类的实例时，constructor()方法会被自动调用。例如：
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

在这个例子中，Person是一个类，constructor是它的构造函数，接受name和age两个参数，并将它们赋值给实例的属性。

  1. 实例化与属性方法继承：通过new关键字可以创建类的实例，实例会继承类中定义的所有属性和方法。例如：
let person = new Person('Bob', 30);
console.log(person.name); // Bob
console.log(person.age); // 30

这里创建了Person类的一个实例person，并可以访问其属性name和age。类中还可以定义其他方法，这些方法也会被实例继承。例如：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

let person = new Person('Bob', 30);
person.sayHello(); // Hello, my name is Bob and I'm 30 years old.

在这个例子中，sayHello方法定义在Person类中，person实例可以调用这个方法。

（三）Class 示例代码展示

下面通过一个完整的示例来展示Class的用法：

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    bark() {
        console.log(`${this.name} barks.`);
    }
}

let myDog = new Dog('Buddy', 'Golden Retriever');
myDog.bark(); // Buddy barks.
myDog.speak(); // Buddy makes a sound.

在这个示例中，首先定义了一个Animal类，它有一个constructor构造函数和一个speak方法。然后定义了一个Dog类，它继承自Animal类，通过super关键字调用父类的构造函数来初始化继承自父类的属性，并添加了自己的属性breed和方法bark。最后创建了Dog类的实例myDog，并调用了它的bark和speak方法。

（四）Class 的优点与缺点

  1. 优点：

  • 语法直观：Class语法更加接近传统面向对象语言的语法，使得代码的结构更加清晰、易读。对于熟悉其他面向对象语言的开发者来说，更容易上手和理解。例如，在定义类和方法时，使用class和function关键字，使得代码的语义更加明确。

  • 易于维护：将相关的属性和方法封装在一个类中，提高了代码的可维护性和可扩展性。当需要修改或添加功能时，可以直接在类中进行操作，而不会影响到其他部分的代码。例如，在一个大型项目中，如果需要修改某个类的功能，只需要在该类的定义中进行修改，而不需要在整个项目中查找和修改相关的代码。

  • 支持静态方法：Class可以定义静态方法，这些方法属于类本身，而不是类的实例。静态方法在一些工具类或全局配置类中非常有用，可以方便地提供一些通用的功能。例如，在一个数学工具类中，可以定义一些静态方法来进行数学计算，如Math.sqrt()等。

  • 清晰的继承机制：通过extends关键字实现继承，使得继承关系更加清晰明了。子类可以继承父类的属性和方法，并可以根据需要进行扩展和重写。这种继承机制使得代码的复用性大大提高，减少了重复代码的编写。例如，在一个图形绘制的项目中，可以定义一个Shape类作为父类，然后通过继承Shape类来创建Circle类和Rectangle类，它们可以继承Shape类的一些通用属性和方法，如颜色、位置等，并根据自身的特点实现不同的绘制方法。

  1. 缺点：

  • 灵活性较低：相比于Prototype模式，Class的灵活性相对较低。Class的定义和使用相对固定，对于一些需要在运行时动态修改类的结构和行为的场景，Class可能不太适用。例如，在一些需要动态添加方法或属性的场景中，使用Prototype模式可以更加方便地实现，而使用Class则需要通过一些较为复杂的方式来实现。

  • 对运行时操作有限制：Class的声明不会被提升，必须在使用之前先声明。这就要求开发者在编写代码时要注意类的定义顺序，否则可能会导致错误。例如，如果在一个文件中先使用了一个类，然后再定义这个类，就会出现错误。

  • 性能影响：虽然Class的性能影响通常可以忽略不计，但由于它是基于原型实现的语法糖，在某些极端情况下，可能会比直接使用原型和构造函数的性能略低。例如，在创建大量对象时，由于Class的内部实现机制，可能会产生一些额外的开销。

三、Prototype 与 Class 的深度对比

（一）主要区别梳理

  1. 语法形式：Prototype 基于构造函数和原型对象来实现面向对象编程，语法相对灵活但较为繁琐。例如定义一个构造函数和在原型上添加方法：
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name +'makes a sound.');
};

而 Class 使用class关键字来定义类，语法更加简洁直观，类似于传统面向对象语言的语法：

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}
  1. 实现原理：Prototype 是 JavaScript 基于原型链的核心机制，对象通过原型链来继承属性和方法。当创建一个对象实例时，它的__proto__属性指向构造函数的prototype对象，形成原型链。例如：
function Person() {}
let person = new Person();
console.log(person.__proto__ === Person.prototype); // true

Class 本质上是基于 Prototype 实现的语法糖，它在内部仍然使用原型链来实现继承，但在语法上进行了封装，使得继承关系更加清晰。例如：

class Person {}
let person = new Person();
console.log(person.__proto__ === Person.prototype); // true
  1. 运行时操作：Prototype 模式下，可以在运行时非常灵活地操作原型对象，动态地添加、修改和删除属性与方法。例如：
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log('Hello, my name is'+ this.name);
};
// 运行时添加新方法
Person.prototype.greet = function() {
    console.log('Greetings,'+ this.name);
};
let person = new Person('Alice');
person.sayHello();
person.greet();

而 Class 模式下，虽然也可以在运行时操作实例的属性和方法，但对于类本身的结构修改相对受限。例如，在类定义之后，很难直接在类的原型上添加新的方法，而需要通过一些特殊的方式来实现。

  1. 继承方式：Prototype 模式下实现继承需要手动设置原型链和调用父构造函数。例如：
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name +'makes a sound.');
};
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 +'barks.');
};

Class 模式下使用extends关键字来实现继承，通过super关键字来调用父类的构造函数和方法，继承关系更加清晰和简洁。例如：

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}
class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    bark() {
        console.log(this.name +'barks.');
    }
}

（二）实际应用场景对比

  1. 情景一：简单继承：
  • Prototype 模式：
function Animal() {
    this.species = 'animal';
}
Animal.prototype.eat = function() {
    console.log('Eating...');
};
function Dog() {
    Animal.call(this);
    this.breed = 'dog';
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
let dog = new Dog();
dog.eat();
  • Class 模式：
class Animal {
    constructor() {
        this.species = 'animal';
    }
    eat() {
        console.log('Eating...');
    }
}
class Dog extends Animal {
    constructor() {
        super();
        this.breed = 'dog';
    }
}
let dog = new Dog();
dog.eat();

在这个简单继承的情景中，Prototype 模式需要手动设置原型链和调用父构造函数，代码相对复杂。而 Class 模式使用extends和super关键字，使得继承关系一目了然，代码更加简洁易读。

  1. 情景二：动态扩展属性：
  • Prototype 模式：
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log('Hello,'+ this.name);
};
// 运行时动态扩展属性
Person.prototype.greeting = function() {
    console.log('Greetings,'+ this.name);
};
let person = new Person('Bob');
person.sayHello();
person.greeting();
  • Class 模式：
class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log('Hello,'+ this.name);
    }
}
// 运行时动态扩展属性（通过原型）
Person.prototype.greeting = function() {
    console.log('Greetings,'+ this.name);
};
let person = new Person('Bob');
person.sayHello();
person.greeting();

在动态扩展属性方面，Prototype 模式更加自然和灵活，直接在原型上添加属性即可。Class 模式虽然也可以通过原型来动态扩展属性，但这种方式相对不太符合 Class 的语法风格，通常建议在类定义时就明确所有的属性和方法。

  1. 情景三：继承链：
  • Prototype 模式：
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name +'makes a sound.');
};
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
function Husky(name, color) {
    Dog.call(this, name, 'Husky');
    this.color = color;
}
Husky.prototype = Object.create(Dog.prototype);
Husky.prototype.constructor = Husky;
let husky = new Husky('Max', 'Grey');
husky.speak();
  • Class 模式：
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}
class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}
class Husky extends Dog {
    constructor(name, color) {
        super(name, 'Husky');
        this.color = color;
    }
}
let husky = new Husky('Max', 'Grey');
husky.speak();

在复杂继承链的场景下，Prototype 模式的代码变得冗长且难以维护，需要手动处理多层原型链的设置和构造函数的调用。而 Class 模式通过extends和super关键字，清晰地表达了继承关系，使得代码结构更加清晰，易于理解和维护。

（三）性能对比分析

  1. 内存占用：在内存占用方面，Prototype 和 Class 在底层实现上都依赖于 JavaScript 引擎的内部机制，两者的差异不大。Prototype 模式下，多个对象实例共享原型对象上的属性和方法，减少了内存的重复占用。Class 模式同样基于原型链实现，在内存管理上与 Prototype 模式类似。然而，如果在 Class 模式下频繁地进行不必要的继承和实例化操作，可能会因为额外的语法开销和内部处理机制，导致相对较高的内存占用。

  2. 执行效率：在执行效率上，一般情况下 Prototype 和 Class 的性能差异可以忽略不计。但在某些极端情况下，例如创建大量对象实例时，Prototype 模式可能会因为其直接操作原型链的特性，而具有略微的性能优势。因为它避免了 Class 模式中一些语法解析和内部转换的开销。然而，现代 JavaScript 引擎都对 Class 进行了高度优化，使得这种性能差异在实际应用中很难被察觉。此外，如果在 Class 中使用了大量的装饰器、静态方法等高级特性，可能会因为额外的计算和处理，导致执行效率略有下降。

四、如何选择：Prototype 还是 Class？

在实际的 JavaScript 开发中，选择使用 Prototype 还是 Class，需要综合考虑多方面的因素。下面我们从项目需求、代码维护性、团队技术栈等角度来探讨在不同场景下的选择建议。

（一）根据项目需求选择

  1. 需求灵活多变：如果项目需求可能会在开发过程中频繁变动，需要在运行时动态地为对象添加、修改或删除属性和方法，那么 Prototype 模式可能更适合。例如，在一个快速迭代的小型项目中，可能需要根据用户的实时操作或系统的运行状态来动态调整对象的行为，Prototype 模式的灵活性可以很好地满足这种需求。

  2. 需求明确稳定：当项目需求明确且相对稳定，更注重代码的可读性和可维护性时，Class 模式是更好的选择。例如，在一个大型企业级应用中，代码结构的清晰和稳定至关重要，Class 模式的直观语法和清晰的继承机制可以使代码更易于理解和维护，减少后期的维护成本。

（二）从代码维护性角度考虑

  1. 代码规模较小：对于小型项目或代码片段，Prototype 模式的简单语法和轻量级特性可以快速实现功能，并且由于代码量较少，维护起来也相对容易。例如，在一个简单的网页交互脚本中，使用 Prototype 模式可以快速定义对象和方法，实现所需的交互效果。

  2. 代码规模较大：随着代码规模的增大，Class 模式的优势就更加明显。将相关的属性和方法封装在类中，通过清晰的继承关系来组织代码，使得代码的结构更加清晰，易于维护和扩展。在一个大型的 Web 应用中，使用 Class 模式可以将不同的功能模块封装成类，通过继承和组合来构建复杂的业务逻辑，提高代码的可维护性。

（三）结合团队技术栈

  1. 团队熟悉传统面向对象语言：如果团队成员大多熟悉传统面向对象语言（如 Java、C++），那么使用 Class 模式可以让他们更快地适应 JavaScript 的面向对象编程，减少学习成本。因为 Class 模式的语法与传统面向对象语言相似，团队成员可以利用已有的知识和经验来进行开发。

  2. 团队对 JavaScript 原型机制有深入理解：如果团队成员对 JavaScript 的原型机制有深入的理解和丰富的经验，并且项目对灵活性要求较高，那么可以考虑使用 Prototype 模式。这样可以充分发挥 Prototype 模式的优势，实现高效的开发。

五、总结

Prototype 和 Class 作为 JavaScript 面向对象编程的重要组成部分，各自具有独特的特点和优势。Prototype 作为 JavaScript 的传统特性，以其灵活的原型链机制，赋予了开发者在运行时动态操作对象的能力，为代码的灵活性和扩展性提供了强大支持。而 Class 作为 ES6 引入的新特性，以其简洁直观的语法，让 JavaScript 的面向对象编程更加符合传统面向对象语言的习惯，大大提高了代码的可读性和可维护性。

在实际应用中，我们应根据项目的具体需求、代码的规模和维护难度以及团队的技术栈等因素，综合考虑选择使用 Prototype 还是 Class。对于需求灵活多变、对运行时动态操作要求较高的场景，Prototype 模式可能更为合适；而对于需求明确稳定、注重代码结构和维护性的项目，Class 模式则是更好的选择。

随着 JavaScript 语言的不断发展和演进，未来的面向对象编程将更加注重语法的简洁性、功能的强大性以及性能的优化。我们可以期待更多新的特性和语法糖的出现，进一步提升 JavaScript 面向对象编程的体验和效率。同时，随着前端技术的不断发展，如 React、Vue 等框架的广泛应用，对 JavaScript 面向对象编程的理解和掌握也将变得更加重要。无论是 Prototype 还是 Class，它们都是我们在 JavaScript 编程世界中探索和创新的有力工具，让我们能够更加高效地构建出高质量、可维护的应用程序。

avatar
文章
阅读
粉丝