es6 super关键字的理解与应用实例分析

本文实例讲述了es6 super关键字的理解与应用。分享给大家供大家参考,具体如下:

前面介绍了static关键字,class类还有另外一个关键字super

super不仅仅是一个关键字,还可以作为函数和对象。

函数:在子类继承父类中,super作为函数调用,只能写在子类的构造函数(constructor)里面,super代表的是父类的构造函数,

难点理解

但是执行过时supre()代表的是子类,super()里面的this指向子类的实例对象this。

class A {
 constructor() {
  console.log(new.target.name);
 }
}
class B extends A {
 constructor() {
  super();//这里的super相当于A类的constructor构造函数,会执行A的constructor,但是此时的this指
      //向的是B,所以打印出B
      //换一种方法理解是:在执行super时,A把constructor方法给了B,此时B有了A的功能,但是执
      //行的是B的内容,也就是es5的A.prototype.constructor.call(this)。
 }
}
new A() // A
new B() // B

对象:

这里重点理解下对象,概念相对抽象

super作为对象使用时,分为在普通方法中使用和在静态方法中使用

在普通方法找中使用:super指向父类的原型,即A.prototype,可以访问到原型上的方法和属性

逻辑抽象一:

ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。

class A {
 constructor() {
  this.x = 1;
 }
 print() {
  console.log(this.x);
 }
}
class B extends A {
 constructor() {
  super();
  this.x = 2;
 }
 m() {
  super.print();
 }
}
let b = new B();
b.m() // 2

super.print()虽然调用的是A.prototype.print(),但是A.prototype.print()内部的this指向子类B的实例

super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。

class Parent {
 static myMethod(msg) {
  console.log('static', msg);
 }
 myMethod(msg) {
  console.log('instance', msg);
 }
}
class Child extends Parent {
 static myMethod(msg) {
  super.myMethod(msg);
 }
 myMethod(msg) {
  super.myMethod(msg);
 }
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2020-02-13

ES6 javascript中class类的get与set用法实例分析

本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

es6新特性之 class 基本用法解析

javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. es6 class 与es5的面向对象的区别: 1. 写法不同,使用关键字class 2.当new一个实例,默认有一个constructor方法,且默认返回实例对象(this),也可以返回另一对象 3.类的所有方法都在prototype属性上,但是不

解读ES6中class关键字

class是es6引入的最重要特性之一.在没有class之前,我们只能通过原型链来模拟类. 1 .介绍  //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } Point类除了构造方法,还定义了一个toString方法.注意,定义"类"的方法的时候,前面不需要加上function这个关键字,

es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析

本文实例讲述了es6中class类静态方法,静态属性,实例属性,实例方法.分享给大家供大家参考,具体如下: es6新增了一种定义对象实例的方法,使用class关键字定义类,与class相关的知识点也逐步火热起来,但是部分理解起来相对抽象,简单对class相关的知识点进行总结,更好的使用class.对于基本概念,请参见阮一峰老师的es6入门教程.本文主要总结class静态相关. 关于类有两个概念,1,类自身,:2,类的实例对象 总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是

JavaScript ES6中CLASS的使用详解

前言 对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成"构造函数"的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复

ES6 Class中实现私有属性的一些方法总结

私有属性 私有属性是面向对象编程(OOP)中非常常见的一个特性,一般满足以下的特点: 能被class内部的不同方法访问,但不能在类外部被访问: 子类不能继承父类的私有属性. 备胎Class 时间回到四年前,2015年6月,ES6发布成为标准,为了纪念这个历史性时刻,这个标准又被称为ES2015,至此,JavaScript中的class从备胎中转正.在这之前,class一直作为JS的关键字,雪藏不见天日. class被认为是JS的一种语法糖,它为JavaScript带来了用面向对象的思想描述一个实

ES6入门教程之Class和Module详解

本文主要介绍了ES6中Class和Module的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.Class ES6引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. // 定义类 class Point() { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var point = new

ES6 javascript中class静态方法、属性与实例属性用法示例

本文实例讲述了ES6 javascript中class静态方法.属性与实例属性用法.分享给大家供大家参考,具体如下: 类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承. 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为" 静态方法". class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo

深入浅析ES6 Class 中的 super 关键字

以下只是个人的学习笔记: super这个关键字,既可以当作函数使用,也可以当作对象使用.在这两种情况下,它的用法完全不同. 1.当作函数使用 class A {} class B extends A { constructor() { super(); //ES6 要求,子类的构造函数必须执行一次super函数. } } 注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.construc

ES6 javascript中Class类继承用法实例详解

本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

Java中Properties类的操作实例详解

Java中Properties类的操作实例详解 知识学而不用,就等于没用,到真正用到的时候还得重新再学.最近在看几款开源模拟器的源码,里面涉及到了很多关于Properties类的引用,由于Java已经好久没用了,而这些模拟器大多用Java来写,外加一些脚本语言Python,Perl之类的,不得已,又得重新拾起.本文通过看<Java编程思想>和一些网友的博客总结而来,只为简单介绍Properties类的相关操作.  一.Java Properties类 Java中有个比较重要的类Properti

java中静态导入机制用法实例详解

java中静态导入机制用法实例详解 这里主要讲解了如何使用Java中静态机制的用法,这里提供了简单实例大家可以参考下. 静态常量类 在java开发中,我们会经常用到一些静态常量用于状态判断等操作.为了能够在多个地方复用这些常量,通常每个模块都会加一个常量类,举个简单的列子: import com.sky.OrderMouleConsstants; /** * Created by gantianxing on 2017/4/21. */ public class Test { public vo

Android中TelephonyManager类的用法案例详解

本文以案例形式分析了Android中TelephonyManager类的用法.分享给大家供大家参考.具体如下: 目录结构: main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="ve

ES6中Set和Map用法实例详解

本文实例讲述了ES6中Set和Map用法.分享给大家供大家参考,具体如下: Set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. // 例一 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)); fo

JAVA中的final关键字用法实例详解

本文实例讲述了JAVA中的final关键字用法.分享给大家供大家参考,具体如下: 根据上下文环境,java的关键字final也存在着细微的区别,但通常指的是"这是无法改变的."不想改变的理由有两种:一种是效率,另一种是设计.由于两个原因相差很远,所以关键子final可能被误用. 接下来介绍一下使用到final的三中情况:数据,方法,类 final数据 许多编程语言都有某种方法,来向编译器告知一块数据是恒定不变的.有时数据的恒定不变是很有用的,例如: 1. 一个编译时恒定不变的常量 2.

C#中构造函数和析构函数用法实例详解

本文实例讲述了C#中构造函数和析构函数用法.分享给大家供大家参考,具体如下: 构造函数与析构函数是一个类中看似较为简单的两类函数,但在实际运用过程中总会出现一些意想不到的运行错误.本文将较系统的介绍构造函数与析构函数的原理及在C#中的运用,以及在使用过程中需要注意的若干事项. 一.构造函数与析构函数的原理 作为比C更先进的语言,C#提供了更好的机制来增强程序的安全性.C#编译器具有严格的类型安全检查功能,它几乎能找出程序中所有的语法问题,这的确帮了程序员的大忙.但是程序通过了编译检查并不表示错误

JavaScript代理模式原理与用法实例详解

本文实例讲述了JavaScript代理模式原理与用法.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理 具体看下面的例子 第一,普通代理模式 步骤一,接口检验文件的引用 //定义一个静

JavaScript命令模式原理与用法实例详解

本文实例讲述了JavaScript命令模式原理与用法.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命

JavaScript函数节流概念与用法实例详解

本文实例讲述了JavaScript函数节流概念与用法.分享给大家供大家参考,具体如下: 最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> <html> <head> <title>Throttle</title> </head> <body> <script type="text