ES6 class继承
ES6 class继承
class类的继承
- class可以通过
extends
关键字实现继承,这笔ES5的通过修改原型连实现继承要清晰和方便很多。
class Point{}class ColorPoint extends Point{}
上面代码定义了一个ColorPoint
类,该类通过extends
关键字,继承了Point
类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point
类。下面,我们在ColorPoint
内部加上代码。
class ColorPoint extends Point {constructor(x, y, color) {super(x, y); // 调用父类的constructor(x, y)this.color = color;}toString() {return this.color + ' ' + super.toString(); // 调用父类的toString()}
}
上面代码中,constructor
方法和toString
方法之中,都出现了super
关键字,它在这里面表示父类的构造函数,用来新建父类的this
对象。
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类自己的this
对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法,如果不调用super
方法,子类就得不到this
对象。
class Point { /* ... */ }class ColorPoint extends Point {constructor() {}
}let cp = new ColorPoint(); // ReferenceError
上面代码中,ColorPoint
继承了父类Point
,但是它的构造函数没有调用super
方法,导致新建实例时报错。
ES5的继承,实质是先创造子类的实例对象this
,然后再将父类的方法添加到this
上面(Parent.apply(this))。ES6的继承机制完全不同,实质是先创造父类的实例对象this
(所以必须先调用super
方法),然后再用子类的的构造函数修改this
。
如果子类没有定义constructor
方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor
方法。
class ColorPoint extends Point{}//等同于
class ColorPoint extends Point{constructor(...args){super(...args)}
}
另一个需要注意的地方是,在子类的构造函数中,只有调用super
之后,才可以使用this
关键字,否则会报错。这是因为子类实例的构建,是机遇对父类实例的加工,只有super
方法才能返回父类的实例。
class Point{constructor(x,y){this.x=x;this.y=y;}
}class ColorPoint extends Point{constructor(x,y,color){this.color = color; //referenceErrorsuper(x,y);this.color= color; //正确}
}
上面的代码中,子类的constructor
方法没有调用super
之前就使用this
关键字,结果报错,而放在super
方法之后就是正确的。
下面是生成子类实例的代码。
let cp = new ColorPoint(25,8,'green');cp instanceof ColorPoint //true
cp instanceof Point //true
上面代码中,实例对象cp
同时是ColorPoint
和Point
两个类的实例,这与ES5的行为完全一致。
最后,父类的静态方法也会被继承。
class A {static hello(){console.log('hello worle');}
}class B extends A {}B.hello() //hello
上面代码中hello()
是A
的静态方法,B
继承A
,也继承了A
的静态方法。
转载于:https://www.cnblogs.com/guolintao/p/9012386.html
ES6 class继承相关推荐
- ES6 类继承 和 super的使用
ES6继承 详细类容参考:http://es6.ruanyifeng.com/#do... 1.super()使用 class A {construcor(a, b) {this.a = a;this ...
- ES5和ES6的继承有哪些优劣?
突然看到继承,感觉对这个概念有点模糊,掌握的知识点不太全面牢固,所以才有了这篇博客. 在我的印象里,ES5的继承我只知道三种:通过构造函数继承.通过原型链继承.通过构造函数和原型链组合继承 对ES6的 ...
- ES5的继承和ES6的继承
ES5 的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this(Parent.apply(this)) ES6 的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父 ...
- 学习es6的继承与原型链
es6出现了class类但是此类非彼类和java不一样 上代码 这是typescript未编译的样子 class Pepole{age:number=nullname:string="&qu ...
- React 项目 -ES6 语法类的继承 (10)
在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...
- ES6新特性5:类(Class)和继承(Extends)
本文摘自ECMAScript6入门,转载请注明出处. 一.类(Class) 1.基本语法 JavaScript语言的传统方法是通过构造函数,定义并生成新对象.下面是一个例子 function Poin ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES5 和ES6 继承机制
为什么80%的码农都做不了架构师?>>> ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this)).ES ...
- es6 原生构造函数的继承
原生构造函数的继承 原生构造函数是指语言内置的构造函数,通常用来生成数据结构.ECMAScript 的原生构造函数大致有下面这些. Boolean() Number() String() Array( ...
- es6 Class 的继承简介
简介 ES6 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多. class Point { } class ColorPoint exten ...
最新文章
- php网站怎么伪静态,php怎么实现网页伪静态
- directshow怎样打开摄像头不预览只抓帧_不比不知道,一比还真有差距!四款高性价比家庭智能摄像头对比...
- round robin权重轮循算法实现
- STM32 HAL库 串口DMA(收发)和STM32串口中断接收(接收时间管理机制)+ESP8266 wifi模组通信问题
- SVN提示:由于目标机器积极拒绝,无法连接 的解决方法
- Python应用02--批量往Mysql数据库插入数据
- 2008wsus创建和管理计算机组,Windows Server 2012 R2 WSUS-6:配置计算机组和客户端目标...
- 傅里叶变换matlab案例,基于matlab的傅里叶变换
- C++ WINDOWS下 wchar_t *和char * 相互转化总结篇
- Java使用GDAL
- 用.NET编程风格实现Ajax——Atlas快速入门
- 2021-08-04 Mysql自连接
- Qt Quick事件处理之鼠标 键盘 定时器
- 【ESP 保姆级教程】疯狂传感器篇 —— 案例:ESP8266 + BH1750 + webserver(局域网内查看曲线变化图)
- 共轭(conjugate)
- java entries_Enumerationlt;? extends ZipEntrygt; entries()_学习Java Zip|WIKI教程
- 【自学51单片机】3 -- 硬件基础知识(电容、三极管、74HC245、74HC138三八译码器)介绍和闪烁LED小灯
- 微信支付SDK的使用
- Winetricks最新版本安装
- 【Python数据分析及可视化】美国犯罪监禁数据分析与可视化