Class 的那些事儿
类
ES6 引入了Class（类）这个概念，作为对象的模板，通过class关键字，可以定义类。
class Point {
constructor(x,y) {
this.x = x;
this.y = y;
}
}
- 类的数据类型就是函数，类本身就是指向构造函数。
- 使用的时候，也是直接对类使用
new命令，跟构造函数的用法完全一致。 - 在
ES6中，类的所有方法都定义在类的prototype属性上面。
class Point {
constructor () {
// do sth
}
toValue () {
// do sth
}
}
// 等同于
Point.prototype = {
construcror () {},
toValue () {}
}
- 在类的实例上面调用方法，其实就是调用原型上的方法。
class B ()
let b = new B();
b.constructor === B.prototype.constructor; // true
-
prototype对象的constructor属性，直接指向“类”的本身。
class MyPoint{
constructor(props){
this.x = props.x;
this.y = props.y;
}
}
var myPoint = new MyPoint({x:1,y:2});
myPoint.constructor === MyPoint; // => true
MyPoint.prototype.constructor === MyPoint; // => true
- 类的内部所有定义的方法，都是不可枚举的。（non-enumerable）
class MyPoint {
constructor(props) {
this.x = props.x;
this.y = props.y;
}
sum() {
console.log(this.x + this.y);
}
}
var myPoint = new MyPoint({
x: 1,
y: 3
});
myPoint.sum(); // => 4
var keys = Object.keys(MyPoint.prototype);
console.log(keys); // => []
constructor 方法
constructor方法是默认方法，通过new命令生成对象实例时，自动调用该方法，一个类必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加。
class MyPoint {
}
// 等同于
class MyPoint {
constructor(){}
}
-
js引擎会自动为它添加一个空的constructor方法。 -
constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象
class Foo{
constructor(){
var p = {x:'scp'};
return Object.create(p); // 返回一个全新的对象
}
}
// 实例对象不是Foo类的实例
console.log(new Foo instanceof Foo); // => false
// 查询实例对象的原型对象是 上边定义的 p
console.log(Object.getPrototypeOf(new Foo)); // => {x:"scp"}
类的实例
- 类必须使用
new调用，否则会报错 - 实例的属性除非显式定义在其本身（即定义在
this对象上），否则都是定义在原型上（即class上）
class MyPoint {
constructor(props) {
this.x = props.x;
this.y = props.y;
}
sum() {
console.log(this.x + this.y);
}
}
var myPoint = new MyPoint({
x: 1,
y: 3
});
console.log(myPoint.hasOwnProperty('x')); // => true
console.log(myPoint.hasOwnProperty('sum'));// => false
console.log(myPoint.__proto__.hasOwnProperty('sum')); // => true
如上，x是实例对象myPoint自身的属性，sum是定义在原型对象上的属性
继承
Class可以通过 extends关键字实现继承
-
ChildrenPoint中的constructor方法中出现的super关键字表示父类的构造函数，用来新建父类的this对象。 -
子类必须在
constructor中调用super方法，否则新建实例时会报错，这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法，如果不调用super方法，子类就得不到this对象。 -
在子类构造函数中，只有调用
super之后，才可以使用this关键字否则报错，这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。 -
ES6的继承机制，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
class MyPoint {
constructor(props) {
this.x = props.x;
this.y = props.y;
}
sum(...values) {
console.log(values);
let summation = values.reduce((prev,cur) => prev + cur,0);
console.log(summation);
}
}
// 继承
class ChildrenPoint extends MyPoint{
constructor(props,cProps){
super(props); // 调用父类的constructor(props)
this.w = props.w
this.z = cProps.z;
}
}
var cPoint = new ChildrenPoint({x:1,y:2,w:3},{z:4});
cPoint.sum(...Object.values(cPoint)); // => 10
Object.getPrototypeOf()
该方法可以用来从子类上获取父类，可以使用这个方法判定，一个类是否继承了另一个类
console.log(Object.getPrototypeOf(ChildrenPoint) === MyPoint); // => true
super 关键字
-
super可以当做函数使用，只能在子类的构造函数中，使用，其它地方报错 -
super可以当做对象使用 -
super作为函数调用时，代表父类的构造函数，ES6要求，子类的构造函数必须执行一次super函数。 - 子类的构造函数中的
super()，代表调用父类的构造函数，但是返回的是子类的实例，即super内部的this指的是子类的实例。
class A()
class B extends A {
constructor() {
super();
}
}
上面代码，super()在这里相当于A.prototype.constructor.call(this)
-
super作为对象时，在普通方法中，指向父类的原型对象，在静态方法中，指向父类
class MyPoint {
constructor(props) {
this.x = props.x;
}
sum(...values) {
console.log(values);
let summation = values.reduce((prev,cur) => prev + cur,0);
console.log(summation);
}
}
// 继承
class ChildrenPoint extends MyPoint{
constructor(props,cProps){
super(props); // 调用父类的constructor(props)
this.y = cProps.y;
}
csum(...values){
super.sum(...values); // super作为对象使用，相当于MyPoint.prototype
}
}
var cPoint = new ChildrenPoint({x:1},{y:4});
cPoint.sum(...Object.values(cPoint)); // => 10
cPoint.csum(...Object.values(cPoint)); // => 10
上面代码中，子类ChildrenPoint当中的super.sum(...values)，就是将super当做一个对象使用，super在普通方法中，指向MyPoint.prototype，所以super.sum(...values)就相当于MyPoint.prototype.sum(...values)
因为super指向父类的原型对象，所以定义在父类实例上的方法或者属性，是无法通过super调用的，比如super.x就会输出undefined
类的 prototype 属性和__proto__属性
- 子类的
__proto__属性，表示构造函数的继承，总是指向父类 - 子类的
prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype
class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
