ES6中构造函数内super关键字的使用

super关键字用于访问和调用一个对象的父对象上的函数。

super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的。

语法
super([arguments]);
// 调用 父对象/父类 的构造函数

super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法
描述节
在构造函数中使用时,super关键字将单独出现,并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数。

示例
在类中使用super节
以下代码片段来自于 classes sample。在这里插入代码片

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; 
    // ReferenceError,super 需要先被调用!
    
/*
   这里,它调用父类的构造函数的 length, 
   作为Polygon 的 width和 height.
*/ 
    super(length, length);
    
/*
    注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
    忽略这, 这将导致引用错误。
*/
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  } 
}

调用父类上的静态方法节
你也可以用 super 调用父类的静态方法。

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'
删除 super 上的属性将抛出异常节
你不能使用 delete 操作符 加 super.prop 或者 super[expr] 去删除父类的属性,这样做会抛出 ReferenceError。

class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo;
  }
}

new Derived().delete(); 
// ReferenceError: invalid delete involving 'super'.

1.在ES6实现继承中会有constructor构造函数,而实现继承的子类构造函数中必须先调用super()方法,此处的super()为父类的构造方法,而如果不调用,浏览器则会报错。

class Person {
	constructor(name,age){
		this.name=name;
		this.age=age;
	}
}
class Son extends Person{
	constructor(name,age){
		
	}
}
let  son=new Son(); //报错  

报错原因是因为子类没有自己的 this 对象,而是继承父类的 this 对象,然后对其进行加工,而 super
就代表了父类的构造函数。super 虽然代表了父类 Person 的构造函数,但是返回的是子类 Son 的实例,即 super 内部的
this 指的是 Son。正确写法:

class Person {
	constructor(name,age){
		this.name=name;
		this.age=age;
	}
}
class Son extends Person{
	constructor(name,age){
		super(name,age);
	}
}

猜你喜欢

转载自blog.csdn.net/super7150/article/details/88558793
0条评论
添加一条新回复