深入理解JavaScript系列(17):面向对象编程之概论详细介绍

深入理解JavaScript系列(17):面向对象编程之概论详细介绍

前言

本文是深入理解JavaScript系列的第17篇,讲解面向对象编程的概念、理论和实践。在JavaScript中,我们可以使用面向对象编程(Object-Oriented Programming,OOP)的方式,构建更灵活、可维护性更好的代码。

什么是面向对象编程?

面向对象编程是一种编程范式,它将程序分解成多个独立的对象,每个对象都是具有属性和方法的独立实体,这些对象之间可以进行交互、传递消息,从而实现程序的功能。对象一般由类(Class)定义,类是对象的模板,它定义了对象的属性和方法。

面向对象编程有三个基本特征:

  1. 封装(Encapsulation):将对象的属性和方法封装在一起,对外暴露的只是一个接口,这样外部代码无法直接操作对象的内部状态,从而保证对象的安全性和稳定性。
  2. 继承(Inheritance):可以通过继承实现代码重用,将共同的代码抽象到一个父类中,子类可以继承父类的属性和方法,同时可以重写和扩展父类的行为。
  3. 多态(Polymorphism):允许不同的对象对同一个方法作出不同的响应。

面向对象编程的实现方式

1. 原型式继承

JavaScript是基于原型的语言,对象可以通过原型的方式继承其他对象的属性和方法。例如:

var Parent = function(name) {
  this.name = name;
};

Parent.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};

var Child = function(name, age) {
  Parent.call(this, name); // 继承父类的name属性
  this.age = age;
};

Child.prototype = new Parent(); // 设置原型为父类实例

Child.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name + ', age ' + this.age); // 重写父类的sayHello方法
};

var child = new Child('Tom', 7);
child.sayHello();

在这个例子中,我们用 Child 继承了 Parent 的 name 属性,同时也通过原型的方式继承了 Parent 的 sayHello 方法。我们还重写了 Child 的 sayHello 方法,由于多态的特性,当我们调用 Child 实例的 sayHello 方法时,会调用 Child 的定义,而不是 Parent 的定义。

2. 类式继承

在 ES6 中,JavaScript 引入了类的概念。使用类式继承,可以更加清晰地表达类与类之间的继承关系,实现起来也更加直观。例如:

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

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

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

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

let child = new Child('Tom', 7);
child.sayHello();

我们可以看到,在类式继承中,用 class 定义了一个类,其中使用 extends 关键字继承了父类,使用 super 调用了父类的构造函数。在子类中重写了 sayHello 方法,实现了对父类方法的覆盖。

总结

面向对象编程是一种重要的编程范式,在 JavaScript 中,我们可以使用原型式继承、类式继承等方式实现面向对象编程。学习和使用OOP可以让我们更好地组织和管理代码,提高开发效率和代码质量。

示例1:游戏角色设计

通过面向对象编程的方法,我们可以设计出一个游戏角色的类,包括名称、生命值、攻击力和技能等属性和方法。例如:

class Character {
  constructor(name) {
    this.name = name;
    this.maxHp = 100;
    this.hp = 100;
    this.atk = 10;
  }

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

  attack(enemy) {
    console.log(this.name + ' attacks ' + enemy.name + ', ' + this.atk + ' damage caused');
    enemy.hurt(this.atk);
  }

  skill(enemy) {
    console.log(this.name + ' uses skill on ' + enemy.name + ', ' + this.atk*2 + ' damage caused');
    enemy.hurt(this.atk*2);
  }

  hurt(damage) {
    console.log(this.name + ' is hurt, ' + damage + ' damage taken');
    this.hp -= damage;
    if (this.hp <= 0) {
      console.log(this.name + ' is dead');
    }
  }
}

let player = new Character('阿达');
let enemy = new Character('兽人');

player.sayHello();
enemy.sayHello();

player.attack(enemy);
enemy.attack(player);
player.skill(enemy);

在这个例子中,我们通过类的方式定义了一个游戏角色 Character,其中包括了 sayHelloattackskillhurt 等属性和方法。我们还在构造函数中初始化了角色的生命值、攻击力等属性。在 attackskillhurt 方法中,我们还使用了多态,让不同的角色对同一个方法作出不同的响应。

示例2:购物车设计

再举一个例子,假如我们正在设计一个购物车系统,需要支持添加、删除、修改和计算总价等操作。我们可以用面向对象编程的方法,设计一个购物车的类。例如:

class Cart {

  constructor() {
    this.items = [];
  }

  add(item) {
    this.items.push(item);
    console.log(item.name + ' added to cart');
  }

  remove(item) {
    const index = this.items.findIndex(x => x.name === item.name);
    if (index > -1) {
      this.items.splice(index, 1);
      console.log(item.name + ' removed from cart');
    }
  }

  update(item, newQuantity) {
    const index = this.items.findIndex(x => x.name === item.name);
    if (index > -1) {
      const oldQuantity = this.items[index].quantity;
      this.items[index].quantity = newQuantity;
      console.log(item.name + ' quantity updated from ' + oldQuantity + ' to ' + newQuantity);
    }
  }

  getTotalPrice() {
    let totalPrice = 0;
    for (let item of this.items) {
      totalPrice += item.price * item.quantity;
    }
    console.log('Total price: ' + totalPrice);
  }

}

let cart = new Cart();

let apple = {
  name: 'Apple',
  price: 5,
  quantity: 1
};

let banana = {
  name: 'Banana',
  price: 7,
  quantity: 2
};

cart.add(apple);
cart.add(banana);
cart.getTotalPrice();

cart.remove(banana);
cart.update(apple, 3);
cart.getTotalPrice();

在这个例子中,我们通过类的方式定义了一个购物车类 Cart,其中包括了 addremoveupdategetTotalPrice 等属性和方法。在 totalPrice 中,我们还使用了循环和累加的方法,计算出购物车中所有商品的总价。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入理解JavaScript系列(17):面向对象编程之概论详细介绍 - Python技术站

(0)
上一篇 2023年5月22日
下一篇 2023年5月22日

相关文章

  • win11系统快捷键大全 附详细功能介绍

    下面是针对“win11系统快捷键大全 附详细功能介绍”的完整攻略: Win11系统快捷键大全 基础快捷键 Win键:打开/关闭“开始”菜单 Win+D:显示/隐藏桌面 Win+E:打开资源管理器 Win+L:锁定计算机 Win+S:打开搜索面板 Ctrl+C:复制所选内容 Ctrl+V:粘贴上复制的内容 Ctrl+A:选中所有内容 Ctrl+Z:撤销上一页操…

    C 2023年5月23日
    00
  • android解析JSON数据

    Android解析JSON数据的完整攻略包括以下几个步骤: 1. 引入JSON库 Android提供了许多JSON库,例如GSON和Jackson等等。引入这些库需要在build.gradle文件中添加相应的依赖项,例如在build.gradle (Module:app)文件中添加以下代码: dependencies { // GSON库 implement…

    C 2023年5月23日
    00
  • C++实现比特币系统的源码

    C++实现比特币系统的源码攻略 比特币系统是一个由开源社区共同维护的加密货币系统,其核心在于区块链技术。C++语言被广泛用于比特币系统开发,以下是 C++ 实现比特币系统的源码攻略: 一、搭建开发环境 搭建比特币系统开发环境需要准备以下工具: C++ 编辑器:推荐使用 Visual Studio Code 或者 Sublime Text; Git 工具:用于…

    C 2023年5月23日
    00
  • C语言实现图的搜索算法示例

    C语言实现图的搜索算法示例 在C语言中,我们可以使用邻接矩阵或邻接表来表示图,实现图的搜索算法,本篇文章将详细介绍如何使用C语言实现图的搜索算法,以及提供两个示例说明。 邻接矩阵表示图 邻接矩阵是使用二维数组表示图的一种方法,其中数组的每个元素代表图中的一个节点,如果两个节点之间存在边,则数组元素的值为1,否则为0。例如,下面是一个由邻接矩阵表示的无向图。 …

    C 2023年5月23日
    00
  • C++实现学校运动会管理系统

    实现C++学校运动会管理系统可以按照以下步骤进行: 1. 确定系统需求和功能 首先需要确定学校运动会管理系统的具体需求和功能,包括但不限于以下几点: 学校各个学院和班级的参赛信息管理(包括报名、成绩等); 不同项目的成绩管理和排名显示; 按照学院、班级等分类统计成绩和排名; 系统安全性和用户权限管理。 2. 构建系统框架和设计数据结构 根据需求和功能,可以设…

    C 2023年5月23日
    00
  • C++11中的chrono库详解

    C++11中的chrono库详解 C++11中的chrono库提供了一种方便的方法来处理时间和日期。它具有高度的可移植性和更好的精度。 我们将了解该库中主要的三个组件:duration,time_point和clock。 duration duration表示一段时间,它拥有以下属性: 精度:例如浮点、整数 长度:例如秒、毫秒、微秒、纳秒 在 chrono …

    C 2023年5月23日
    00
  • C++中protobuf 的交叉编译使用详解

    C++中protobuf的交叉编译使用详解 protobuf是一种轻量级的数据交换格式,同时也可以在多种编程语言中使用,包括C++、Python、Java等。在C++中使用protobuf,常常需要进行交叉编译。本文将详细讲解如何在C++中进行protobuf的交叉编译。 准备工作 在进行交叉编译之前,需要先进行一些准备工作,包括安装protobuf和交叉编…

    C 2023年5月23日
    00
  • C调用C++代码的方法步骤

    C语言是一款面向过程的语言,而C++语言是一款面向对象的语言。虽然二者有着许多相似之处,但仍然会存在一些不兼容的情况,在C中调用C++代码时也是如此。下面介绍一下C调用C++代码的方法步骤。 步骤 在C++文件中,声明被调用的函数为extern “C” #ifdef __cplusplus extern "C" { #endif // y…

    C 2023年5月23日
    00
合作推广
合作推广
分享本页
返回顶部