es6 类与继承

简介: ES6 的类与继承特性使得 JavaScript 的面向对象编程更加规范和易于维护,提高了代码的可读性和可复用性,广泛应用于各种复杂的 JavaScript 应用程序开发中。

ES6 中的类与继承提供了一种更接近传统面向对象编程语言的语法糖,使得 JavaScript 中的面向对象编程更加清晰和易于理解。以下是对 ES6 类与继承的详细介绍:

类的定义

  • 使用 class 关键字来定义类,类中可以包含构造函数 constructor、实例方法、静态方法等。
class Person {
   
  constructor(name, age) {
   
    this.name = name;
    this.age = age;
  }

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

  static introduce() {
   
    console.log('This is a Person class.');
  }
}

在上述示例中,Person 类有一个构造函数用于初始化 nameage 属性,一个实例方法 sayHello 用于打印问候语,还有一个静态方法 introduce

类的实例化

  • 通过 new 关键字来创建类的实例。
const person = new Person('John', 30);
person.sayHello(); 
// 输出:Hello, my name is John.

继承

  • 使用 extends 关键字实现类的继承,子类可以继承父类的属性和方法,并可以添加自己的属性和方法。

    class Student extends Person {
         
    constructor(name, age, grade) {
         
      super(name, age);
      this.grade = grade;
    }
    
    study() {
         
      console.log(`${
           this.name} is studying in grade ${
           this.grade}.`);
    }
    }
    

    在这个例子中,Student 类继承自 Person 类,通过 super 关键字调用父类的构造函数来初始化继承的属性,并添加了自己的 grade 属性和 study 方法。

重写方法

  • 子类可以重写父类的方法,以实现自己特定的行为。
class Teacher extends Person {
   
  constructor(name, age, subject) {
   
    super(name, age);
    this.subject = subject;
  }

  sayHello() {
   
    console.log(`Hello, I'm ${
     this.name}, I teach ${
     this.subject}.`);
  }
}

const teacher = new Teacher('Alice', 35, 'Math');
teacher.sayHello(); 
// 输出:Hello, I'm Alice, I teach Math.

静态方法继承

  • 子类会继承父类的静态方法,但如果子类重写了父类的静态方法,那么子类的静态方法将覆盖父类的同名静态方法。
Student.introduce(); 
// 输出:This is a Person class.,因为 Student 类没有重写 introduce 方法

class AnotherStudent extends Person {
   
  static introduce() {
   
    console.log('This is AnotherStudent class.');
  }
}

AnotherStudent.introduce(); 
// 输出:This is AnotherStudent class.

类的访问器属性

  • ES6 类支持使用 getset 关键字来定义访问器属性,用于控制对类的属性的访问和修改。
class Circle {
   
  constructor(radius) {
   
    this._radius = radius;
  }

  get radius() {
   
    return this._radius;
  }

  set radius(newRadius) {
   
    if (newRadius > 0) {
   
      this._radius = newRadius;
    } else {
   
      console.log('Radius must be positive.');
    }
  }
}

const circle = new Circle(5);
console.log(circle.radius); 
// 输出:5

circle.radius = 10;
console.log(circle.radius); 
// 输出:10

circle.radius = -2;
// 输出:Radius must be positive.
console.log(circle.radius); 
// 输出:10

ES6 的类与继承特性使得 JavaScript 的面向对象编程更加规范和易于维护,提高了代码的可读性和可复用性,广泛应用于各种复杂的 JavaScript 应用程序开发中。

相关文章
|
1月前
|
安全
ES5/ES6 的继承除了写法以外还有什么区别
ES5 和 ES6 的继承主要区别在于实现机制和语法糖。ES5 通过原型链和构造函数模拟类的继承,而 ES6 引入了 class 关键字,使继承更加直观和简洁,支持 super 调用父类方法,提升了代码可读性和维护性。
类与ES6类之间的继承
类与ES6类之间的继承
|
2月前
es5 类与继承
es5 类与继承
15 0
|
6月前
|
安全 编译器 程序员
【C++】继承 -- 详解(上)
【C++】继承 -- 详解(上)
|
6月前
|
存储 Java 编译器
【C++】继承 -- 详解(下)
【C++】继承 -- 详解(下)
|
6月前
|
JavaScript 前端开发
ES6如何声明一个类?类如何继承?
ES6如何声明一个类?类如何继承?
43 0
ES5的继承和ES6的继承有什么区别
ES5的继承和ES6的继承有什么区别
67 0
ES5 / ES6 的继承除了写法以外还有什么区别
ES5 / ES6 的继承除了写法以外还有什么区别
|
JavaScript
【ES6】类
【ES6】类
55 0
【TS】接口和接口继承
【TS】接口和接口继承
89 0