java script中extends,JavaScript继承之ES6的extends
基本用法
ES6中有关class的继承方式,引入了extends关键字。但其本质仍然是构造函数+原型链的组合式继承。
例子:
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
class B extends A {
constructor(name, age) {
super(name, age);
this.job = "IT";
}
getJob() {
return this.job;
}
getNameAndJob() {
return super.getName() + this.job;
}
}
var b = new B("Tom", 20);
console.log(b.name);
console.log(b.age);
console.log(b.getName());
console.log(b.getJob());
console.log(b.getNameAndJob());
//输出:Tom,20,Tom,IT,TomIT
重点解析之extends关键字
上面代码定义了一个B类(class),该类通过extends关键字,继承了A类的所有属性和方法。A类中的所有方法默认是添加到B的原型上,所以extends继承的实质仍然是原型链。
测试代码:
console.log("constructor" in b);
console.log("getName" in b);
console.log(b.hasOwnProperty("getName"));
console.log(b.hasOwnProperty("constructor"));
//输出:true,true,false,false
重点解析之super关键字
super这个关键字,既可以当作函数使用,也可以当作对象使用。当作函数使用时,super代表父类的构造函数,并在子类中执行Parent.apply(this),从而将父类实例对象的属性和方法,添加到子类的this上面。以下三点需要特别注意:
1、子类必须在constructor方法中调用super方法,如果子类没有定义constructor方法,constructor方法以及其内部的super方法会被默认添加。
测试代码:
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
}
class B extends A {}
var b = new B("Tom", 20);
console.log(b.name);
console.log(b.age);
console.log(b.getName());
console.log(b.hasOwnProperty("name"));
//输出:Tom,20,Tom,true
2、在子类的constructor方法中,只有调用super之后,才可以使用this关键字,否则会报错。
测试代码:
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
class B extends A {
constructor(name, age) {
this.job = "IT";
super(name, age);
}
}
var b = new B("Tom", 20)
//输出:报错
3、super()只能用在子类的constructor方法之中,用在其他地方就会报错。
测试代码:
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
class B extends A {
toStr(name, age) {
super(name, age)
}
}
var b = new B("Tom", 20)
//输出:报错
super作为对象时,在子类中指向父类的原型对象。
即super=Parent.prototype。
测试代码:
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
console.log(this.name);
}
}
A.prototype.n = 2;
class B extends A {
constructor(name, age) {
super(name, age);
}
toStr() {
return super.n;
}
activeGetName() {
super.getName();
}
}
var b = new B("Tom", 20);
console.log(b.toStr());
console.log(b.activeGetName());
//输出:2,Tom
重点解析之静态方法的继承
在一个方法前加上关键字static,就表示该方法不会被实例继承,但是父类的静态方法,会被子类继承。
例子:
class A {
static say() {
console.log("hello");
}
}
class B extends A {}
console.log(B.say());
//输出:hello
也可以使用super在子类的静态方法中调用父类的静态方法。super在静态方法中指向父类本身,而不是父类的原型对象。
例子:
class A {
static say() {
console.log("hello");
}
}
class B extends A {
static toStr() {
super.say();
}
}
var b = new B();
console.log(B.toStr());
//输出:hello
继承表达式的类
类不但可以继承自其他类,也可以继承表达式。只要表达式可以被解析为一个函数并且通过new关键字可以创建新的实例对象即可。
例子1:
继承传统形式的构造函数
let Obj = function(name) {
this.name = name;
}
Obj.prototype.getName = function() {
console.log(this.name);
}
class Person extends Obj {
constructor(name, age) {
super(name);
this.age = age;
}
}
const p = new Person("Tom", 19);
console.log(p.name); //输出:Tom
console.log(p.age); //输出:19
p.getName(); //输出:Tom
例子2:
继承函数返回结果
let fn = function() {
return class Person {
constructor(name) {
return {
name
}
}
}
}
class SomeOne extends fn() {
constructor(name) {
super(name);
}
}
let p = new SomeOne("Tom");
console.log(p.name); //输出:Tom
New.target
我们知道,函数内部有一个new.target对象用于判断函数是否通过new关键字调用。类构造函数也可以通过new.target来确定类的调用形式。
例子:
class Obj {
//new Obj()时,new.target的值为 Obj
constructor() {
if (new.target === Obj) {
console.log("不可以直接调用基类!");
}
}
fn() {
console.log(this.name);
}
}
class Person extends Obj {
//new Person("Tom")时,new.target的值为 Person
constructor(name) {
super();
this.name = name;
}
}
let p1 = new Person("Tom");
p1.fn(); //输出:Tom
let p2 = new Obj(); //输出:不可以直接调用基类!
*因为类必须通过new关键字调用,所以在类的构造函数中new.target的值永远不会是undefined。
文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。
java script中extends,JavaScript继承之ES6的extends相关推荐
- java script中==和===_Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑...
判断两个变量是否相等在任何编程语言中都是非常重要的功能. JavaScript 提供了 == 和 === 两种判断两个变量是否相等的运算符,但我们开始学习的时候 JavaScript 的时候,就被一遍 ...
- java script中定义的var变量怎么在body中使用,深入分析JavaScriptvar中的预解析与副作用...
var的副作用 隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力. 通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的. 无var创建的隐式 ...
- Java Script中常见操作
字符串常见操作: obj.length 长度 obj.trim() 移除空白 obj.trimLeft() obj.trimRight) obj.charAt(n) 返回字符串中的第n个字符 obj. ...
- java script中==和===_Java Script与CSS的问题
本文:有一个最小值和一个最大值当最小值和最大值均为0-100的整数的话显示出最小值到最大值之间的所有整数追加条件:被显示的整数如果是「3」的倍数的话,在数字后加「A」被显示的整... 本文: 有一个最 ...
- java父类转子类_java中什么是继承,和继承的接口的关系?
继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父 ...
- java中什么是继承,和继承的接口的关系?
继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父 ...
- java 执行js selenium_如何在Selenium WebDriver Java中使用JavaScript
根据您之前的问题,我想您想要从Java的WebDriver运行JavaScript代码段.如果我错了,请纠正我. WebDriverJs实际上是"只是"另一种WebDriver语言 ...
- Java继承_Hachi君浅聊Java三大特性之 封装 继承 多态
Hello,大家好~我是你们的Hachi君,一个来自某学院的资深java小白.最近利用暑假的时间,修得满腔java语言学习心得.今天小宇宙终于要爆发了,决定在知乎上来一场根本停不下来的Hachi君个人 ...
- 十三、java类的封装、继承、多态
面向对象的三个基本特性就是:封装.继承和多态. 前面讲解了java 程序都是由类文件组成的,java是面向对象的程序设计语言,在java中面向对象的思想就是由类的设计来体现的,也即类的继承.封装和多态 ...
最新文章
- D进制转换-C++实现
- JDI考虑让日本国内部分工厂停工 因苹果公司需求低迷
- 解决vscode打开空白的问题
- Loading 加载中 图片素材
- 基于易班API的Java开发入门教程
- 非常详细的范式讲解(1NF/2NF/3NF/BCNF)
- java写宽带连接.adsl拨号,并且检测断线自动重新连接,更换ip
- 无私数据分享:Chartboost的使用
- 红米note5解锁教程_红米note手机密码忘了怎么解锁
- 微信小程序标题栏加logo–基于IView-weapp
- 烽火狼烟丨VMware Workspace ONE Access身份验证绕过、本地提权漏洞风险提示
- Codevs 侦探推理
- mysql relaylog_MySQL relay log 详细参数解释
- Android FTP功能开发基于swiftp
- 云时代下主机安全防护建设,用RS-CDPS就够了
- p2.第一章 Python基础入门 -- 冯诺依曼体系和计算机基础 (二)
- Sentinel @SentinelResource 详解
- 万能数据库查询分析器使用技巧之(十六)
- 设置计算机访问权限密码忘了怎么办,电脑上设置的密码忘记了怎么办
- Firefox浏览器页面输出为pdf文件/Win7Win8系统没有Microsoft print to pdf/微信公众号文章输出为pdf文件
热门文章
- oracle异地接管,群集的接管和故障恢复 - 
Oracle® ZFS Storage Appliance 管理指南,发行版 OS8.6.0...
- 小程序如何本地去水印,基于很多小白写的教程
- 化工厂人员定位系统--化工厂定位--新导智能
- html svg标签中插入img image标签不显示的问题
- SOLID原理的详细信息。
- 用Python实现序列帧播放器
- Ble Mesh技术(一)之概览
- FontStruct——制作你自己的个性化字体
- 分享时的缩略图不显示问题
- Qt笔记(五十七)之显示图片缩略图