解读es6 class 中 constructor 方法 和 super 的作用

ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的。
类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。

//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
}
}
等同于

function Point(x, y) {
this.x = x;
this.y = y;
}

Point.prototype.toString = function () {
return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
};

var p = new Point(1, 2);

其中 constructor 方法是类的构造函数,是一个默认方法,通过 new 命令创建对象实例时,class必须要用new命令创建,不然会报错(TypeError: Class constructor Foo cannot be invoked without ‘new’),自动调用该方法。一个类必须有 constructor 方法,如果没有显式定义,一个默认的 consructor 方法会被默认添加。所以即使你没有添加构造函数,也是会有一个默认的构造函数的。一般 constructor 方法返回实例对象 this ,但是也可以指定 constructor 方法返回一个全新的对象,让返回的实例对象不是该类的实例。

class继承中,子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

super 这个关键字,既可以当做函数使用,也可以当做对象使用。这两种情况下,它的用法完全不用。

1. 当做函数使用

class A {} class B extends A { constructor() { super(); // ES6 要求,子类的构造函数必须执行一次 super 函数,否则会报错。 } }

注:在 constructor 中必须调用 super 方法,因为子类没有自己的 this 对象,而是继承父类的 this 对象,然后对其进行加工,而 super 就代表了父类的构造函数。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. 当做对象使用

在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

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()。

通过 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();
}
}

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

上面代码中,super.s() 虽然调用的是 A.prototytpe.s(),但是 A.prototytpe.s()会绑定子类 B 的 this,导致输出的是 2,而不是 1。也就是说,实际上执行的是 super.s.call(this)。
由于绑定子类的 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。

注意,使用 super 的时候,必须显式指定是作为函数,还是作为对象使用,否则会报错。

class A {} class B extends A { constructor() { super(); console.log(super); // 报错 } }

上面代码中,console.log(super); 的当中的 super,无法看出是作为函数使用,还是作为对象使用,所以 JavaScript 引擎解析代码的时候就会报错。这是,如果能清晰的表明 super 的数据类型,就不会报错。

最后,由于对象总是继承其他对象的,所以可以在任意一个对象中,使用 super 关键字。

原文地址:https://www.cnblogs.com/zhx119/p/12118568.html

时间: 2024-10-12 02:34:48

解读es6 class 中 constructor 方法 和 super 的作用的相关文章

详解es6 class语法糖中constructor方法和super的作用

大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性.本文将详细介绍ES6中的类,ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的. function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toSt

react中constructor和super()以及super(props)的区别。

react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 constructor( )--构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法. super( ) --继承 在class方法中,继承是使用 extends 关键字来实现的.子类

react中constructor和super的使用

一:什么时候要用constructor,需要定义state的时候必须要写,要调用super(),而且要传入props参数即super(props).如果不定义state的话,有无constructor没区别. 二:什么时候要调用super,如果要在子类中使用父类的属性和方法,就要调用super(父类接受的参数),即要在constructor中使用this.props的时候就必须要调用super(props). 例如: constructor(){ super(); //没有用到this.prop

React中constructor(props){}究竟是什么,以及super(props)与super()

定义class组件,为什么需要加上 super() ? 我们尝试去掉 super() 看看编译的结果: constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this); } 编译错误: 提示没有在this之前加上super() 其实就是少了super(),导致了this的 Reference Error class MyComponent extends React.Co

iOS中UITextView方法解读

iOS中UITextView方法解读 常用属性解读: @property(nonatomic,assign) id<UITextViewDelegate> delegate; 设置代理属性 @property(nonatomic,copy) NSString *text; textView上的文本 @property(nonatomic,retain) UIFont *font; 设置文本字体 @property(nonatomic,retain) UIColor *textColor; 设置

python高级编程之访问超类中的方法:super()

# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #超类01 #它是一个内建类型,用于访问属于某个对象超类特性 print super#<type 'super'> #如果已习惯于通过直接调用父类将self作为第一参数来访问的特性,可能会出现混乱 #经典方法 class M(object): def s(self): print u'不是超类方法' class S(M): def s(self): M.s(sel

三个案例带你看懂LayoutInflater中inflate方法两个参数和三个参数的区别

版权声明:本文为sang原创文章,转载请注明出处. 目录(?)[+] 关于inflate参数问题,我想很多人多多少少都了解一点,网上也有很多关于这方面介绍的文章,但是枯燥的理论或者翻译让很多小伙伴看完之后还是一脸懵逼,so,我今天想通过三个案例来让小伙伴彻底的搞清楚这个东东.本篇博客我们不讲源码,只看使用.源码的解读会在下一篇博文中带来. inflate方法从大范围来看,分两种,三个参数的构造方法和两个参数的构造方法.在这两类中又有细分,OK,那我们就把各种情况都来演示一遍. 1.三个参数的in

InvocationHandler中invoke()方法的调用问题

转InvocationHandler中invoke()方法的调用问题 Java中动态代理的实现,关键就是这两个东西:Proxy.InvocationHandler,下面从InvocationHandler接口中的invoke方法入手,简单说明一下Java如何实现动态代理的.         首先,invoke方法的完整形式如下: public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {

java.lang.reflect.InvocationHandler中invoke()方法调用时机

Java中动态代理的实现,关键就是这两个东西:Proxy.InvocationHandler,下面从InvocationHandler接口中的invoke方法入手,简单说明一下Java如何实现动态代理的. invoke方法的完整形式如下: public Object invoke(Object proxy, Method method, Object[] args) throws Throwable       {              method.invoke(obj, args);