JavaScript原型继承 vs 类继承

翻滚的胖子
2023-09-05 10:21:38
前端技术
JavaScript

JavaScript原型继承 vs 类继承

在JavaScript中，继承是实现代码重用和扩展的重要方式。而在继承的实现过程中，原型继承和类继承是两种常用的方式。本文将为您介绍这两种继承方式的区别，并通过函数和代码案例进行详细讲解，帮助编程小白更好地理解和运用。

1. 原型继承

原型继承是JavaScript中最基本的继承方式之一。它通过利用原型链的特性，使一个对象能够继承另一个对象的属性和方法。

// 父类构造函数
function Parent(name) {
    this.name = name;
}

// 父类原型方法
Parent.prototype.sayHello = function() {
    console.log('Hello, ' + this.name + '!');
}

// 子类构造函数
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

// 子类继承父类原型
Child.prototype = Object.create(Parent.prototype);

// 子类原型方法
Child.prototype.sayAge = function() {
    console.log('I am ' + this.age + ' years old.');
}

var child = new Child('Alice', 10);
child.sayHello();
child.sayAge();

通过以上代码案例，我们可以看到，通过原型继承，子类Child成功继承了父类Parent的属性和方法，同时还可以自定义子类的方法。这种继承方式在JavaScript中非常常见。

2. 类继承

类继承则是ES6引入的一种新的继承方式。它通过使用class关键字和extends关键字来定义和继承类。

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

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

// 子类
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }

    sayAge() {
        console.log('I am ' + this.age + ' years old.');
    }
}

const child = new Child('Alice', 10);
child.sayHello();
child.sayAge();

通过以上代码案例，我们可以看到，通过类继承，子类Child同样成功继承了父类Parent的属性和方法，并且可以定义自己的方法。类继承是ES6中推荐的继承方式，它更加符合面向对象编程的规范和语法。