📜  如何在 ECMAScript 6 中扩展某些类?

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

如何在 ECMAScript 6 中扩展某些类?

这些类是表示现实世界对象的蓝图,因此我们可以在编程中轻松操作、访问和使用它们。它被定义为创建一个抽象数据类型来存储某种信息以及可以操作该信息的方法。

让我们借助示例来理解课程。

示例:这里我们展示了 Person 类的示例。 可以通过在名称前写关键字 class 来创建该类,并且整个代码将写在 { } 花括号内。您可以看到已用于实例化对象的构造函数。 personInfo方法是 getter 方法,用于返回与对象相关的信息或属性。在类声明之后,我们可以使用它创建对象,就像我们在第 13 行和第 14 行中所做的那样。稍后我们只是打印有关对象 person 的信息。


Javascript
class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;   
    }
 
    get personInfo(){
        return (`The name of person is ${this.personName} of Age
                ${this.personAge} and gender ${this.gender}`);
    }  
}
 
let person1 = new Person("Mr. Twinkle Sharma", "20", "Male");
 
console.log(person1.personInfo);


Javascript
class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;   
    }
 
    get personInfo(){
        return (`The name of person is ${this.personName} of Age
                ${this.personAge} and gender is ${this.gender}`);
    }  
}
 
class Student extends Person{
    constructor(personName, personAge, gender, standard, collegeName){
       super(personName, personAge, gender);
       this.standard = standard;
       this.collegeName = collegeName;
    }
 
    get studentInfo(){
        return (`The name of student is ${this.personName} and in
               ${this.standard} from College ${this.collegeName}`);
    }
 
    get grade(){
        return this._grade;
    }
 
    set grade(grade){
        console.log("Inside the setter Function")
        this._grade = grade;
    }
}
 
let student1 = new Student("Mr. Twinkle Sharma", "20", "Male",
                            "Engineering", "MMMUT");
console.log(student1.studentInfo);
console.log(student1.personInfo);
 
student1.grade = 'B';
console.log("Grade of Student is:-", student1.grade);


Javascript
class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;   
    }
 
    get personInfo(){
        return (`The name of person is ${this.personName} of Age ${this.personAge}
                and gender is ${this.gender}`);
    }  
}
 
class Employee extends Person{
    constructor(personName, personAge, gender, employer){
       super(personName, personAge, gender);
       this.employer = employer;
    }
 
    get employeeInfo(){
        return (`The name of employee is ${this.personName} of
                Age ${this.personAge} works for ${this.employer}`);
    }
 
    get salary(){
        return this._salary;
    }
    set salary(salary){
        this._salary = salary;
    }
 
    get position(){
        return this._position;
    }
    set position(position){
        this._position = position;
    }
 
    increaseSalary(percent) {
        this.salary += this.salary*percent/100;       
    }
}
 
let employee1 = new Employee("XYZ Sharma", "21", "Male",
                            "ABC Organization");
console.log(employee1.employeeInfo);
 
employee1.salary = 65000;
employee1.position = "Software Development Engineer";
 
console.log(employee1.salary, employee1.position);
 
employee1.increaseSalary(12.6);
console.log(employee1.salary);


输出:

继承:之前我们已经讨论了类的理论,现在是时候解释扩展类的概念了。让我们从一个真实世界的例子开始,人是这个世界上每个人的通用术语,现在如果我们想根据一些专业化创建人类怎么办。可以有两种选择。

  1. 要么我们从头开始编写整个代码。
  2. 扩展已经在 Person 类中编写的代码,因为它是一种概括。这称为继承。

继承是面向对象编程技术的概念,通过扩展通用类来重用已编写的通用类代码以创建一个专门的类。例如,person类是一个标准类,我们可以创建一个学生,它也是一个人,但有一些额外的专业化,比如一个人可以有年龄、姓名、性别,但学生也可以有他正在学习的标准,分数和等级,大学名称等。

如何在 ES6 中扩展一个类?

在 es6 中扩展类的过程很简单,你只需在类名后面写下 extend 关键字,然后写下你要扩展的类的名称。

句法:

class ChildClass extends ParentClass{  // Definition }

注意:扩展某些类的类称为子类,另一个称为父类。

示例 1:这里我们将扩展Person类以创建一个Student类。

 一开始我们编写了前面例子中使用的person类,后来我们扩展了student类。在学生类中,首先有一个构造函数,用于初始化对象。请注意,我们通过传递三个参数来调用超级函数,因为必须在子构造函数执行之前调用父构造函数。您可以清楚地注意到这里我们在构造函数中还有两个属性,它们显示了扩展类的概念。
后来我们创建了两个 getter 和 setter 方法来设置和获取学生的成绩,最后我们通过将所需的参数传递给构造函数来创建一个学生对象。

Javascript

class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;   
    }
 
    get personInfo(){
        return (`The name of person is ${this.personName} of Age
                ${this.personAge} and gender is ${this.gender}`);
    }  
}
 
class Student extends Person{
    constructor(personName, personAge, gender, standard, collegeName){
       super(personName, personAge, gender);
       this.standard = standard;
       this.collegeName = collegeName;
    }
 
    get studentInfo(){
        return (`The name of student is ${this.personName} and in
               ${this.standard} from College ${this.collegeName}`);
    }
 
    get grade(){
        return this._grade;
    }
 
    set grade(grade){
        console.log("Inside the setter Function")
        this._grade = grade;
    }
}
 
let student1 = new Student("Mr. Twinkle Sharma", "20", "Male",
                            "Engineering", "MMMUT");
console.log(student1.studentInfo);
console.log(student1.personInfo);
 
student1.grade = 'B';
console.log("Grade of Student is:-", student1.grade);

输出:

说明:第一行打印是因为调用了studentInfo方法,第二行打印是因为我们扩展了 person 类,所以学生类的每个对象都可以访问父类的方法。之后我们将成绩设置为 B,这就是为什么要打印该行最后,它正在打印学生的成绩。

示例 2:在另一个示例中,我们将扩展 Person 类以创建一个 Employee 类。

首先有一个 Person 类,它将被 Employee 类扩展,然后我们编写了类定义。在构造函数内部,有一个额外的属性名为 employees 正在使用 this 设置,其余三个被传递给 super 方法。在构造函数之后,还有一些 getter 和 setter 方法在这里,我们还创建了一个额外的函数increaseSalary,可以操作对象的薪水属性。

Javascript

class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;   
    }
 
    get personInfo(){
        return (`The name of person is ${this.personName} of Age ${this.personAge}
                and gender is ${this.gender}`);
    }  
}
 
class Employee extends Person{
    constructor(personName, personAge, gender, employer){
       super(personName, personAge, gender);
       this.employer = employer;
    }
 
    get employeeInfo(){
        return (`The name of employee is ${this.personName} of
                Age ${this.personAge} works for ${this.employer}`);
    }
 
    get salary(){
        return this._salary;
    }
    set salary(salary){
        this._salary = salary;
    }
 
    get position(){
        return this._position;
    }
    set position(position){
        this._position = position;
    }
 
    increaseSalary(percent) {
        this.salary += this.salary*percent/100;       
    }
}
 
let employee1 = new Employee("XYZ Sharma", "21", "Male",
                            "ABC Organization");
console.log(employee1.employeeInfo);
 
employee1.salary = 65000;
employee1.position = "Software Development Engineer";
 
console.log(employee1.salary, employee1.position);
 
employee1.increaseSalary(12.6);
console.log(employee1.salary);

输出:

解释:由于对象的employeeInfo方法,打印了第一行,然后我们已经为对象分配了薪水和职位,现在我们也可以访问对象的这个属性。最后,我们将工资属性增加了 12.6%,因此正在打印最终工资。