js-ES6学习笔记-Class
Posted ZhangCui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-ES6学习笔记-Class相关的知识,希望对你有一定的参考价值。
1、Class之间可以通过extends
关键字实现继承。
class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ‘ ‘ + super.toString(); // 调用父类的toString() } }
上面代码中,constructor
方法和toString
方法之中,都出现了super
关键字,它在这里表示父类的构造函数,用来新建父类的this
对象。
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类没有自己的this
对象,而是继承父类的this
对象,然后对其进行加工。如果不调用super
方法,子类就得不到this
对象。
2、在子类的构造函数中,只有调用super
之后,才可以使用this
关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super
方法才能返回父类实例。
class Point { constructor(x, y) { this.x = x; this.y = y; } } class ColorPoint extends Point { constructor(x, y, color) { this.color = color; // ReferenceError super(x, y); this.color = color; // 正确 } }
3、大多数浏览器的ES5实现之中,每一个对象都有__proto__
属性,指向对应的构造函数的prototype属性。Class作为构造函数的语法糖,同时有prototype属性和__proto__
属性,因此同时存在两条继承链。
(1)子类的__proto__
属性,表示构造函数的继承,总是指向父类。
(2)子类prototype
属性的__proto__
属性,表示方法的继承,总是指向父类的prototype
属性。
class A { } class B extends A { } B.__proto__ === A // true B.prototype.__proto__ === A.prototype // true
这两条继承链,可以这样理解:作为一个对象,子类(B
)的原型(__proto__
属性)是父类(A
);作为一个构造函数,子类(B
)的原型(prototype
属性)是父类的实例。
4、extends
关键字后面可以跟多种类型的值。
class B extends A {
}
上面代码的A
,只要是一个有prototype
属性的函数,就能被B
继承。由于函数都有prototype
属性(除了Function.prototype
函数),因此A
可以是任意函数。
三种特殊情况:
第一种特殊情况,子类继承Object类。
class A extends Object { } A.__proto__ === Object // true A.prototype.__proto__ === Object.prototype // true
这种情况下,A
其实就是构造函数Object
的复制,A
的实例就是Object
的实例。
第二种特殊情况,不存在任何继承。
class A { } A.__proto__ === Function.prototype // true A.prototype.__proto__ === Object.prototype // true
这种情况下,A作为一个基类(即不存在任何继承),就是一个普通函数,所以直接继承Funciton.prototype
。但是,A
调用后返回一个空对象(即Object
实例),所以A.prototype.__proto__
指向构造函数(Object
)的prototype
属性。
第三种特殊情况,子类继承null
。
class A extends null { } A.__proto__ === Function.prototype // true A.prototype.__proto__ === undefined // true
这种情况与第二种情况非常像。A
也是一个普通函数,所以直接继承Funciton.prototype
。但是,A调用后返回的对象不继承任何方法,所以它的__proto__
指向undefined
,即实质上执行了下面的代码。
以上是关于js-ES6学习笔记-Class的主要内容,如果未能解决你的问题,请参考以下文章