小庄同学

V1

2022/07/03阅读:22主题:橙心

ES6类的继承

大家好,我是小庄。

今天来梳理一下ES6中的继承。

顺带记录一下其中比较容易遗忘的知识点。

1、extends关键字

实际上,继承的关键是extends:

class myClass{
}
class children extends myClass{
}

分析: 上面通过extends 继承了myClass的所有属性和方法。

2、super关键字

super关键字在类中有两种完全不同的表现形式:

1、代表函数时使用

ES6 要求,子类的构造函数必须执行一次super函数。代表父类的构造函数。作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错。

class A {}
class B extends A {
  constructor() {
    super();
  }
}

上面中super虽然是表示A的构造函数,然而返回的是子类B的实例。即super内部的this指的是B的实例

上面一行话用代码来解释就是:

A.prototype.constructor.call(this)。

2、代表对象时使用

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

虽然个人觉得这种设计无疑会增加程序员对于super的理解难度,但是熟悉就好了。 要区分什么是原型对象和对象本身。

class A {
  constructor() {
    this.a = 2;
  }
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
  get m() {
    return super.a; // undefined
  }
}
let b = new B();
b.m;

super.p()很明显是作为对象使用的,这里就代指父类的原型对象,而p方法是定义在A的原型上面的,所以返回值是2。理所当然调用b.m就取不到值。

这也从侧面说明:constructor()方法一般情况下就是只A本身,而类中的一般方法是定义在类的原型对象上的。


来看另外一个例子:

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}
let b = new B();
b.m() 

猜一猜最后会输出什么,1或者2?

由上面的一些内容推出,调用print方法,而print方法是定义在A类中的,那么打印的值是不是应该为1呢?

答案是2. 这个JS函数的执行作用域有关。

该怎么理解呢?

当函数执行的时候会生成一个作用域,运行到b.m()时,会创建属于m的一个上下文,m里面的this指向他本身,print被调用时,引擎会先在print内部找this.x,没找到就去运行的上一级找,就找到了m,m中也没有就去m定义的上一级找,如果还没找到就一级一级的向上查找,发现constructor中有一个变量x,就终止继续查找。

如果稍微改动一下上面B的代码:

class B extends A {
  constructor() {
    super();
  }
  m() {
    super.print();
  }
}
let b = new B();
b.m() 

此时,答案就是1.

因为B继承了A,B的原型是指向A的,在B中找不到就会去A中找,所以答案是1。

为了加强记忆再看一个实例:

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

请问一个打印值是多少?
有同学很自信的说那不就是 1嘛。

答案是错的。

当在子类B中调用super(); 还记得代表什么吗?

A.prototype.constructor.call(this)。

是的,super.x = 3;其实指的是子类B中x的赋值,相当于 this.x=3。

而在输出super.x时,执行的是A.prototype.x。而A的原型上并没有x所以会输出undefined。

虽然这看起来是有点绕,但还是解释的通。 显然第二次输出的值就是3.

补充助于理解的代码:

class A {
    constructor() {
      this.x = 1;
    }
    test() {
        console.log('这边是测试');
    }
    y = 2
}
  
class B extends A {
    constructor() {
        super();
        this.x = 2;
        // super.x = 3, 其实指的是子类B中x的赋值,相当于 this.x=3
        super.x = 3;
        // super.test = function testFun() {}, 相当于 this.test = function testFun(){}
        super.test = function testFun({
            console.log('执行了这边的测试');
        }
        // super.testB = function() {}, 相当于 this.testB = function(){}
        super.testB = function({
            console.log('这里是修改后的testB函数');
        }
        console.log(super.test());// '这边是测试'
        console.log(super.y);// undefined
        console.log(super.x); // undefined
        console.log(this.x); // 3
    }
    testB() {
        console.log('这里是testB函数');
    }
}

let b = new B();
b.test();   // '执行了这边的测试'
b.testB(); // '这里是修改后的testB函数'

3、类的 prototype 属性和__proto__属性

又到了绕弯的环节,还是那句话熟悉就好了。虽然我觉得这种设计确实不是那么的合理。

类作为构造函数,那么具有prototype 属性也理所当然。那么__proto__属性是哪里来的?

JS万物皆对象,虽然不准确但是类确实也是对象的一种,所以__proto__就来了,有人把__proto__叫做隐式原型,其实不妥。proto__作为JS原型链的桥梁,只是这种属性在不同的浏览器中暴露的程度不同,Google就可以访问对象的__proto。 关于原型链的问题留作以后在单独解释,回到类上来,类同时具有prototype 属性和__proto__属性,那么类的原型链是这样的:

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

你大概会从中看出prototype和__proto__的区别。

这两条继承链,可以这样理解:作为一个对象,子类(B)的原型(__proto__属性)是父类(A);作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。

由此可以看出:

子类的原型__proto__是父类,那么子类的原型的原型就是父类的原型。

4、补充

关注公众号:【深漂程序员小庄】,内含丰富的学习资源和面试经验(不限前端、java、算法),还有学习交流群可加,并且还有各大厂大佬可一起交流学习,一起进步~添加小庄微信,回复【加群】,可加入互联网技术交流群。

分类:

前端

标签:

前端

作者介绍

小庄同学
V1

富途-前端开发