JavaScript面向对象编程的三种实现方式-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-09-18 22:14:01

原创

1005人浏览过

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

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

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

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

原型链的核心在于每个JavaScript对象都有一个指向其原型对象的内部链接，这个原型对象又有自己的原型，以此类推，直到到达

null

登录后复制

。当试图访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或者到达原型链的末端。

举个例子，假设我们有一个

Animal

登录后复制

构造函数和一个

Dog

登录后复制

构造函数，我们想让

Dog

登录后复制

继承

Animal

登录后复制

的属性。我们可以这样做：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

关键字来创建一个新的对象，并将构造函数中的属性和方法绑定到这个新对象上。

优点：

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

缺点：

Northstar盈富量化交易软件

Northstar盈富量化交易软件是一个基于B/S架构的一站式量化交易平台，能进行历史回放、策略研发、模拟交易、实盘交易。已对接国内期货CTP交易系统，并陆续补充国内股票XTP渠道、老虎证券、币安等多种渠道。这是一个面向程序员的开源高频量化交易软件，用于期货、股票、外汇、炒币等多种交易场景，实现自动交易。暂时只对接了国内期货交易所，理论上可以对接任意交易所。功能特性：1、一站式平台，可适配对接

查看详情

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

登录后复制

语法糖的优点在于：

更清晰的语法：
```
class
```
登录后复制
关键字提供了一种更易于理解和维护的语法来定义类和实现继承。
更好的可读性：
```
class
```
登录后复制
语法使代码更易于阅读和理解，尤其是在处理复杂的继承关系时。
更强的类型检查：
```
class
```
登录后复制
语法可以与 TypeScript 等类型检查工具配合使用，提供更强的类型安全。

虽然

class

登录后复制

语法糖简化了面向对象编程，但理解原型链的本质仍然很重要。这有助于更深入地理解 JavaScript 的工作原理，并更好地解决实际问题。

以上就是JavaScript面向对象编程的三种实现方式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

React/Next.js中实现列表项的动态移动与状态管理：兼论唯一键的重要性如何将HTML表格多行数据保存到Google Sheet JavaScript中向JSON对象添加新属性的正确姿势如何使 Jest 模拟函数默认抛出错误以提高测试效率 React Router v6 教程：构建认证保护的私有路由与重定向策略