java script中extends,JavaScript继承之ES6的extends

基本用法

ES6中有关class的继承方式，引入了extends关键字。但其本质仍然是构造函数+原型链的组合式继承。

例子：

class A {

constructor(name, age) {

this.name = name;

this.age = age;

}

getName() {

return this.name;

}

}

class B extends A {

constructor(name, age) {

super(name, age);

this.job = "IT";

}

getJob() {

return this.job;

}

getNameAndJob() {

return super.getName() + this.job;

}

}

var b = new B("Tom", 20);

console.log(b.name);

console.log(b.age);

console.log(b.getName());

console.log(b.getJob());

console.log(b.getNameAndJob());

//输出：Tom，20，Tom，IT，TomIT

重点解析之extends关键字

上面代码定义了一个B类(class)，该类通过extends关键字，继承了A类的所有属性和方法。A类中的所有方法默认是添加到B的原型上，所以extends继承的实质仍然是原型链。

测试代码：

console.log("constructor" in b);

console.log("getName" in b);

console.log(b.hasOwnProperty("getName"));

console.log(b.hasOwnProperty("constructor"));

//输出：true，true，false，false

重点解析之super关键字

super这个关键字，既可以当作函数使用，也可以当作对象使用。当作函数使用时，super代表父类的构造函数，并在子类中执行Parent.apply(this)，从而将父类实例对象的属性和方法，添加到子类的this上面。以下三点需要特别注意：

1、子类必须在constructor方法中调用super方法，如果子类没有定义constructor方法，constructor方法以及其内部的super方法会被默认添加。

测试代码：

class A {

constructor(name, age) {

this.name = name;

this.age = age;

}

getName() {

return this.name;

}

}

class B extends A {}

var b = new B("Tom", 20);

console.log(b.name);

console.log(b.age);

console.log(b.getName());

console.log(b.hasOwnProperty("name"));

//输出：Tom，20，Tom，true

2、在子类的constructor方法中，只有调用super之后，才可以使用this关键字，否则会报错。

测试代码：

class A {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

class B extends A {

constructor(name, age) {

this.job = "IT";

super(name, age);

}

}

var b = new B("Tom", 20)

//输出：报错

3、super()只能用在子类的constructor方法之中，用在其他地方就会报错。

测试代码：

class A {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

class B extends A {

toStr(name, age) {

super(name, age)

}

}

var b = new B("Tom", 20)

//输出：报错

super作为对象时，在子类中指向父类的原型对象。

即super=Parent.prototype。

测试代码：

class A {

constructor(name, age) {

this.name = name;

this.age = age;

}

getName() {

console.log(this.name);

}

}

A.prototype.n = 2;

class B extends A {

constructor(name, age) {

super(name, age);

}

toStr() {

return super.n;

}

activeGetName() {

super.getName();

}

}

var b = new B("Tom", 20);

console.log(b.toStr());

console.log(b.activeGetName());

//输出：2，Tom

重点解析之静态方法的继承

在一个方法前加上关键字static，就表示该方法不会被实例继承，但是父类的静态方法，会被子类继承。

例子：

class A {

static say() {

console.log("hello");

}

}

class B extends A {}

console.log(B.say());

//输出：hello

也可以使用super在子类的静态方法中调用父类的静态方法。super在静态方法中指向父类本身，而不是父类的原型对象。

例子：

class A {

static say() {

console.log("hello");

}

}

class B extends A {

static toStr() {

super.say();

}

}

var b = new B();

console.log(B.toStr());

//输出：hello

继承表达式的类

类不但可以继承自其他类，也可以继承表达式。只要表达式可以被解析为一个函数并且通过new关键字可以创建新的实例对象即可。

例子1：

继承传统形式的构造函数

let Obj = function(name) {

this.name = name;

}

Obj.prototype.getName = function() {

console.log(this.name);

}

class Person extends Obj {

constructor(name, age) {

super(name);

this.age = age;

}

}

const p = new Person("Tom", 19);

console.log(p.name); //输出：Tom

console.log(p.age); //输出：19

p.getName(); //输出：Tom

例子2：

继承函数返回结果

let fn = function() {

return class Person {

constructor(name) {

return {

name

}

}

}

}

class SomeOne extends fn() {

constructor(name) {

super(name);

}

}

let p = new SomeOne("Tom");

console.log(p.name); //输出：Tom

New.target

我们知道，函数内部有一个new.target对象用于判断函数是否通过new关键字调用。类构造函数也可以通过new.target来确定类的调用形式。

例子：

class Obj {

//new Obj()时，new.target的值为 Obj

constructor() {

if (new.target === Obj) {

console.log("不可以直接调用基类！");

}

}

fn() {

console.log(this.name);

}

}

class Person extends Obj {

//new Person("Tom")时，new.target的值为 Person

constructor(name) {

super();

this.name = name;

}

}

let p1 = new Person("Tom");

p1.fn(); //输出：Tom

let p2 = new Obj(); //输出：不可以直接调用基类！

*因为类必须通过new关键字调用，所以在类的构造函数中new.target的值永远不会是undefined。

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。