你知道的JS原型链--对象与原型

最近一直在以忙为借口犯懒，到了清明节终于捱不过去了，所以还是准备写一篇文章来总结一下。最近开发的一个项目涉及到一些关于es6继承的问题。得益于JavaScript强大的原型机制，我们可以很轻易的模仿出类的特性，当然由于是基于原型实现的class语法糖，所以我们可以做出一些特别骚气的操作，比如动态继承。
例如

class A {
    constructor(){
        console.log('this is A');
    }
}

// class factory
function InheritMaker(constructor){
    return class B extends constructor {
        constructor(){
            super();
            console.log('this is B');
        }
    }
}

const a = new A(); // this is A

const B = InheritMaker(A);
const b = new B(); // this is A; this is B

说实话，我一直在思考这种方式到底是不是违反了类的初衷。类是静态的，但是我们在 JavaScript中可以在运行时动态选择继承，这使得类的行为变得不确定: 我无法知道我的类到底会实现什么样子的功能，只用运行时才知道。这种见鬼的实现方式在Java中绝对会报错报到死，但是在JavaScript中却可以平稳运行。

说了这么多，这种灵活不失骚气的实现方式还是得益于JavaScript中强大的原型机制。接下来，我希望来说清楚JavaScript中的原型到底是怎么回事，以及抛砖引玉的对于es6的class实现进行一些粗浅的探讨。

对象与原型

我最一开始接触JavaScript的时候不知道什么是原型，把它和对象当作两个概念来看待。
我们都知道，一个类new出来的实例是一个对象。

我们来看下EcmaScript对于对象的定义:

无序属性的集合，其属性可以包含基本值，对象或者函数

原型就是无需属性的集合，原型就是对象,原型就是实例

下面让我们来抛开es6谈一谈对象与原型。

我们都知道，对象是我们用class ‘new’出来的，例如我们想实现创建两个人，张三和李四，他们都拥有相同的属性，但是属性的值不同，所以我们将他们归为一个‘类’，在某些静态语言中大致长这样：

class People {
    constructor(string name, int age) {
        this.name = name;
        this.age = age;
    }
}

const zhangsan = new People('张三'， 12)；
const lisi = new People('李四', 14);

这样两个人就创建好了。

但是JavaScript没有类的概念怎么破？

下面用es5实现了同样的 效果：

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

var zhangsan = new People('张三', 12);
var lisi = new People('李四'， 14);

上面创建了一个构造函数，实现了相同的效果。

对于JavaScript来说，People是一个实例，它的构造函数是Function,因此它拥有__proto__,又是(构造)函数，所以拥有prototype，值得说明的一点是只有函数拥有prototype。

那么prototype与__proto__又有什么区别呢？

prototype & proto

JavaScript中有两个指针，prototype与__proto__，我在初学的时候一直对于这两个指针一直十分困惑，现在我希望可以解释清楚这些事情。

对于People构造函数来说，它在被创建的时候拥有prototype属性，prototype的constructor指向它本身：

image.png

如果用一种不太准确但容易理解的方式来解释，prototype才是People的类，上面拥有People所定义的一切方法，例如我们举个例子：

class People {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    
    changeName(newName){
        this.name = newName;
    }
}

我们在上面多声明了一个方法changeName,因此上面的图改为：

image.png

这就是prototype

但是我们也说了People不仅仅是个构造函数，它还是Function的实例，对于一个实例来说，它需要知道创建它的类是什么。

注意这里非常容易糊涂：

prototype指向的是它作为构造函数的类
_proto_指向的是创建它的类

其实这也非常容易理解，因为对于JavaScript来说，函数也是一个对象。也就是说函数也是被‘new’出来的。创建它的类是Function

就是下面的这个Function:

const People = new Function();

因此上面的图可以更改为：

image.png

同样的，Function类的构造函数也是一个函数。。所以Function构造函数的prototype指向Function类,而它的__proto__也指向它的类：

image.png

因此你可以试一下：

Function.prototype === Function.__proto__; // true

我们刚才也说过了，prototype 也是一个对象，也是被'new'出来的，因为是对象，所以创造它的构造函数是Object,因此上图可以更改为：

image.png

因此就出现了一个问题，创建Object的类是个毛？

说的再玄幻一点就是创建对象的是个什么玩应？

是null

从无到有。

小结

因此原型的本质可以概括为：

JavaScript中的类也是个对象

当然这不太准确，我会在下节做阐述，先这么理解就好。