【前端知识】Javascript进阶-类和继承

问道飞鱼2024-12-17 11:07

文章目录

概述

当然可以，以下是对JavaScript中类和继承的详细介绍：

一、类（Class）

  1. 定义：

    • 类是创建对象的模板或蓝图，它定义了对象的属性和方法。
    • 在JavaScript中，类是通过class关键字定义的。

  2. 语法：

    • 类的定义以class关键字开始，后面跟着类名。
    • 类体由一对大括号{}包围，其中包含构造函数和方法。

  3. 构造函数：

    • 构造函数是一个特殊的方法，用于在创建对象时初始化对象的属性。
    • 构造函数在类中使用constructor关键字定义。

  4. 方法：

    • 方法是类中的函数，用于执行特定的操作。
    • 方法定义在类体中，可以通过this关键字访问对象的属性和其他方法。

  5. 静态方法：

    • 静态方法是属于类本身的方法，而不是属于类的实例。
    • 静态方法使用static关键字定义，可以通过类名直接调用。

  6. 示例：

javascript 复制代码 
class Animal {
  constructor(name) {
    this.name = name;
  }

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

  static species() {
    return 'Animal';
  }
}

const dog = new Animal('Doggy');
dog.speak(); // 输出: Doggy makes a sound.
console.log(Animal.species()); // 输出: Animal

二、继承（Inheritance）

  1. 定义：

    • 继承是面向对象编程中的一个重要概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。
    • 通过继承，子类可以重用父类的代码，从而实现代码的复用和扩展。

  2. 语法：

    • 在JavaScript中，子类使用extends关键字来继承父类。
    • 子类可以重写父类的方法，也可以添加新的属性和方法。

  3. super关键字：

    • super关键字用于在子类中调用父类的构造函数和方法。
    • 在子类的构造函数中，super()必须被调用，以确保父类的属性被正确初始化。

  4. 示例：

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

  speak() {
    console.log(`${this.name} barks.`); // 重写父类的方法
  }

  static species() {
    return 'Dog'; // 重写父类的静态方法
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Buddy barks.
console.log(Dog.species()); // 输出: Dog
  1. 继承的优缺点 ：
    • 优点 ：
      • 代码复用：通过继承，子类可以重用父类的属性和方法，避免重复编写代码。
      • 组织代码：通过继承，可以将相关的属性和方法封装在一个类中，使代码结构更清晰。
      • 多态：子类可以重写父类的方法，从而根据实际情况执行不同的代码逻辑。
    • 缺点 ：
      • 复杂性增加：随着继承层次的增加，代码可能会变得更加复杂和难以维护。
      • 耦合度提高：子类与父类之间存在紧密的耦合关系，如果父类发生变化，子类也可能需要相应地进行修改。

三、继承的实现方式

在JavaScript中，实现继承的方式主要有以下几种，每种方式都有其独特的优点和缺点，并且适用于不同的场景。下面是每种继承方式的样例代码：

  1. 原型链继承：
javascript 复制代码 
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    // 继承Parent的属性和方法
    Parent.call(this, name); // 借用构造函数继承属性
    this.age = age;
}

// 设置Child的原型为Parent的一个实例，实现原型链继承方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
    console.log(this.age);
};

let child1 = new Child('Alice', 18);
let child2 = new Child('Bob', 20);

child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
console.log(child2.colors); // ['red', 'blue', 'green', 'black'] // 共享了父类实例的属性
console.log(child1.sayName() === child2.sayName()); // true，方法也被共享

注意：上面的代码实际上混合了原型链继承和借用构造函数继承，这不是纯粹的原型链继承。纯粹的原型链继承应该只设置子类的原型为父类的一个实例，不调用父类的构造函数。但这样做会导致子类实例无法拥有父类构造函数中定义的属性。为了避免这个问题，通常会结合使用借用构造函数继承和原型链继承，即组合继承。下面的样例将展示组合继承。

  1. 借用构造函数继承（也称为伪类继承）：
javascript 复制代码 
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    // 借用Parent的构造函数来继承属性
    Parent.call(this, name);
    this.age = age;
}

// Child没有继承Parent的原型方法和属性
let child = new Child('Alice', 18);
console.log(child.name); // Alice
console.log(child.age); // 18
// console.log(child.sayName()); // TypeError: child.sayName is not a function
  1. 组合继承（原型链继承 + 借用构造函数继承）：
javascript 复制代码 
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    // 借用Parent的构造函数来继承属性
    Parent.call(this, name);
    this.age = age;
}

// 原型链继承Parent的方法
Child.prototype = new Parent(); // 注意：这里不会执行Parent构造函数中的代码，只设置原型
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
    console.log(this.age);
};

let child1 = new Child('Alice', 18);
let child2 = new Child('Bob', 20);

child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
console.log(child2.colors); // ['red', 'blue', 'green'] // 没有共享属性
console.log(child1.sayName() === child2.sayName()); // true，方法被共享
  1. 原型式继承 （使用Object.create）：
javascript 复制代码 
let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);

me.name = 'John'; // "name" 是 me 的一个属性
me.isHuman = true; // "isHuman" 是 me 的一个属性

me.printIntroduction(); // 输出: "My name is John. Am I human? true"
  1. 寄生组合式继承：
javascript 复制代码 
function Parent(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

// 创建一个父类实例的副本，并将其原型设置为父类的原型
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
    console.log(this.age);
};

let child1 = new Child('Alice', 18);
let child2 = new Child('Bob', 20);

child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
console.log(child2.colors); // ['red', 'blue', 'green'] // 没有共享属性
console.log(child1.sayName() === child2.sayName()); // true，方法被共享
  1. ES6类继承：
javascript 复制代码 
class Parent {
    constructor(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green'];
    }

    sayName() {
        console.log(this.name);
    }
}

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

    sayAge() {
        console.log(this.age);
    }
}

let child1 = new Child('Alice', 18);
let child2 = new Child('Bob', 20);

child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
console.log(child2.colors); // ['red', 'blue', 'green'] // 没有共享属性
console.log(child1.sayName() === child2.sayName()); // true，方法被共享

请注意，上面的样例代码中有些包含了不必要的或错误的继承方式混合（如第一个样例中的原型链继承和借用构造函数继承的混合），仅用于说明各种继承方式的概念和区别。在实际开发中，应该根据需要选择最合适的继承方式。

作用

在JavaScript中，类和继承的作用主要体现在以下几个方面：

一、类和作用

  1. 代码组织：

    • 类提供了一种将相关功能（属性和方法）封装在一起的方式，使得代码更加模块化和易于管理。
    • 通过类，开发者可以将复杂的逻辑分解成更小的、可复用的组件。

  2. 面向对象编程：

    • 类是面向对象编程（OOP）的核心概念之一。
    • 在JavaScript中，通过类的使用，开发者可以实现封装、继承和多态等OOP特性。

  3. 代码复用：

    • 类允许创建多个具有相同属性和方法的对象实例，从而实现了代码的重用。
    • 通过定义类，开发者可以避免在每个对象中重复编写相同的代码。

  4. 数据隐藏：

    • 类提供了一种将内部状态（私有属性）与外部行为（公共方法）分离的方式。
    • 通过类的封装，开发者可以隐藏对象的内部实现细节，只暴露必要的接口给外部使用。

  5. 可读性和维护性：

    • 类使得代码更加结构化，易于阅读和理解。
    • 当代码需要修改或扩展时，通过类的继承和多态等特性，开发者可以更加容易地实现这些需求。

二、继承和作用

  1. 代码复用：

    • 继承允许子类重用父类的代码，包括属性和方法。
    • 通过继承，子类可以继承父类的所有功能，而无需重新编写这些功能。

  2. 代码扩展：

    • 继承允许子类在父类的基础上添加新的功能或修改现有功能。
    • 通过重写父类的方法或添加新的方法，子类可以扩展父类的功能。

  3. 多态性：

    • 继承使得子类能够以不同的方式实现父类中的方法。
    • 通过多态性，开发者可以在不修改现有代码的情况下，使用不同的子类来实现不同的行为。

  4. 层次结构：

    • 继承允许开发者创建具有层次结构的类体系。
    • 在这种体系中，每个类都可以被视为一个特定类型的对象，而子类则是对该类型的进一步细化或扩展。

  5. 抽象和封装：

    • 通过继承，开发者可以将通用的功能抽象到父类中，而将特定的功能封装到子类中。
    • 这有助于减少代码冗余，提高代码的可维护性和可扩展性。

在JavaScript中，类和继承的引入使得开发者能够以更加面向对象的方式编写代码，从而提高了代码的可读性、可维护性和可扩展性。同时，通过类的封装和继承等特性，开发者可以更加容易地实现代码的重用和扩展。

相关推荐
破局缘6 分钟前
apt文件问题ruby.list文件
开发语言·windows·ruby
Hacker_Oldv10 分钟前
Web网络安全
前端·安全·web安全
晚安~~14 分钟前
社区生活超市系统｜Java｜SSM｜JSP｜
java·开发语言·tomcat·maven
拼图20915 分钟前
图片底部空白缝隙解决法方案（CSS)
前端·css
Faylynn16 分钟前
Python：程序中如何引用环境变量
开发语言·python
小堃学编程17 分钟前
Python学习（二）—— 基础语法（上）
开发语言·python
会思想的苇草i19 分钟前
JavaScript--原型与原型链
开发语言·前端·javascript·设计模式·原型·原型模式·原型链
向宇it20 分钟前
【从零开始入门unity游戏开发之——C#篇06】变量类型转化和异常捕获
开发语言·游戏·unity·c#·游戏引擎
wks1989121521 分钟前
线程sleep的时候会释放锁吗
开发语言·c++·算法
伍贰什丿22 分钟前
C语言学习day22：ReadProcessMemory函数/游戏内存数据读取工具开发
c语言·开发语言·学习·游戏
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02玄机平台应急响应—webshell查杀03PyTorch机器学习实现液态神经网络04YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数05【凡人修仙传_01】散修厉飞羽是如何出师未捷身先死的！06Docker 夺命连环 15 问07大模型应用RAG系列3-1从0搭建一个RAG：做好文档切分08量化方法怎么选？如何评估量化后的大模型LLM？0904 - matlab m_map地学绘图工具基础函数 - 设置网格10【OCPP】ocpp1.6协议第3.13章节SmartCharging介绍及翻译