ES5中的继承和ES6中的继承

在JavaScript中，prototype、constructor、__proto__、构造函数、原型、实例这些概念已经很让人头疼，再加上ES6的class 、extends已经乱成一锅粥了，平时对这些用的少写的少，是得好好捋清楚。看了几篇文章有了自己的理解，理解如下：

构造函数.prototype = 原型；
构造函数.prototype.constructor = 原型.constructor = 构造函数；
new 构造函数 = 实例；
实例.constructor = 构造函数；
实例.__proto__ = 原型；

这样看着不直观，那就直接上张图，更直观的捋清楚这些概念之间的关系：





下面用代码验证上面的关系：

function CreateGf(name, age){
this.name = name;
this.age = age;
}

CreateGf.prototype.sayWhat = function(name){
console.log(this.name + ' say: hi!');
}

var gf1 = new CreateGf('gf1',20);
var gf2 = new CreateGf('gf2',22);
gf1.sayWhat(gf1.name);
gf2.sayWhat(gf2.name);

console.log(CreateGf.prototype.constructor == CreateGf); //true
console.log(gf1.constructor == CreateGf);  //true
console.log(gf1.__proto__ == CreateGf.prototype); //true

那在ES6中是什么样的呢？看下图：





大体跟ES5中差不多，用代码验证下：

class Point {
constructor(x, y){
this.x = x;
this.y = y;
}

toString(){
return '(' + this.x + ',' + this.y + ')';
}
}

class ColorPoint extends Point{
constructor(x, y, color){
super(x,y);
this.color = color;
}

toString(){
return this.color + ':' + super.toString();
}
}

let colorPoint = new ColorPoint();

console.log(ColorPoint.prototype.__proto__ == Point.prototype); //true
console.log(ColorPoint.__proto__ == Point); //true