js子类怎么继承父类的属性

JavaScript中子类继承父类属性的方法主要有以下几种：使用class关键字、prototype链、Object.create、构造函数调用。其中，使用class关键字是最现代、简洁且推荐的方式。以下详细描述了使用class关键字的继承方式。

使用class关键字继承：在ES6中，引入了class关键字，使得继承变得更加简洁和直观。通过extends关键字，子类可以继承父类的所有属性和方法。下面是一个具体的例子：

class Parent {

    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    displayAge() {
        console.log(`I am ${this.age} years old`);
    }
}
const child = new Child('John', 12);
child.greet(); // Hello, my name is John
child.displayAge(); // I am 12 years old

在这个例子中，Child类继承了Parent类的属性和方法，并且通过super关键字调用了父类的构造函数来初始化name属性。接下来，我们将详细探讨JavaScript中子类继承父类属性的各种方法。

一、使用class关键字继承

1、基本继承

通过class关键字和extends关键字，子类可以继承父类的属性和方法。这种方式简洁易懂，推荐在现代JavaScript开发中使用。

class Parent {

    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类构造函数
        this.age = age;
    }
    displayAge() {
        console.log(`I am ${this.age} years old`);
    }
}
const child = new Child('John', 12);
child.greet(); // Hello, my name is John
child.displayAge(); // I am 12 years old

在上面的例子中，Child类继承了Parent类，并通过super关键字调用父类的构造函数来初始化name属性。

2、方法重写

在子类中，可以重写父类的方法，但仍然可以通过super关键字调用父类的方法。

class Parent {

    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    greet() {
        super.greet(); // 调用父类的greet方法
        console.log(`I am ${this.age} years old`);
    }
}
const child = new Child('John', 12);
child.greet(); 
// Hello, my name is John
// I am 12 years old

通过这种方式，可以在子类中扩展或修改父类的方法。

二、使用prototype链继承

在ES5及更早版本的JavaScript中，常通过prototype链来实现继承。

1、基本继承

function Parent(name) {

    this.name = name;
}
Parent.prototype.greet = function() {
    console.log(`Hello, my name is ${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.displayAge = function() {
    console.log(`I am ${this.age} years old`);
}
const child = new Child('John', 12);
child.greet(); // Hello, my name is John
child.displayAge(); // I am 12 years old

在这个例子中，通过Parent.call(this, name)调用父类的构造函数，并通过Object.create(Parent.prototype)创建一个以父类prototype为原型的对象。

2、方法重写

同样，在这种继承方式中，也可以重写父类的方法。

function Parent(name) {

    this.name = name;
}
Parent.prototype.greet = function() {
    console.log(`Hello, my name is ${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.greet = function() {
    Parent.prototype.greet.call(this); // 调用父类的greet方法
    console.log(`I am ${this.age} years old`);
}
const child = new Child('John', 12);
child.greet(); 
// Hello, my name is John
// I am 12 years old

通过这种方式，可以在子类中扩展或修改父类的方法。

三、使用Object.create继承

Object.create方法创建一个新对象，并将其__proto__设置为指定的对象。

1、基本继承

const Parent = {

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
const Child = Object.create(Parent);
Child.initialize = function(name, age) {
    this.name = name;
    this.age = age;
};
Child.displayAge = function() {
    console.log(`I am ${this.age} years old`);
};
const child = Object.create(Child);
child.initialize('John', 12);
child.greet(); // Hello, my name is John
child.displayAge(); // I am 12 years old

在这个例子中，通过Object.create(Parent)创建一个以Parent为原型的Child对象。

2、方法重写

同样，可以在子对象中重写父对象的方法。

const Parent = {

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
const Child = Object.create(Parent);
Child.initialize = function(name, age) {
    this.name = name;
    this.age = age;
};
Child.greet = function() {
    Parent.greet.call(this); // 调用父对象的greet方法
    console.log(`I am ${this.age} years old`);
};
const child = Object.create(Child);
child.initialize('John', 12);
child.greet(); 
// Hello, my name is John
// I am 12 years old

通过这种方式，可以在子对象中扩展或修改父对象的方法。

四、构造函数调用继承

在ES5及更早版本的JavaScript中，常通过构造函数调用来实现继承。

1、基本继承

function Parent(name) {

    this.name = name;
}
Parent.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
}
function Child(name, age) {
    Parent.call(this, name); // 调用父类构造函数
    this.age = age;
}
Child.prototype.displayAge = function() {
    console.log(`I am ${this.age} years old`);
}
const child = new Child('John', 12);
child.greet(); // Hello, my name is John
child.displayAge(); // I am 12 years old

在这个例子中，通过Parent.call(this, name)调用父类的构造函数来初始化name属性。

2、方法重写

同样，可以在子类中重写父类的方法。

function Parent(name) {

    this.name = name;
}
Parent.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
}
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype.greet = function() {
    Parent.prototype.greet.call(this); // 调用父类的greet方法
    console.log(`I am ${this.age} years old`);
}
const child = new Child('John', 12);
child.greet(); 
// Hello, my name is John
// I am 12 years old

通过这种方式，可以在子类中扩展或修改父类的方法。

五、总结

在JavaScript中实现子类继承父类属性的方法有多种，包括使用class关键字、prototype链、Object.create和构造函数调用。其中，使用class关键字是最现代、简洁且推荐的方式。具体选择哪种方式可以根据项目需求和代码风格来决定。

在实际开发中，如果你需要一个强大且易于使用的项目团队管理系统，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统都提供了丰富的功能，能够帮助团队高效地管理项目、任务和协作。

相关问答FAQs：

1. 什么是JavaScript中的继承？
JavaScript中的继承是一种机制，允许一个类（子类）继承另一个类（父类）的属性和方法。这样子类可以重用父类的代码，同时也可以添加自己的特定功能。

2. 如何在JavaScript中实现子类继承父类的属性？
要实现子类继承父类的属性，可以使用原型链或者ES6中的class关键字。在原型链中，子类的原型对象可以指向父类的实例，从而继承父类的属性。在ES6中，可以使用extends关键字来声明子类，子类将自动继承父类的属性。

3. 如何在JavaScript中使用原型链实现子类继承父类的属性？
使用原型链实现子类继承父类的属性时，可以通过将子类的原型对象指向父类的实例来实现。具体步骤如下：

• 创建父类：使用构造函数或者对象字面量的方式创建父类，并定义父类的属性和方法。
• 创建子类：使用构造函数或者对象字面量的方式创建子类，并定义子类的属性和方法。
• 将子类的原型对象指向父类的实例：通过将子类的原型对象赋值为父类的实例，子类就可以继承父类的属性和方法。

例如，以下是使用原型链实现子类继承父类的属性的示例代码：

// 创建父类
function ParentClass() {
  this.parentProperty = '父类属性';
}

ParentClass.prototype.parentMethod = function() {
  console.log('这是父类方法');
}

// 创建子类
function ChildClass() {
  this.childProperty = '子类属性';
}

// 将子类的原型对象指向父类的实例
ChildClass.prototype = new ParentClass();

// 创建子类实例
var child = new ChildClass();

// 子类继承了父类的属性和方法
console.log(child.parentProperty); // 输出：父类属性
child.parentMethod(); // 输出：这是父类方法

这样子类就可以继承父类的属性了。