博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
es6 class 中 constructor 方法 和 super
阅读量:4615 次
发布时间:2019-06-09

本文共 3326 字,大约阅读时间需要 11 分钟。

首先,ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的。
《1》constructor
function Point(x, y) {    this.x = x;    this.y = y;    //console.log("初始化自动执行");}Point.prototype.toString = function() {    return '(' + this.x + ',' + this.y + ')';}var p = new Point();console.log(p);等同于class Point{    constructor(x, y) {        this.x = x;     //在new Point()对象自身属性        this.y = y;        // console.log("初始化自动执行");    }    hello() {           //在new Point()对象prototype上的属性        return '(' + this.x + ',' + this.y + ')';    }}var class_p = new Point();console.log(class_p)
 
1.其中 constructor 方法是类的构造函数,是一个默认方法,通过 new 命令创建对象实例时,
自动调用该方法
2.一个类必须有 constructor 方法,如果没有显式定义,一个默认的 consructor 方法会被默认添加。
所以即使你没有添加构造函数,也是会有一个默认的构造函数的。
3.一般 constructor 方法返回实例对象 this;但是也可以指定 constructor 方法返回一个全新的对象,让返回的实例对象不是该类的实例。
 
《2》super 关键字的作用
  
super代表父类的构造函数,但是作为函数使用返回的是子类  的实例;作为对象使用的时候,注意内部this绑定子类实例
  super 这个关键字,既可以当做函数使用,也可以当做对象使用。
 
1. 当做函数使用 
class A {    constructor() {        console.log("父类构造函数")    }}class B extends A {    constructor() {        super();  //注意:ES6 要求,子类的构造函数constructor 必须执行一次 super 函数,否则会报错!!!!!!!    }}
注意:
   1.在子类的 constructor 中必须调用 super 方法,
    因为子类没有自己的 this 对象,而是继承父类的 this 对象,然后对其进行加工,而 super 就代表了父类的构造函数。
 
   2.super 虽然代表了父类 A 的构造函数,但是返回的是子类 B 的实例
    即 super 内部的 this 指的是 B,因此 super() 在这里相当于 A.prototype.constructor.call(this, props)。
      class A {
        constructor() {
          console.log(new.target.name); // new.target 指向当前正在执行的函数
        }
      }
      class B extends A {
        constructor(){
          super();
        }
      }
      new A(); // A
      new B(); // B
  可以看到,在 super() 执行时,它指向的是 子类 B 的构造函数,而不是父类 A 的构造函数。也就是说,super() 内部的 this 指向的是 B。
 
《2》当做对象使用
1.在普通方法中,指向父类的原型对象;在静态方法中,指向父类。 class A {    c() {        return 2;    }}class B extends A {    constructor() {        super();        console.log(super.c()); // 2    }}let b = new B();上面代码中,子类 B 当中的 super.c(),就是将 super 当作一个对象使用。这时,super 在普通方法之中,指向 A.prototype,所以 super.c() 就相当于 A.prototype.c()。2.通过 super 调用父类的方法时,super 会绑定子类的 this。class A {    constructor() {        this.x = 1;    }    s() {        console.log(this.x);    }}class B extends A {    constructor() {        super();        this.x = 2;    }    m() {        super.s(); //通过 super 调用父类的方法时,super 会绑定子类的 this。    }}let b = new B();b.m(); // 2上面代码中,super.s() 虽然调用的是 A.prototytpe.s(),但是 A.prototytpe.s()会绑定子类 B 的 this,导致输出的是 2,而不是 1。也就是说,实际上执行的是 super.s.call(this)。3.由于绑定子类的 this,所以如果通过 super 对某个属性赋值,这时 super 就是 this,赋值的属性会变成子类实例的属性。class A {    constructor() {        this.x = 1;    }}class B extends A {    constructor() {        super();        this.x = 2;        super.x = 3;        console.log(super.x); // undefined        console.log(this.x); // 3    }}let b = new B();上面代码中,super.x 赋值为 3,这时等同于对 this.x 赋值为 3。而当读取 super.x 的时候,调用的是 A.prototype.x(),但并没有 x 方法,所以返回 undefined。《3》注意  1.由于对象总是继承其他对象的,所以可以在任意一个对象中,使用 super 关键字。  2.ES6 要求,子类的构造函数constructor 《必须执行一次》 super 函数,否则会报错!!!!!!!  3.使用 super 的时候,《必须显式》指定是作为函数,还是作为对象使用,否则会报错    class A {}      class B extends A {          constructor() {            super();    //注意点1,必须执行一次super()函数            console.log(super); // 报错      }  }
  上面代码中,console.log(super); 的当中的 super,无法看出是作为函数使用,还是作为对象使用,
  所以 JavaScript 引擎解析代码的时候就会报错,这时,如果能清晰的表明 super 的数据类型,就不会报错。

  

 
 

转载于:https://www.cnblogs.com/changxue/p/9770334.html

你可能感兴趣的文章
nrf51 SDK自带例程的解读
查看>>
SESSION技术
查看>>
数据结构(五)之直接插入排序
查看>>
SQL函数——LENGTH()和LENGTHB()
查看>>
vim - manual -个人笔记
查看>>
详解Javascript中prototype属性(推荐)
查看>>
angularjs实现首页轮播图
查看>>
Git 对象 和checkout 和stash的笔记
查看>>
团队项目总结2-服务器通信模型和顺序图
查看>>
hdu 1085 Holding Bin-Laden Captive!
查看>>
[周记]8.7~8.16
查看>>
递归定义
查看>>
kindeditor 代码高亮设置
查看>>
图的邻接表存储
查看>>
2018 leetcode
查看>>
各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
查看>>
PHP中获取当前页面的完整URL
查看>>
所谓输入掩码技术,即只有数字键起作用
查看>>
Display对象,Displayable对象
查看>>
安装oracle11G,10G时都会出现:注册ocx时出现OLE初始化错误或ocx装载错误对话框
查看>>