ES5中的继承和ES6中的继承

时间：2016-07-06 18:14:02 阅读：134 评论：0 收藏：0 [点我收藏+]

标签：

在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

ES5中的继承和ES6中的继承

标签：

原文地址：http://www.cnblogs.com/erduyang/p/5647599.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行