es6中super的用法是什么

169 阅读 0 评论 112 点赞

我是靠谱客的博主超帅棒棒糖，这篇文章主要介绍es6中super的用法是什么，现在分享给大家，希望可以做个参考。

本教程操作环境：windows10系统、ECMAScript 6.0版、Dell G3电脑。

es6中super的用法是什么

第一种情况：super作为函数时，代表父类的构造函数

ES6要求，子类的构造函数，必须执行一次super函数

复制代码class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数，必须执行一次super函数，代表父类的构造函数
  }
}1
2
3
4
5
6
class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数，必须执行一次super函数，代表父类的构造函数
  }
}
登录后复制

注意：虽然super代表父类的构造函数，但此时返回的时B的实例，即super内部的this指的是B的实例，因此super()相当于 A.prototype.constructor.call(this)

复制代码class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B1
2
3
4
5
6
7
8
9
10
11
12
class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B
登录后复制

上述代码中，new.target指向当前正在执行的函数，super()执行的时候，它指向的是子类B的构造函数，而不是父类A的构造函数，也就是说，super()内部的this指向B

super作为函数使用时，必须出现在子类的构造函数constructor中,否则会报错

复制代码class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}1
2
3
4
5
6
class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}
登录后复制

第二种情况：super作为对象时，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

复制代码class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父类的构造函数
    console.log(super.p()); // 2
  }
}
let b = new B();1
2
3
4
5
6
7
8
9
10
11
12
class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父类的构造函数
    console.log(super.p()); // 2
  }
}
let b = new B();
登录后复制

上面代码中，super作为函数时，代表父类的构造方法，作为对象时，指向父类的原型对象，即A.prototype，所以super.p()相当于A.prototype.p()

这里还需要注意，由于 super指向父类的原型，所以在父类实例上的属性或者方法，并不能通过super调用

复制代码class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined1
2
3
4
5
6
7
8
9
10
11
12
class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined
登录后复制

上面代码中，p是父类A实例的属性，super.p 就引用不到它

如果属性是定义在父类的原型上，则使用super就可以访问

复制代码class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();1
2
3
4
5
6
7
8
9
class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();
登录后复制

上面代码中，属性x是定义在父类的原型对象上，所以可以使用super.x来访问

【相关推荐：javascript视频教程、web前端】

以上就是es6中super的用法是什么的详细内容，更多请关注靠谱客其它相关文章！