JavaScript高级学习：ES6新特性10——继承的学习01

最新推荐文章于 2025-11-06 21:38:46 发布
原创 最新推荐文章于 2025-11-06 21:38:46 发布 · 144 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#es6 #javascript

本文详细介绍了ES6中继承的实现方式，并对比了ES5的继承方法。重点讲解了super关键字的用法，包括其在构造函数和静态方法中的不同含义。

提示：
本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第十章

JavaScript高级学习：ES6新特性10——继承的学习01

前言

本文粗浅学习继承。

提示：以下是本篇文章正文内容，下面案例可供参考

继承

ES5与ES6中继承用法的对比

ES5中继承的用法

ES5中的继承实际上是通过代码的灵活运用，让s去自动同步了F的代码，写法是多种不固定的。

function F() {
    this.color="red";
    this.name="dog";
}
F.prototype.age=10;

function S() {
    /*构造函数的继承*/
    this.name=20;  //语句1
    F.call(this);
    this.x=10;
}
/*原型继承*/
for(let k in F.prototype){
    S.prototype[k]=F.prototype[k];
}

ES5中同名属性在父类构造调用前先赋值，会被F.call给覆盖，造成赋值无效 ，如语句1

ES5中的继承只能继承自定义的构造函数，内置的构造函数是无法继承。比如（Math,Date）;

ES6中继承的用法

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B
    }
    age=22;
}
class B extends A{
    constructor(){
        super("boy");
        
        this.x=10;
    }
    show(){
    }
}
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

解析：

父类A：

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B
    }
    age=22;
}

/*在ES6中class可以通过extents关键字来实现类的继承
* class B extends A 表示A为父类，B为子类
* 这个时候子类（B类）可以使用A类中所有的非私有属性和方法*/
class B extends A{
    /*子类中可以不写构造函数，代码在运行时会自动加上构造函数和super()，如果自己写了构造函数，就一定要记得调用super()*/
    constructor(){
        // this.x=5;
        /*父级构造函数需要传参，子类调用父类构造函数时，可以传参，也可以不传参，这一点和java是不一样的，我们推荐传参使用*/
        super("boy");    //调用父级的构造函数，子类中必读调用父类构造函数！！！！
        /*this关键字必须在super之后使用*/
        this.x=10;
    }
    show(){
        /*super()表示的是父类构造函数的调用，只能写在子类的构造函数中。*/
        /*普通方法不能使用super()函数，但是可以使用super关键字表示super对象*/
        // super();
    }
}

// let a=new A();
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B
    }
    age=22;
}

/*在ES6中class可以通过extents关键字来实现类的继承
* class B extends A 表示A为父类，B为子类
* 这个时候子类（B类）可以使用A类中所有的非私有属性和方法*/
class B extends A{
    /*子类中可以不写构造函数，代码在运行时会自动加上构造函数和super()，如果自己写了构造函数，就一定要记得调用super()*/
    constructor(){
        // this.x=5;
        /*父级构造函数需要传参，子类调用父类构造函数时，可以传参，也可以不传参，这一点和java是不一样的，我们推荐传参使用*/
        super("boy");    //调用父级的构造函数，子类中必读调用父类构造函数！！！！
        /*this关键字必须在super之后使用*/
        this.x=10;
    }
    show(){
        /*super()表示的是父类构造函数的调用，只能写在子类的构造函数中。*/
        /*普通方法不能使用super()函数，但是可以使用super关键字表示super对象*/
        // super();
    }
}

// let a=new A();
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B
    }
    age=22;
}

/*在ES6中class可以通过extents关键字来实现类的继承
* class B extends A 表示A为父类，B为子类
* 这个时候子类（B类）可以使用A类中所有的非私有属性和方法*/
class B extends A{
    /*子类中可以不写构造函数，代码在运行时会自动加上构造函数和super()，如果自己写了构造函数，就一定要记得调用super()*/
    constructor(){
        // this.x=5;
        /*父级构造函数需要传参，子类调用父类构造函数时，可以传参，也可以不传参，这一点和java是不一样的，我们推荐传参使用*/
        super("boy");    //调用父级的构造函数，子类中必读调用父类构造函数！！！！
        /*this关键字必须在super之后使用*/
        this.x=10;
    }
    show(){
        /*super()表示的是父类构造函数的调用，只能写在子类的构造函数中。*/
        /*普通方法不能使用super()函数，但是可以使用super关键字表示super对象*/
        // super();
    }
}

// let a=new A();
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B
    }
    age=22;
}

/*在ES6中class可以通过extents关键字来实现类的继承
* class B extends A 表示A为父类，B为子类
* 这个时候子类（B类）可以使用A类中所有的非私有属性和方法*/
class B extends A{
    /*子类中可以不写构造函数，代码在运行时会自动加上构造函数和super()，如果自己写了构造函数，就一定要记得调用super()*/
    constructor(){
        // this.x=5;
        /*父级构造函数需要传参，子类调用父类构造函数时，可以传参，也可以不传参，这一点和java是不一样的，我们推荐传参使用*/
        super("boy");    //调用父级的构造函数，子类中必读调用父类构造函数！！！！
        /*this关键字必须在super之后使用*/
        this.x=10;
    }
    show(){
        /*super()表示的是父类构造函数的调用，只能写在子类的构造函数中。*/
        /*普通方法不能使用super()函数，但是可以使用super关键字表示super对象*/
        // super();
    }
}

// let a=new A();
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B
    }
    age=22;
}

/*在ES6中class可以通过extents关键字来实现类的继承
* class B extends A 表示A为父类，B为子类
* 这个时候子类（B类）可以使用A类中所有的非私有属性和方法*/
class B extends A{
    /*子类中可以不写构造函数，代码在运行时会自动加上构造函数和super()，如果自己写了构造函数，就一定要记得调用super()*/
    constructor(){
        // this.x=5;
        /*父级构造函数需要传参，子类调用父类构造函数时，可以传参，也可以不传参，这一点和java是不一样的，我们推荐传参使用*/
        super("boy");    //调用父级的构造函数，子类中必读调用父类构造函数！！！！
        /*this关键字必须在super之后使用*/
        this.x=10;
    }
    show(){
        /*super()表示的是父类构造函数的调用，只能写在子类的构造函数中。*/
        /*普通方法不能使用super()函数，但是可以使用super关键字表示super对象*/
        // super();
    }
}

// let a=new A();
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

父类

class A{
    constructor(sex) {
        this.name="张三";
        this.sex=sex;
        console.log(this);  //A还是B的问题
        //let a=new A();	输出为A	{age: 22, name: "张三", sex: undefined}
        //let b=new B();	输出为B	{age: 22, name: "张三", sex: "boy"}
        
    }
    age=22;
}

在ES6中class可以通过extents关键字来实现类的继承

class B extends A 表示A为父类，B为子类。这个时候子类（B类）可以使用A类中所有的非私有属性和方法

class B extends A{
    constructor(){
        super("boy");//语句2
        this.x=10;	//语句3
    }
    show(){
    }
}
let b=new B();

子类中可以不写构造函数，代码在运行时会自动加上构造函数和super()，如果自己写了构造函数，就一定要记得调用super()，比如语句2。

父级构造函数需要传参，子类调用父类构造函数时，可以传参，也可以不传参，这一点和java是不一样的，我们推荐传参使用。但是调用父级的构造函数，子类中必读调用父类构造函数！！！！如语句2

this关键字必须在super之后使用，比如语句3

super()表示的是父类构造函数的调用，只能写在子类的构造函数中。普通方法不能使用super()函数，但是可以使用super关键字表示super对象，如：

class B extends A{
    constructor(){
        super("boy"); 
        this.x=10;
    }
    show(){
        super();
    }
}
let b=new B();
console.log(b.name);    //张三
console.log(b.age);     //22
console.log(b.sex);     //boy
console.log(b.x);       //10

super关键字的使用

super关键字作为对象使用

class A{
    constructor() {
        this.name="张三";
        this.show=function () {
            console.log("A的构造函数中的方法");
        }
    }
    age=18; 
    play() {
        console.log(this);
        console.log(this.abc);  
        console.log("A的构造函数中的原型方法");
    }
}
A.prototype.sex="男";

let a =new A();
console.log(a.play());

class B extends A{
    constructor() {
        super();
        this.abc="abc";
        super.def="def";
        console.log(super.def); 
        console.log(super.name);
        console.log(super.age);
        console.log(super.sex);
        super.play();
    }
}

let b=new B();
console.log(b);
let aa=new A();
console.log(aa);

解析

父类A

class A{
    constructor() {
        this.name="张三";
        this.show=function () {
            console.log("A的构造函数中的方法");
        }
    }
    age=18; //不使用constructor函数直接写的属性也属于实例属性，但是要求必须在类的最顶层
    play() {
        console.log(this);
        console.log("A的构造函数中的原型方法");
    }
}
A.prototype.sex="男";

let a =new A();
console.log(a.play());
/*
A
A的构造函数中的原型方法
*/

子类B

子类中的super和父类中的this是等价的，如语句4

class A{
    
    play() {
        console.log(this);
        console.log(this.abc);  //子类中有abc属性，此时只有在子类中通过super关键字调用的play函数可以读取abc的值
        console.log("A的构造函数中的原型方法");
    }
}
let a =new A();
console.log(a.play());
/*
A
undefined
A的构造函数中的原型方法
*/
class B extends A{
    constructor() {
        super();// 在子类的构造函数中调用了父类的构造函数
        this.abc="abc";

        super.def="def";//语句4
        console.log(super.def); // undefined

        /*super对象只能获取父类的原型属性和原型方法*/
        console.log(super.name);    //undefined
        console.log(super.age);     //undefined
        console.log(super.sex);     //男
        
        // super.show();   //报错
        //play是A的原型方法，可以通过super调用
        super.play();
    }
}

let b=new B();
console.log(b);			//B
let aa=new A();
console.log(aa);		//A

概念1：super关键字在非静态函数中，super的指向是父类的原型对象。

概念2：子类的非静态函数通过super调用父类方法时，这个方法中的this指向子类的实例对象。

概念3：所以在这种情况下，super和this在赋值的时候是等价的。

super关键字在静态方法中的含义

创建一个父类

class F{
    static name="爹";
    static show(){
        console.log(this);
        console.log(this.name);
        console.log("父级的静态函数");
    }
    show(){
        console.log("父级的普通函数");
    }
}

创建一个子类

super关键字在使用的时候必须显式的指定他是函数还是对象,要么super后面带括号，要么要使用‘.’运算符，如语句123。

子类的静态方法中通过super调用父类方法，调用到的是父类的静态方法，但是这个情况下，父类的静态方法中的this表示的是子类，而不是子类对象。

class S extends F{
    static name="儿子";
    static print(){
        // console.log(super); //报错		//语句1
        console.log(super.toString());	//语句2
        console.log(super.valueOf());	//语句3

        super.show();   //子类的静态方法中super关键字表示父类（F）
    }
    print(){
        super.show();   //子类的普通方法中super关键字表示父类的原型对象
    }
}

S.print();//通过类名调用静态方法

let s = new S();
s.print();//调用实例方法

S.print();//通过类名调用静态方法
/*
	class S extends F{
        static name="儿子";
        static print(){
            /*super关键字在使用的时候必须显式的指定他是函数还是对象,要么super后面带括号，要么要使用.运算符*/
            // console.log(super); //报错
            console.log(super.toString());
            console.log(super.valueOf());

            /*子类的静态方法中通过super调用父类方法，调用到的是父类的静态方法，但是这个情况下，父类的静态方法中的this表示的是子类，而不是子类对象*/

            super.show();   //子类的静态方法中super关键字表示父类（F）
        }
        print(){
            super.show();   //子类的普通方法中super关键字表示父类的原型对象
        }
    }
    
    class S extends F{
        static name="儿子";
        static print(){
            /*super关键字在使用的时候必须显式的指定他是函数还是对象,要么super后面带括号，要么要使用.运算符*/
            // console.log(super); //报错
            console.log(sup…
	class S extends F{
        static name="儿子";
        static print(){
            /*super关键字在使用的时候必须显式的指定他是函数还是对象,要么super后面带括号，要么要使用.运算符*/
            // console.log(super); //报错
            console.log(sup…
	儿子
    父级的静态函数                

*/

let s = new S();
s.print();//调用实例方法

//输出结果：父级的普通函数
JavaScript高级——ES6基础入门
z16638522031的博客
10-12 1171
前言ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.学习方法:看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记let 和 constconst和let是在ES6中引入的两个新的变量声明关键字，用于声明变量的作用域。const：const用于声明一个常量，其值在声明后不能被修改。常量必须在声明时进行初始化，而且不能再次赋值。
JavaScript：ES6新特性：类与模块教程
07-14
通过本文的学习，我们了解了ES6中两个非常重要的新特性——类与模块。类为JavaScript提供了更加直观和简洁的面向对象编程方式，而模块则帮助我们更好地组织代码，提高代码的可读性和可维护性。掌握了这两个特性后，...
JavaScript高级学习：ES6新特性11——继承的学习02
GAlbinus的博客
05-11 184
提示： 本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第十一章 JavaScript高级学习：ES6新特性11——继承的学习02前言继承继承的内置函数自定义myArray类，继承Array类自定义DebugError类，继承Error类 前言 本文粗浅学习继承。 提示：以下是本篇文章正文内容，下面案例可供参考 继承 继承的内置函数 class F{ } class S extends F{ } getPrototypeOf中参数为类名 console.log(O
JavaScript ES6新的类继承特性学习笔记
kikaylee的专栏
06-19 1万+
Javascript新标准ES6正式出来都一年多了，最近才有时间愿意集中精力研究下，发现有些新特性确实亮瞎了我的双眼，比如，最新的“类-实例”的支持，再比如模仿Python引入gennerator等等。下面和大家分享下我ES6类继承的学习笔记吧。JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 2015标准（简称ES6）已经在2015年6月正式发布了。新版本的
ES6 新特性——基础语法 学习笔记
最新发布
qheng2006的博客
11-06 778
使用 class 关键字定义类，类名通常首字母大写。类体中包含构造函数和方法。// 定义一个类// 构造函数：初始化实例属性// 方法say() {console.log('你好')// 使用类（实例化）const p1 = new Person("苦瓜", 18)console.log(p1.name, p1.age) // 苦瓜 18p1.say() // 你好用 class 定义的 Person 是一个抽象的（类），而用 new 实例化就是将其变为具体的（实例）。
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3580
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对优快云其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
手把手带你学习 JavaScript 的 ES6 ~ ESn
程序边界
11-15 7286
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
————————ES6快速学习——————
qq_15832739的博客
06-22 295
全称：ESMAScript 6 ,是新的javasscript 语法标准，2015正式推出 为了js 更加快捷方便1.var：全局作用域，函数作用域，没有if,switch,of,while,do,else作用域，会变量提升2.let 局部变量：局部作用域,(在一对{}中启用 )；不能变量提升；在一个作用域里面不能重复声明3.cnost 常量：let基本一样；变量名建议大写；声明必须赋值；值类型不允许修改1.数组： [ ] 解构符号；，一位；...rest剩余；c=10默认参数(有顺序的）2.对象：
最全的—— ES6有哪些新特性？
热门推荐
admin_zlj的博客
04-14 7万+
目录ES6新特性一、let和const二、symbol三、解构表达式3.1 数组解构5.对象方面6.函数方面proxy5.字符串迭代器class6.promise async7.模块化模块化优点 ES6新特性 一、let和const 前面讲过：https://blog.youkuaiyun.com/ZLJ_999/article/details/123960186 二、symbol Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。它是JavaScript中的第
JavaScript升级指南：掌握ES6新特性与依赖更新
尽管自动工具能完成部分转换工作，但真正的掌握仍需开发者主动学习ES6（ECMAScript 2015）及后续版本引入的核心特性。文中特别提到了箭头函数（Arrow Functions），它不仅是语法糖，更改变了this的绑定机制。传统...
精选资源
ES6箭头函数详解：语法、特性及其应用
03-01
然后重点讲解了箭头函数的几个重要特性，包括不绑定自身的this值而继承外部上下文的this值，不可用作构造器创建新实例对象以及不能访问arguments伪数组等问题。最后提供了多个具体的代码实例帮助理解。 适用人群：...
现代JavaScript：ES6特性在项目中的实际应用
标题“use-es6-today”强调的是如何在当前的开发环境中立即使用ES6的新特性，而不是等待浏览器完全支持。描述中提到“有关如何立即开始编写es6的快速示例集合”，说明该资源旨在为开发者提供实用、可操作的代码示例...
前端项目开发踩坑01————利用setTimeout模拟出类似setInterval及宏任务微任务
GAlbinus的博客
06-28 1074
大屏项目等利用定时器固定时间刷新数据。setInterval包裹Promise导致，Promise的回调执行时间与预期timeout不符的解决方案:利用setTimeout模拟出类似setInterval。提示：以下是本篇文章正文内容，下面成功案例可供参考先放解决方案。
JavaScript高级学习：ES6新特性06——异常处理
GAlbinus的博客
04-27 628
提示： 本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第六章 JavaScript高级学习：ES6新特性06——异常处理前言异常处理异常捕获异常抛出html抛出异常 前言 本文讲解异常处理。 提示：以下是本篇文章正文内容，下面案例可供参考 异常处理 异常捕获 try{ // 异常捕获 console.log("进入try语句块"); console.log(num); let num=10; console.log("你好");
前端项目开发踩坑02————Vue-Router 栈溢出报错
GAlbinus的博客
10-17 573
Vue-Router 栈溢出报错 Error in render: "RangeError: Maximum call stack size exceeded"
JavaScript高级学习：ES6新特性08——对象属性的扩展
GAlbinus的博客
04-27 421
提示： 本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第八章 JavaScript高级学习：ES6新特性08——对象属性的扩展前言对象属性的扩展对象简写属性的简写ES5属性简写ES6属性简写返回值快速封装对象中方法的简写ES5写法ES6写法属性名使用表达式复制对象传统直接赋值复制对象使用扩展运算符复制对象合并和拆分对象合并对象拆分字符串拆分数组is函数可枚举属性对象中的可枚举属性与不可枚举属性可枚举属性不可枚举属性忽略不可枚举属性for-in循环Object.keys函数
jQuery高级学习：前后端分离02——传统数据交互模式
GAlbinus的博客
06-24 334
提示： 本文为JavaScript栏目：jQuery高级学习：前后端分离02——传统数据交互模式 jQuery高级学习：前后端分离02——传统数据交互模式前言传统方式的数据交互A.HTMLB.html 前言 传统方式的数据交互 A.HTML <body> <div id="app"> <div id="detail"> <button type="button" id="min">-</button> &l
JavaScript高级学习：面对对象——JS的垃圾回收机制
GAlbinus的博客
04-25 330
提示： 本文为JavaScript栏目：JavaScript高级系列——面对对象章节 JavaScript高级学习：面对对象——JS的垃圾回收机制JS的垃圾回收机制举例双引用S和DOM相互依赖时的垃圾清除 # 前言 本文讲解JS的垃圾回收机制。 提示：以下是本篇文章正文内容，下面案例可供参考 JS的垃圾回收机制 什么是JS中的垃圾？—声明使用过，后续不在使用的变量、声明后没有使用过。 JS中如何处理垃圾？ 自动处理：声明在函数内的变量，在函数直接完毕自动销毁。 手动处理：变量赋值为null，或者
JavaScript高级学习：ES6新特性09——ES6中类的使用
GAlbinus的博客
04-27 289
提示： 本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第九章 JavaScript高级学习：ES6新特性09——ES6中类的使用前言ES6中类的使用类的声明ES5中类的声明与使用ES6中类的声明与使用ES6中类的声明与使用：class关键字构造函数ES6中设置set和get类的表达式方式声明表达式方式声明类自动执行的类类的作用域类的静态方法和实例方法静态方法实例方法 前言 本文讲解ES6中类的使用。 提示：以下是本篇文章正文内容，下面案例可供参考 ES6中类的使用 类
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值