码迷,mamicode.com
首页 > 其他好文 > 详细

你真的了解[super ]关键字吗?

时间:2019-01-16 14:26:16      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:image   script   return   原型   应用   对象   梳理   href   cdn   

技术分享图片

前言

此篇文章是看了阮老师的es6教程,看到super关键字的时候觉得有必要总结梳理一下,原文还是参考 ECMAScript 6入门

正文

super 这个关键字,既可以当作函数使用,也可以当作对象使用。

1.当作函数使用

super作为函数调用时,代表父类的构造函数。ES6 要求 ,子类的构造函数必须执行一次super函数。

即作为 函数 使用时下面的代码时 固定使用套路
```
class A {
constrctor(){
}
}

class B extends A {
constructor() {
super();
}
}
```
上面代码中的super()代表的谁??

子类 B 的构造函数中的super(),代表 B调用父类 A 的构造函数执行。

注意??: 虽然这里的 super()代表了的 父类 A的构造函数,但是返回的却是 子类 B 的实例,即 super()内部的this 指的是 B, 因此 super() 在这里相当于 A.prototype.constructor.call(this)

用一个大栗子来证明我的论点:

class A {
    constrctor(){
        console.log(new.target.name)
    }
}

class B extends A{
    constructor(){
        super()
    }
}
new A() // A
new B() // B

在这段热气腾腾的代码中, new.target 指向当前正在执行的函数。

啰嗦一下:

new是从构造函数生成的实例对象的命令。ES6 为 new 命令引入了一个 new.target 属性,该属性一般用在构造函数之中,返回new命令作用于的那个构造函数。

可以看到,在 super() 执行时,它指向的是子类 B 的构造函数,而不是父类 A 的构造函数。即 super() 内部的 this 指向的是 B

还有一点需要注意 ?? :

作为函数时,super()只能用在子类的构造函数中,用在其他地方报错。

// 错误写法
class A {}

class B extends A {
   m() {
     super(); // 报错
  }
}

总结一下:

当super 作为函数的时候需要注意以下三点:

  1. 子类的构造函数必须执行一次super函数。
// 再次重申,这是固定写法
class A {
 constructor() {}
}

class B extends A {
  constructor() {
    super();// 这里表示 A.constructor()
  }
}
  1. 子类的构造函数中的super()代表的是 子类调用父类的构造函数执行,这时候 super()中的this,即 父类.constructor 中的 this ,指向的是子类。

3.super()只能用在子类的构造函数之中,用在其他地方就会报错。

2.super作为对象时

super 作为对象时,在普通方法中,指向父类的原型对象,在静态方法中指向父类。

2.1 super作为对象在普通方法中应用

上代码:

class A {
    p(){
        return 2
    }
}

class B extends A {
    constrctor(){
        super();
        console.log(super.p());//2
    }
}

let b = new B();

我们发现 在子类 Bsuper.p()执行结果为2。我们猜测这里的supsuper.p === A.prototype.p,验证一下发现结果是 true

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p===A.prototype.p); // true
  }
}

let b = new B();

也就是说这个时候 super 在普通的方法中,指向的是 A.prototype即子类中的super指向父类的原型对象。

??注意点 1. :由于子类中的super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。

class A {
   constructor() {
    this.s = 3;
   }
}

A.prototype.x = 2;

class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2  这里可以获取到父类原型上的x属性
  }
  
  get m(){
    return super.s
  }
}

let b = new B();
console.log(b.m)// undefined  不能获取到定义在父类实例上的s属性

通过上面的代码我们发现:

子类 B 可以通过super获取到父类定义在原型上的属性,但是定义在父类 A的实例上的属性,无法获取到。

注意点2??:this指向

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();// 这里等同于 A.proptotype.print()
  }
}

let b = new B();
b.m() // 2

上面代码中,super.print() 虽然调用的是A.prototype.print(),但是 A.prototype.print() 内部的this指向子类B的实例,导致输出的是2,而不是1。也就是说,实际上执行的是 super.print.call(this)

注意点3??:通过super进行赋值操作

由于 this 指向子类实例,所以如果通过 super 对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;// 此时的 super 就是 b
    console.log(super.x); // undefined 等用于是 A.prototype.x
    console.log(this.x); // 3
  }
}

let b = new B();

通过这两段代码我们发现了一个问题,当我通过 super 取值的时候取的是父类的原型上属性,但是当我通过 super 赋值的时候这时候 super 指向的是子类的实例。

总结一下:

通过上面的三个栗子得出,
super作为对象在普通方法中应用时:

  1. 子类中的super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。
  2. 在子类普通方法中通过 super 调用父类的方法时,方法内部的 this 指向当前的子类实例。
  3. 通过 super 对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。

2.2 super作为对象在静态方法中应用

如果 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 指的是父类,Parent
    super.myMethod(msg);
  }

  myMethod(msg) {
  // 普通函数 此时 super 是指 Parent.prototype
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

上面代码中,super在静态方法之中指向父类,在普通方法之中指向父类的原型对象。

注意点1 ??

在子类的静态方法中通过 super 调用父类的方法时,方法内部的 this 指向当前的子类,而不是子类的实例。

class A {
  constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  static m() {
    super.print();// A.print 中的this指向当前的子类
  }
}

B.x = 3;
B.m() // 3

上面代码中,静态方法 B.m 里面,super.print指向父类的静态方法。这个方法里面的 this 指向的是 B,而不是 B 的实例。

总结一下:

在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。

总之

  1. super作为函数,super()代表的就是父类构造函数,里面的this就是类的实例。
  2. super作为对象,在普通的方法中super.的语法指向的是父类的原型对象,在静态方法中使用super.语法的话就去父类的静态方法中找就行了。至于this指向问题,记住一点:如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,所以静态方法中的this只会指类而不是实例。

你真的了解[super ]关键字吗?

标签:image   script   return   原型   应用   对象   梳理   href   cdn   

原文地址:https://www.cnblogs.com/chenshufang/p/10276662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!