React 项目 -ES6 语法类的继承 (10)

谁践踏了优雅 2022-09-03 15:12 210阅读 0赞

在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法。

继承

首先继承是类之间的关系。准确说是子类和父类之间的关系。比如我们可以创建类,美国人,中国人,印度人 等等 但是这些不同国家的人,他们也是存在共同点的,比如都属于人这一物种。所以我们可以找到这样继承关系

  1. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

下面我们在ES6 中类中看:

  1. class American{
  2. constructor(name,age){
  3. this.name=name;
  4. this.age=age;
  5. }
  6. }
  7. class Chinese{
  8. constructor(name,age){
  9. this.name=name;
  10. this.age=age;
  11. }
  12. }

当然这只是两个类,可能还有更多,比如印度人,俄罗斯人,等等那么这些不同国家人我们都要去写那么多吗,显然是太累的了

那么我们不得不去把其中的共同的特征提取出来也就是Person

  1. class Person{
  2. constructor(name,age){
  3. this.name=name;
  4. this.age=age;
  5. }
  6. }
  7. class American extends Person{
  8. }
  9. class Chinese extends Person{
  10. }

我们看继承的语法结构啊

class subClassName extends pClassName{

}

subClassName 表示子类的名称

pClassName 表示父类的名称

super

和java一样,我们可以在子类的构造器中调用super 方法,当然这也是必须的

如果我们在子类中声明构造器,那么必须在第一行 执行super的方法

如下:

  1. class American extends Person{
  2. constructor(){
  3. super();
  4. }
  5. }

当我需要传递参数的时候:

  1. class American extends Person{
  2. constructor(name,age){
  3. super(name,age);
  4. }
  5. }

实例方法

子类继承的不仅仅是父类的实例属性,还有实例方法

比如:

  1. class Person{
  2. constructor(name,age){
  3. this.name=name;
  4. this.age=age;
  5. }
  6. sayHello(){
  7. console.log("你好");
  8. }
  9. }
  10. class American extends Person{
  11. constructor(name,age){
  12. super(name,age);
  13. }
  14. }
  15. class Chinese extends Person{
  16. constructor(name,age){
  17. super(name,age);
  18. }
  19. }
  20. const american=new American("张三",18);
  21. console.log(american.name);
  22. console.log(american.sayHello());
  23. const chinese=new American("张三",18);
  24. console.log(chinese.sayHello());

sayHello 是父类中实例方法,那么在实例化的子类中也可以去调用sayHello方法

上面就是对ES6 中继承的相关知识点,当然如果之前学习过面向对象的相关的知识,相信上面的内容你来说简直是小菜一碟

希望对你有所帮助

发表评论

表情:
评论列表 (有 0 条评论,210人围观)

还没有评论,来说两句吧...

相关阅读

    相关 ES6 class继承

    类的继承:`extends`关键字用于[类声明][Link 1]或者[类表达式][Link 2]中,以创建一个类,该类是另一个类的子类。 `extends`关键字用来创建一个