📜  解释 ES6 中的子类和继承

📅  最后修改于: 2022-05-13 01:56:17.585000             🧑  作者: Mango

解释 ES6 中的子类和继承

子类:子类是从某个其他类的属性方法派生的类,该类称为该子类的父类。子类允许我们在不干扰父类的情况下更改或更新父类的属性。子类可以包含父类的属性,我们也可以在其中定义新属性。

这里,在上图中, GeeksforGeeks类将作为OfficialsGeeks类的父类。 OfficialsGeeks类将是子类,它们从父类GeeksforGeeks 继承一些属性和方法。

为了将父类的属性提供给子类,我们使用继承:继承是通过使用另一个类为其提供一些新属性和值而不干扰它来扩展类的方式。继承可以通过两种方式完成:

  • 原型继承
  • 使用 extends 关键字继承

原型继承:原型继承是使用原型关键字完成的。原型继承是继承的es5语法。

句法:

function func_name(){
    // Content of func_name()
} 

func_name.prototype.func_name2(){
    // Content of func_name2()
}

示例:下面的示例说明了使用原型关键字的继承。

Javascript
function GeeksforGeeks(name, desc) {
    this.name = name;
    this.desc = desc;
}
  
GeeksforGeeks.prototype.Officials = function Officials() {
    console.log("I'm an Official.");
    console.log("Community name is: ", this.name);
};
  
GeeksforGeeks.prototype.Geeks = function Geeks() {
    console.log("I'm an Geek.");
    console.log("Community description is: ", this.desc);
};
  
var GFG = new GeeksforGeeks(
    "GeeksforGeeks",
    "A computer science portal for all geeks."
);
  
GFG.Officials();
GFG.Geeks();


Javascript
class GeeksforGeeks {
  constructor(name, desc) {
    this.name = name;
    this.desc = desc;
  }
  
  getCommunityName() {
    return this.name;
  }
  
  getCommunityDescription() {
    return this.desc;
  }
}
  
class Courses extends GeeksforGeeks {
  constructor(communityName, communityDesc,
  courseName, courseDesc) {
    super(communityName, communityDesc);
    this.c_name = courseName;
    this.c_desc = courseDesc;
  }
  
  printValues() {
  
    // You can also use 'this' keyword in place 
    // of 'super' to access properties and
    // methods of parent class
    console.log('The name of Community is: ', 
        super.getCommunityName());
    console.log('The description of Community is: ', 
        super.getCommunityDescription());
    console.log('The name of Course is: ', this.c_name);
    console.log('The description of Course is: ', this.c_desc);
  }
}
  
const GFG = new Courses(
  'GeeksforGeeks',
  'A computer science portal for all geeks.',
  'DSA - Self Paced Course',
  'A complete guide to Data Structures and Algorithms.',
);
  
GFG.printValues();


输出:

使用 extends 关键字继承:es6ECMAScript-2015引入了使用extends关键字继承父类属性的概念。我们将在子类中使用super()方法来调用父类的构造函数。

句法:

// Code for the parent class
class parent_class{
    constructor(){
        // Body of constructor
    }
}

// Code for the child or sub class
class sub_class extends parent_class{
    constructor(){
        super()  
        // Body of constructor
    }
}

例子:

Javascript

class GeeksforGeeks {
  constructor(name, desc) {
    this.name = name;
    this.desc = desc;
  }
  
  getCommunityName() {
    return this.name;
  }
  
  getCommunityDescription() {
    return this.desc;
  }
}
  
class Courses extends GeeksforGeeks {
  constructor(communityName, communityDesc,
  courseName, courseDesc) {
    super(communityName, communityDesc);
    this.c_name = courseName;
    this.c_desc = courseDesc;
  }
  
  printValues() {
  
    // You can also use 'this' keyword in place 
    // of 'super' to access properties and
    // methods of parent class
    console.log('The name of Community is: ', 
        super.getCommunityName());
    console.log('The description of Community is: ', 
        super.getCommunityDescription());
    console.log('The name of Course is: ', this.c_name);
    console.log('The description of Course is: ', this.c_desc);
  }
}
  
const GFG = new Courses(
  'GeeksforGeeks',
  'A computer science portal for all geeks.',
  'DSA - Self Paced Course',
  'A complete guide to Data Structures and Algorithms.',
);
  
GFG.printValues();

输出: