es6（六）—— JavaScript中class（类）的继承

已于 2023-02-27 15:04:28 修改
阅读量1.3k 收藏 4
点赞数 3
分类专栏： es6 文章标签： javascript es6 前端
于 2023-02-09 15:32:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44784401/article/details/128932765
版权

这里就只写类的继承了，想要了解类的基本概念，请看我之前写的es6（五）—— class（类）详解

文章目录

1：继承的作用（简介）

使用extends关键字让子类继承父类的属性和方法而实现的方法叫做继承。 extends 的写法比 ES5 的原型链继承，要清晰和方便很多。

class Person{
      constructor(personName, personAge){
        this.personName = personName || '张三';
        this.personAge = personAge || 18;
      } 
      eat(food){
        console.log(personName + '吃' + food);
      }
    }
    class Students extends Person{
      constructor(personName, personAge, className){
        // 如果子类中重写了构造器，那么第一句就必须调用父类的构造器（固定写法）
        super(personName, personAge);
        this.className = className;
      }
      eat(food){
        // 构造函数中的this是调用对象本身，如果直接使用personName和className会报错（className/personName is not defined）
        console.log(this.className + "的" + this.personName + '午餐吃' + food);
      }
    }
    let p0 = new Students(); // 没进行赋值的使用默认赋值
    let p1 = new Students('李四', 19, '三年（二）班');
    let p2 = new Students('王五', 20, '三年（二）班');
    
    console.log('p0', p0); // p0 Students {personName: '张三', personAge: 18, className: undefined}
    console.log('p1', p1); // p1 Students {personName: '李四', personAge: 19, className: '三年（二）班'}
    console.log('p2', p2); // p2 Students {personName: '王五', personAge: 20, className: '三年（二）班'}
    p1.eat('西红柿炒蛋');  // 三年（二）班的李四午餐吃西红柿炒蛋
    p2.eat('加糖的西红柿炒蛋'); // 三年（二）班的王五午餐吃加糖的西红柿炒蛋

如上述代码中 学生类（studtends）和人类（person），学生继承了人类的属性（name、age）和方法（eat），从而减少重复代码的描写。
值得注意的是：子类里面的super虽然代表的是父类的构造函数，但是因为返回的是子类的this（即子类的实例对象），所以super内部的this代表子类的实例，而不是父类的实例。同时，作为函数的super()只能用在子类的构造函数之中，用在其他地方就会报错。

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

上面示例中，new.target指向当前正在执行的函数。可以看到，在super()执行时（new B()），它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。

2：super 关键字

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

（1）super作为函数调用时：代表父类的构造函数。ES6明文规定，子类的构造函数必须要执行一次super()函数，否则就会报错。

原因：这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。

class Students extends Person {
  constructor(personName, personAge, className) {
     super(personName, personAge); // 调用父类的constructor(personName, personAge)
     this.className = className;
   } 
   toString() {
     return this.className + ' ' + super.toString(); // 调用父类的toString()
   }
 }

如上代码：constructor()方法和toString()方法内部，都出现了super关键字。super在这里表示父类的构造函数，用来新建一个父类的实例对象。

面试题：为什么子类的构造函数，一定要调用super()？
原因就在于 ES6 的继承机制，与 ES5 完全不同。ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。这就是为什么 ES6 的继承必须先调用super()方法，因为这一步会生成一个继承父类的this对象，没有这一步就无法继承父类。

注意点1：新建子类实例时，父类的构造函数必定会先运行一次。

class Person{
  constructor(){
   console.log('111');
  } 
}
class Students extends Person{
  constructor(){
    // 如果子类中重写了构造器，那么第一句就必须调用父类的构造器（固定写法）
    super();
   console.log('222');
  }
}
let p1 = new Students();

// 输出 
// 111
// 222

注意点2：在子类的构造函数中，只有调用super()之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，必须先完成父类的继承，只有super()方法才能让子类实例继承父类。

class Person{
 constructor(personName, personAge){
     this.personName = personName;
     this.personAge = personAge;
   } 
 }
 class Students extends Person{
   constructor(personName, personAge, className){
     // this.className = className; // Must call super constructor in derived class before accessing 'this' or returning from derived constructor
     super(personName, personAge);
     this.className = className; // 正确
   }
 }
 let p = new Students('李四', 19, '三年（二）班');
 console.log('p', p); // p Students {personName: '李四', personAge: 19, className: '三年（二）班'}

当然了，ES6并非写死了。如果你子类没有定义constructor()方法，这个方法会默认添加，并且里面会调用super()。也就是说，不管有没有显式定义，任何一个子类都有constructor()方法。（如下代码）

class ColorPoint extends Point {
}
// 等同于
class Students extends Person{
  constructor(...){
  super(...);
  }
}

当你拥有子类的定义后，你就可以使用new来生成子类的对象了。

（2）super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

①在普通方法中，指向父类的原型对象

class Person {
  getPersonAge() {
    return 18;
  }
}

class Students extends Person {
  constructor() {
    super();
    console.log(super.getPersonAge()); // 18
    console.log(super.getPersonAge() === Person.prototype.getPersonAge()); // true
  }
}

let s = new Students();

如上述代码，学术类（Students ）继承人类（Person ）的constructor方法中，super.getPersonAge()直接调用了父类（Person ）中的方法（getPersonAge）。此时，super在普通方法之中，指向Person .prototype，所以super.getPersonAge()就相当于Person .prototype.getPersonAge()。即super.getPersonAge() === Person.prototype.getPersonAge()的返回值为true。
需要注意的是：由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。如果属性定义在父类的原型对象上，super就可以取到。 如下代码示例

// 在原型上定义父类实例的方法或属性无法通过super调用
class Person {
  constructor() {
    this.personAge = 18;
  }
}
class Students extends Person {
  getPersonAge(){
    console.log(super.getPersonAge); // 18
  }
}
let s = new Students();
s.getPersonAge(); // undefined

// 属性定义在父类的原型对象上，super就可以取到
class Person {}
Person.prototype.personAge = 18; // 原型上定义属性
class Students extends Person {
  constructor(){
    super();
    console.log(super.personAge); // 18
  }
}
let s = new Students();

②super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。

class Person {
  static getPersonAge(personAge){
    console.log('静态方法', personAge)
  }
  getPersonAge(personAge){
    console.log('一般方法', personAge)
  }
}
class Students extends Person {
  static getPersonAge(personAge){
    super.getPersonAge(personAge);
  }
  getPersonAge(personAge){
    super.getPersonAge(personAge);
  }
}
Students.getPersonAge(18); // 静态方法 18
let s = new Students();
s.getPersonAge(19); // 一般方法 19

③注意点：使用super的时候，必须显式指定是作为函数、还是作为对象使用，否则会报错。

// 注意点：使用super的时候，必须显式指定是作为函数、还是作为对象使用，否则会报错。
class Person {}

class Students extends Person {
  constructor() {
    super();
    console.log(super); // 报错 Uncaught SyntaxError: 'super' keyword unexpected here
  }
}
3：私有属性和私有方法的继承

①定义：父类所有的属性和方法，都会被子类继承，除了私有的属性和方法。

②报错如下：
Uncaught SyntaxError: Private field ‘#personName’ must be declared in an enclosing class
未捕获语法错误：必须在封闭类中声明私有字段“#personName”
Uncaught SyntaxError: Private field ‘#getPersonAge’ must be declared in an enclosing class
未捕获语法错误：必须在封闭类中声明私有字段“#getPersonAge”

class Person {
  #personName = '张三';
  #getPersonAge(){
    console.log('personAge', 18)
  }
}
class Students extends Person {
  constructor(){
    super();
    console.log(this.#personName); // 报错 Uncaught SyntaxError: Private field '#personName' must be declared in an enclosing class
    this.#getPersonAge(); // 报错 Uncaught SyntaxError: Private field '#getPersonAge' must be declared in an enclosing class
  }
}

③子类无法继承父类的私有属性，或者说，私有属性只能在定义它的 class 里面使用。所以父类定义了私有属性的读写方法，子类就可以通过这些方法，读写私有属性。

class Person {
  #personName = '张三';
  getPersonName(){
    return this.#personName;
  }
}
class Students extends Person {
  constructor(){
    super();
    console.log(this.getPersonName()); // 张三
  }
}
let s = new Students();
4：静态属性和静态方法的继承

父类的静态属性和静态方法，也会被子类继承。只有私有的属性和方法才不会被子类继承。这个上面论证过了，就不重复说明了
注意点：静态属性是通过软拷贝实现继承的。

class Person {
  static personName = '张三';
}
class Students extends Person {
  constructor(){
    super();
    Students.personName = '李四';
  }
}
let s = new Students(); // 需要创建student的实例对象才可以，不然下面输出的就是两个张三
console.log(Students.personName); // 李四
console.log(Person.personName); // 张三

如上代码，这意味着personName 是Person 的静态属性，Students 继承了 person，即使你在Students 中操作了Person 的静态属性（personName ），依旧不会影响到Person的值。即两个类中的静态属性（personName ）是两个彼此独立的属性。同理可以推断出假设静态属性是一个对象，那么就会影响到，因为浅拷贝只会拷贝对象的内存地址。

5：Object.getPrototypeOf()

Object.getPrototypeOf()方法可以用来从子类上获取父类。

class Point { /*...*/ }
class ColorPoint extends Point { /*...*/ }
Object.getPrototypeOf(ColorPoint) === Point // true
6：类的 prototype 属性和__proto__属性

Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，同时存在两条继承链。
（1）子类的__proto__属性，表示构造函数的继承，总是指向父类。
（2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

class A {}
class B extends A {}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

同时由于extends关键字后面可以跟多种类型的值。

// 第一种，子类继承Object类。A其实就是构造函数Object的复制，A的实例就是Object的实例。
class A extends Object {}
A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true

// 第二种情况，不存在任何继承。A作为一个基类（即不存在任何继承），就是一个普通函数，所以直接继承Function.prototype。
class A {}
A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

综上：子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性。也就是说，子类的原型的原型，是父类的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

参考文章：https://es6.ruanyifeng.com/#docs/class-extends

前端张三
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6——class类实现继承
qq_49002903的博客
08-01 3万+
上面示例代码中子类中有两句重复的逻辑语句，在父类中我们已经声明过了，在子类中再写一次就冗余了，让我们接下来看看有没有什么好的解决办法。这就是上面的代码冗余的问题解决办法可以将name和age写到super参数中就可以直接继承父类的逻辑，减少冗余代码。注意在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。中，以创建一个类，该类是另一个类的子类。...
JavaScript 类继承
smarten57的博客
06-09 1782
在上面的示例中，`Animal`是一个父类，它有一个`name`属性和一个`eat()`方法。`Dog`是一个子类，它通过`extends`关键字继承了`Animal`父类。子类`Dog`还定义了一个`bark()`方法，它是子类特有的行为。我们创建了`Dog`类的实例`myDog`，并调用了父类的`eat()`方法和子类的`bark()`方法。我们还可以访问实例的属性，如`name`和`breed`。在上述示例中，`Circle`和`Rectangle`子类都继承了`Shape`父类的属性和方法。
JavaScript继承的多种方式及优缺点
最新发布
to_the_Future的博客
03-31 409
【代码】JavaScript继承的多种方式及优缺点。
js中的class继承
qq_44850230的博客
04-20 1974
class Person{ //构造器方法 constructor(name,age){ //构造器中的this指向的是--类的实例 this.name = name this.age = age } //一般方法 没有function哈哈哈 speak(){ ...
ES6.class类及构造函数,原型对象prototype,实例对象__proto__属性,面向对象三大特性,(封装,继承,多态)
你还有我
02-28 1709
目录构造函数1.什么是构造函数2.为什么要使用构造函数如何封装一个构造函数3.构造函数的执行过程4.构造函数的返回值5.与普通函数的区别5.1调用方式的不同5.2 返回值不同5.3 作用的不同原型对象对象的封装对象属性 __proto__ 构造函数 1.什么是构造函数 定义：在js中，使用new关键字来调用的函数，被称为构造函数。 构造函数的作用：创建对象。 2.为什么要使用构造函数 假如需要创建多个类似的对象，我们会书写很多重复的无意义代码。此时我们使用构造函数，方便快捷的创建一个对象。 如何封装一个构造
用class实现继承
恰恰冲鸭
05-04 189
【代码】用class实现继承。
ES6 javascript中Class类继承用法实例详解
10-19
主要介绍了ES6 javascript中Class类继承用法,结合实例形式较为详细的分析了ES6继承的基本用法、相关属性、方法与使用技巧,需要的朋友可以参考下
JS面向对象编程——ES6 中class的继承用法详解
10-15
在JavaScript的ES6标准中，面向对象编程得到了显著的增强，引入了`class`语法糖，使得类的定义更加简洁且符合传统面向对象语言的习惯。本文将深入探讨ES6中的`class`继承及其相关操作技巧。 ### 基本介绍 在ES5中...
ES6 javascript中class类的get与set用法实例分析
10-19
主要介绍了ES6 javascript中class类的get与set用法,结合具体实例形式分析了ES6中类的get与set关键字使用方法,需要的朋友可以参考下
js class类的基本使用和继承
domnk的博客
03-05 363
js class类的基本使用和继承
JS继承以及class类继承
Hwlyhl的博客
05-04 833
继承的概念： 在原有的基础之上我们要进行继承，可以直接从父方法或者父类中的属性和方法，达到不用重复定义即可直接使用，就是代码的复用 ES5继承的方式有哪些？ 原型链继承：将父方法的实例化对象赋给子方法的原型，子方法既可调用父方法自身的属性和方法，还可以使用父方法原型中的属性和方法，不足地地方就是无法传递参数。 function Nation() { this.name = '张飞' this.age = '男' } Nation.prototyp...
ES6 Class基本使用和继承
qiqiyiyi_的博客
12-18 296
Class基本使用和继承       内容大纲：                      1、Class的使用和构造方法 &nb...
ES6系列教程第六篇--Class继承
恰恰虎的博客
06-18 4610
一、extends关键字ES6中提供了extends关键字实现类的继承，相比较ES5的原型继承，更方便易懂，对于学过java的道友们来说，阅读无障碍，下面我们看下如果实现继承。class Person { constructor(name, age) { this.name = name; this.age = age; ...
js中es6 class类的继承
清风的博客
09-19 1702
js中 es6 class类的继承 语法 // 父类 class Father{ } // 子类继承父类 class Son extends Father { } 子类使用super关键字访问父类的方法 //定义了父类 class Father { constructor(x, y) { this.x = x; this.y = y; } sum...
ES6中class的使用+继承
汉堡请不要欺负面条
04-27 6383
一.Class 介绍+基本语法(1).介绍通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。(2).Class 的基本语法//definedClasses.js //定义类 class Person{ // 构造 constru...
javascript面向对象之ES6中的类和继承
鸡血博客
09-11 329
阮一峰 官网类 基础必须要看 https://es6.ruanyifeng.com/#docs/class function HeroES5(name, skill) { this.name = name this.skill = skill } HeroES5.prototype.doSth = function () { console.log(`练习${this.skill}`); } HeroES5.prototyp.
ES6 之 class 继承
xixi
03-12 2548
1、简介 Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。 // 通过 extends 关键字继承了 Point 类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个 Point 类 class Point { } class ColorPoint extends Point { } // co...
es6中的class与继承
m0_67619362的博客
05-04 84
注意项: 1.在类中声明方法的时候，千万不要给该方法加上function关键字 2.方法之间不要用逗号分隔，否则会报错 由下面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法！ console.log(typeof Person);//function console.log(Person===Person.prototype.constructor);//true 以下代码说明构造函数的prototype属性，在ES6的类中依然存在着。 c
es6中class继承的坑
kellywong的博客
11-23 1489
1. es6继承的过程 ES6 的继承机制和ES5完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。 2. super关键字 super作为函数调用时，代表父类...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值