正文

掌握JavaScript，子类如何轻松调用父类方法与属性

/0 浏览量
0829

在JavaScript中，类（Class）是ES6引入的一个新特性，它使得面向对象编程变得更加直观和易于理解。当使用类时，子类可以继承父类的属性和方法，这使得代码更加模块化和可复用。下面，我们将探讨如何在JavaScript中实现子类对父类方法与属性的调用。

类的基本概念

首先，我们需要了解JavaScript中的类是如何定义的。类是通过class关键字来定义的，它包含构造函数和一系列的方法。

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

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

在上面的例子中，我们定义了一个名为Parent的类，它有一个构造函数和一个sayHello方法。

子类的继承

当创建子类时，我们可以使用extends关键字来指定它继承自哪个父类。子类可以访问父类的方法和属性。

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

    sayAge() {
        console.log(`I am ${this.age} years old.`);
    }
}

在上面的例子中，我们定义了一个名为Child的子类，它继承自Parent类。子类有一个额外的属性age和一个方法sayAge。

子类调用父类方法

子类可以直接调用父类的方法，就像它们是自己的方法一样。

const child = new Child('Alice', 10);
child.sayHello(); // 输出: Hello, my name is Alice
child.sayAge();   // 输出: I am 10 years old.

在上面的例子中，child对象调用了sayHello方法，这是从Parent类继承而来的。

子类调用父类属性

子类也可以访问父类的属性，前提是这些属性不是私有属性。

class Parent {
    constructor(name) {
        this.name = name;
    }
    // 私有属性
    #secret = 'I am a secret';
}

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

const child = new Child('Alice', 10);
console.log(child.name); // 输出: Alice
console.log(child.#secret); // 报错: Cannot access 'secret' on 'child' because it is a private property.

在上面的例子中，我们尝试访问一个私有属性#secret，这会抛出一个错误，因为私有属性只能在类内部访问。

总结

通过继承，子类可以轻松地调用父类的方法和属性。在使用类时，确保遵循良好的封装原则，合理地使用公有和私有属性。这样，你的代码将会更加模块化、可维护和可复用。

-- 展开阅读全文 --