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

最新推荐文章于 2024-08-25 18:43:02 发布
最新推荐文章于 2024-08-25 18:43:02 发布
阅读量78 收藏
点赞数
分类专栏： #JavaScript高级ES6新特性 JavaScript #JavaScript高级——面向对象 文章标签： es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GAlbinus/article/details/116649673
版权

提示：
本文为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();//调用实例方法

//输出结果：父级的普通函数
北凉冬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级学习：ES6新特性11——继承的学习02
GAlbinus的博客
05-11 121
提示： 本文为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月正式发布了。新版本的
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2931
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
————————ES6快速学习——————
qq_15832739的博客
06-22 181
全称：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 6万+
目录ES6新特性一、let和const二、symbol三、解构表达式3.1 数组解构5.对象方面6.函数方面proxy5.字符串迭代器class6.promise async7.模块化模块化优点 ES6新特性 一、let和const 前面讲过：https://blog.csdn.net/ZLJ_999/article/details/123960186 二、symbol Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。它是JavaScript中的第
手把手带你学习 JavaScript 的 ES6 ~ ESn
程序边界
11-15 6562
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
es6（六）—— JavaScript中class（类）的继承
weixin_44784401的博客
02-09 1449
JavaScript中class（类）的继承
JavaScript高级——ES6基础入门
明哥
07-29 5338
ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记。
JavaScript：ES6新特性：类与模块教程
07-14
通过本文的学习，我们了解了ES6中两个非常重要的新特性——类与模块。类为JavaScript提供了更加直观和简洁的面向对象编程方式，而模块则帮助我们更好地组织代码，提高代码的可读性和可维护性。掌握了这两个特性后，...
quiz:es6 DOP测验
05-02
JavaScript是Web开发中不可或缺的一部分，特别是随着ES6（ECMAScript 2015）的引入，它带来了许多新特性，极大地提升了JavaScript的表达能力和可维护性。本测验主要聚焦于ES6中的面向对象编程（OOP）概念以及单页...
esphen.com:ES6游乐场和未来可能的个人网站
05-21
esphen.com是一个基于ES6 Harmony（即ES6规范）的在线编程环境，特别适合开发者用来实践和学习ES6的新特性。它通过polyfills来支持那些在某些浏览器中尚未完全实现的ES6特性，使得开发者可以在不担心兼容性问题的...
es6学习资料.zip
07-21
**模板字符串**是另一个重要的新特性，使用反引号(```)包围，可以方便地插入变量，例如`let name = "Tom"; console.log(`Hello, ${name}!`);`。这种字符串插值方式使代码更加易读，也支持多行字符串。 **let和const...
JS面向对象编程——ES6 中class的继承用法详解
10-15
在JavaScript的ES6标准中，面向对象编程得到了显著的增强，引入了`class`语法糖，使得类的定义更加简洁且符合传统面向对象语言的习惯。本文将深入探讨ES6中的`class`继承及其相关操作技巧。 ### 基本介绍 在ES5中...
ES6笔记总结（Xmind格式）：第三天
m0_71805303的博客
08-23 561
ES6知识总结：Promise的使用:1.使用 new Promise() 构造函数来创建一个 promise 对象2.接受两个函数作为参数：resolve 和 reject①resolve 函数在异步操作成功完成时调用，并将 promise 的状态从 "pending" 变为 "fulfilled"，同时将操作的结果作为参数传递出去。②reject 函数在异步操作失败时被调用，并将 promise 的状态从 "pending" 变为 "rejected"，同时将错误作为参数传递出去。
ES6 中的 Set 对象
weixin_59685936的博客
08-20 359
ES6 中的 Set 对象
CommonJS和ES6模块规范有何区别
yiguoxiaohai的博客
08-20 750
CommonJS和ES6模块规范有何区别。CommonJS 和 ES6 模块系统是 JavaScript 中两种主要的模块处理方式。它们在语法、加载方式和使用场景上都有显著的区别。
前端开发工程师面试整理-ES6+的新特性
不务正业的猿
08-17 421
这些ES6+的新特性使JavaScript变得更强大、更简洁，提高了开发效率和代码可读性。ES6（ECMAScript 2015）及后续版本引入了许多新特性，极大地增强了JavaScript的功能和开发体验。使用function*定义生成器函数，可以通过yield暂停和恢复执行。基于Promise的异步编程语法，使异步代码更加简洁和易读。使用简洁的语法定义函数，并且不绑定自己的this。使用import和export语法导入和导出模块。Map用于存储键值对，Set用于存储唯一值的集合。用于异步操作的对象。
ES6 class小挑战
最新发布
分享学习网络的点点滴滴
08-25 168
a. 添加一个名为 “speedUS ”的setter，用于设置当前速度（单位为 mi/h）（但在存储值之前要将其转换为 km/h，即输入值乘以 1.6）；a. 添加一个名为 “speedUS ”的获取器，返回当前速度（单位：mi/h）（除以 1.6）；a. 创建一辆新汽车，尝试使用加速和制动方法以及 getter 和 setter。● 首先先将之前的函数改造成class类的方式。数据 汽车 1：“福特”，时速 120 公里。● 剩下的就很简单了，参考答案如下。
深入理解ECMAScript 6：全面剖析ES6新特性
这本书——《ECMAScript 6入门》（第二版），详细介绍了ES6的新特性，旨在帮助已掌握ES5的开发者快速适应并利用这些新功能。 书中涵盖了多个关键知识点： 1. **let和const命令**：这两个新的变量声明关键字提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值