当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript面向对象三种实现方式详解

JavaScript面向对象三种实现方式详解

2025-12-02 15:55:49 0浏览收藏

哈喽！今天心血来潮给大家带来了《JavaScript面向对象三种实现方式解析》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript面向对象编程的三种实现方式

JavaScript面向对象编程主要通过原型链、构造函数和ES6的class语法来实现。它们各有特点，也适用于不同的场景。

原型链、构造函数、ES6 Class。

原型链是如何实现继承的？

原型链的核心在于每个JavaScript对象都有一个指向其原型对象的内部链接，这个原型对象又有自己的原型，以此类推，直到到达null。当试图访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或者到达原型链的末端。

举个例子，假设我们有一个Animal构造函数和一个Dog构造函数，我们想让Dog继承Animal的属性。我们可以这样做：

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

Animal.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};

function Dog(name, breed) {
  Animal.call(this, name); // 调用Animal构造函数，设置Dog的name属性
  this.breed = breed;
}

// 设置Dog的原型为Animal的实例，Dog就可以继承Animal原型上的方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复Dog的constructor指向

Dog.prototype.bark = function() {
  console.log("Woof!");
};

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayHello(); // 输出 "Hello, I'm Buddy"
myDog.bark();    // 输出 "Woof!"

在这个例子中，Dog.prototype = Object.create(Animal.prototype)是关键。它创建了一个新的对象，这个对象的原型是Animal.prototype，然后将Dog.prototype指向这个新对象。这样，Dog的实例就可以访问Animal原型上的sayHello方法。Animal.call(this, name)的作用是确保Dog的实例拥有Animal构造函数中定义的属性，例如name。

需要注意的是，原型链查找属性的过程是动态的。如果在创建对象之后修改了原型对象，那么所有基于该原型创建的对象都会受到影响。

构造函数模式的优缺点是什么？

构造函数模式是JavaScript中创建对象的一种常用方式。它通过new关键字来创建一个新的对象，并将构造函数中的属性和方法绑定到这个新对象上。

优点：

创建多个相似对象： 构造函数可以用来创建多个具有相同属性和方法的对象实例。
实例独立性： 每个实例都拥有自己的属性和方法副本，修改一个实例不会影响其他实例。
可以自定义属性和方法： 可以在构造函数中根据传入的参数来设置不同的属性值，从而创建具有不同状态的对象。

缺点：

方法重复创建： 构造函数中定义的方法会在每个实例中都创建一份副本，造成内存浪费。如果大量创建对象，会显著影响性能。
无法实现继承： 构造函数本身无法直接实现继承，需要借助原型链等方式来实现。
类型判断困难： 使用构造函数创建的对象，其类型判断可能会比较复杂，需要使用instanceof运算符。

为了解决方法重复创建的问题，通常会将方法定义在原型对象上，而不是构造函数内部。这样，所有实例共享同一个方法，节省内存。

例如：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
};

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

person1.sayHello(); // 输出 "Hello, my name is Alice and I'm 30 years old."
person2.sayHello(); // 输出 "Hello, my name is Bob and I'm 25 years old."

在这个例子中，sayHello方法只在Person.prototype上定义了一次，所有Person的实例都可以访问到这个方法，避免了重复创建。

ES6的class语法糖背后是什么？

ES6 引入的 class 关键字提供了一种更简洁、更易于理解的语法来定义类和实现继承。但本质上，它仍然是基于原型链的语法糖。class 关键字并没有引入新的面向对象模型，它只是对原型链的一种封装。

class 声明实际上创建了一个函数，这个函数就是类的构造函数。类中定义的方法会被添加到构造函数的 prototype 属性上。

例如：

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

  sayHello() {
    console.log("Hello, I'm " + this.name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayHello(); // 输出 "Hello, I'm Buddy"
myDog.bark();    // 输出 "Woof!"

console.log(typeof Animal); // 输出 "function"
console.log(Animal.prototype.constructor === Animal); // 输出 true

在这个例子中，Animal 和 Dog 都是函数。extends 关键字实现了继承，它相当于设置了 Dog.prototype.__proto__ = Animal.prototype。super() 函数用于调用父类的构造函数，确保子类实例拥有父类的属性。

class 语法糖的优点在于：