第十二章 原型

本文来源：博客园-王福鹏

这几天看了很多原型、面向对象、继承的教程。反而越看越晕。上一篇笔记已经写到作废，有些东西不琢磨明白，也是在糊弄自己。所以，从原型开始重新学习。

万物皆对象

ECMAScript中包含基本类型和引用类型值，基本类型（值类型）有number、boolean、undefined，null也是基本类型，但是用typeof检测为object，string也是一个特殊的基本类型。基本类型是按值访问的，而引用类型有object,function,array，是通过栈内存中的值指向堆内存中的实际地址访问得到。object，function，array都是Object，也就是对象。

var x;
var foo = function () {};

console.log(typeof 'String');   // String
console.log(typeof 123);        // number
console.log(typeof true);       // boolean
console.log(typeof x);          // undefined
console.log(typeof null);       // Object

console.log(typeof foo);        // function 函数检测为function
console.log(typeof {});         // Object
console.log(typeof []);         // Object

//判断一个值是否是值类型 用typeof  而引用类型 可以使用instanceof
console.log(foo instanceof Object);        // true 函数是对象
console.log({} instanceof Object);         // true
console.log([] instanceof Object);         // true

对象就是属性的集合，那方法呢？方法也是属性，因为它是键值对的形式。函数和数组也是对象，所有的引用类型都是对象。

function $() {
    return 'haha';
}
$.sayHello = function () {
    return 'hello world';
};

console.log($);
console.log($.sayHello());
// hello world 打点调用到sayHello这个属性

以上typeof检测到函数是Function类型，可是instanceof检测函数又是Object的实例，为什么。我们接着往下看：

函数与对象之间的关系

函数是一种对象，但是不像数组一样，数组可以说是函数的一种子集。但是函数跟对象之间的关系很微妙。下面是一个栗子：

function People(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        return this.name + this.age + 'is runing!';
    };
}

const xiaoming = new People('xiaoming', 10);
console.log(xiaoming);
// People {name: "xiaoming", age: 10, run: ƒ}

以上可以看出，对象可以用函数创建。但是实际上，所有的对象都是函数创建的。

var obj1 = {};  // 字面量方式创建对象
var obj2 = new Object();    // new运算符创建对象
console.log(Object);
// ƒ Object() { [native code] } 是global的一个函数

字面量方式实际上也是函数创建对象，实际上，就是"语法糖"而已。

所以，可以很负责任的说——对象都是通过函数来创建的。

prototype

ECMAScript中每个函数都有一个prototype属性，这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。

prototype1.png

如上图，SuperType是是一个函数，右侧的方框就是它的原型。

原型既然作为对象，属性的集合，不可能就只弄个constructor来玩玩，肯定可以自定义的增加许多属性。例如这位Object大哥，人家的prototype里面，就有好几个其他属性。

prototype2.png

咦，有些方法怎么似曾相似？

对！别着急，之后会让你知道他们为何似曾相识。接着往下说，你也可以在自己自定义的方法的prototype中新增自己的属性

function foo() {}
foo.prototype.name = 'xiaoming';
foo.prototype.run = function () {
    return this.name + 'is runing';
};
console.log(foo.prototype);
// {name: "xiaoming", run: ƒ, constructor: ƒ}

默认函数只有一个constructor属性，而现在我们添加了name，run属性。

function Foo() {}
Foo.prototype.name = 'xiaoming';
Foo.prototype.run = function () {
    return this.name + 'is runing';
};

var f1 = new Foo();
console.log(f1.name);
// xiaoming
console.log(f1.run());
// xiaomingis runing

即，Foo是一个函数，f1对象是从Foo函数new出来的，这样f1对象就可以调用Foo.prototype中的属性。

因为每个对象都有一个隐藏的属性——“_proto”，这个属性引用了创建这个对象的函数的prototype。即：fn._proto === Fn.prototype

这里的"_proto_"成为“隐式原型”

隐式原型_proto_

上节已经提到，每个函数function都有一个prototype，即原型。这里再加一句话——每个对象都有一个_proto_，可成为隐式原型。

这个_proto是一个隐藏的属性，javascript不希望开发者用到这个属性值，有的低版本浏览器甚至不支持这个属性值。所以你在Visual Studio这样很高级很智能的编辑器中，都不会有_proto的智能提示，但是你不用管它，直接写出来就是了。

var obj = {};
console.log(obj.__proto__ === Object.prototype);
// true

obj这个对象本质上是被Object函数创建的，因此obj._proto_=== Object.prototype。我们可以用一个图来表示。

prototype3.png

每个对象都有一个_proto_属性，指向创建该对象的函数的prototype。

那么上图中的“Object prototype”也是一个对象，它的_proto_指向哪里？

好问题！

在说明“Object prototype”之前，先说一下自定义函数的prototype。自定义函数的prototype本质上就是和 var obj = {} 是一样的，都是被Object创建，所以它的_proto_指向的就是Object.prototype。

function Foo() {
    return 'abc';
}
var f1 = new Foo();
console.log(f1.__proto__ === Foo.prototype);
console.log(Foo.prototype.__proto__ === Object.prototype);
// true  上面两个都是true 也就是实例的隐式原型指向了构造函数的prototype
// 而构造函数的prototype也是对象，它的隐式原型指向了Object的prototype

这里本来有个疑问，为什么Foo.prototype._proto_ 不是Function的prototype，后来想到，函数的prototype可以理解是后台给创建的一个对象，而创建这个对象的方式就是new Object，所以prototype这个对象的原型链指向了Object.prototype。

但是Object.prototype确实一个特例——它的_proto_指向的是null，切记切记！

prototype4.png

还有——函数也是一种对象，函数也有_proto_吗？

又一个好问题！——当然有。

函数也不是从石头缝里蹦出来的，函数也是被创建出来的。谁创建了函数呢？——Function——注意这个大写的“F”。

且看如下代码。

function foo1() {
    return '2019';
}
console.log(foo1.__proto__ === Function.prototype);
// true

var foo2 = new Function('return 2019');
console.log(foo2.__proto__ === Function.prototype);
// true

以上代码中，第一种方式是比较传统的函数创建方式，第二种是用new Functoin创建。

首先根本不推荐用第二种方式。

这里只是向大家演示，函数是被Function创建的。

好了，根据上面说的一句话——对象的_proto指向的是创建它的函数的prototype，就会出现：Object._proto === Function.prototype。用一个图来表示。

prototype5.png

上图中，很明显的标出了：自定义函数Foo._proto指向Function.prototype，Object._proto指向Function.prototype，唉，怎么还有一个……Function._proto_指向Function.prototype？这不成了循环引用了？

对！是一个环形结构。

其实稍微想一下就明白了。Function也是一个函数，函数是一种对象，也有_proto属性。既然是函数，那么它一定是被Function创建。所以——Function是被自身创建的。所以它的_proto指向了自身的Prototype。

最后一个问题：Function.prototype指向的对象，它的_proto_是不是也指向Object.prototype？

答案是肯定的。因为Function.prototype指向的对象也是一个普通的被Object创建的对象，所以也遵循基本的规则。

instanceof

对于值类型，你可以通过typeof判断，string/number/boolean都很清楚，但是typeof在判断到引用类型的时候，返回值只有object/function，你不知道它到底是一个object对象，还是数组，还是new Number等等。

这个时候就需要用到instanceof。例如：

function Foo() {}
const f1 = new Foo();

console.log(f1 instanceof Foo);    //true
console.log(f1 instanceof Object); //true

f1这个对象是被Foo创建，但是“f1 instanceof Object”为什么是true呢？

至于为什么过会儿再说，先把instanceof判断的规则告诉大家。根据以上代码看下图：

prototype6.png

Instanceof运算符的第一个变量是一个对象，暂时称为A；第二个变量一般是一个函数，暂时称为B。

Instanceof的判断队则是：沿着A的_proto_这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。

按照以上规则，大家看看“ f1 instanceof Object ”这句代码是不是true？ 根据上图很容易就能看出来，就是true。

通过上以规则，你可以解释很多比较怪异的现象，例如：

console.log(Function instanceof Object);
console.log(Object instanceof Function);
console.log(Function instanceof Function);
// 全都是true

这些看似很混乱的东西，答案却都是true，这是为何？

正好，这里也接上了咱们上一节说的“乱”。

上一节咱们贴了好多的图片，其实那些图片是可以联合成一个整体的，即：

prototype7.png

看这个图片，千万不要嫌烦，必须一条线一条线挨着分析。如果上一节你看的比较仔细，再结合刚才咱们介绍的instanceof的概念，相信能看懂这个图片的内容。

看看这个图片，你也就知道为何上面三个看似混乱的语句返回的是true了。

问题又出来了。Instanceof这样设计，到底有什么用？到底instanceof想表达什么呢？

重点就这样被这位老朋友给引出来了——继承——原型链。

即，instanceof表示的就是一种继承关系，或者原型链的结构。请看下节分解。

原型记住以下几点：

• 所有的对象都有_proto_和constructor属性。
• 所有的函数（普通函数，构造函数，内置的Function，Ojcect函数）都有prototype属性，prototype是函数独有的属性。JS中，函数也是对象。所有函数也具有_proto_属性。
• 每个对象的_proto_指向创建自身的构造函数的prototype。

指向记住以下几点：

• Function的proto指向其构造函数Function的prototype；
• Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的proto指向Function.prototype；
• Function.prototype的proto指向其构造函数Object的prototype；
• Object.prototype的prototype指向null（尽头）；

prototype.jpg

问题又出来了。Instanceof这样设计，到底有什么用？到底instanceof想表达什么呢？

重点就这样被这位老朋友给引出来了——继承——原型链。

即，instanceof表示的就是一种继承关系，或者原型链的结构。

new 运算符

function People(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        return this.name + ' ' + this.age + 'is runing!';
    };
}

// new运算符到底做了什么

var xiaoming = new People('xiaoming', 18);
console.log(xiaoming);
// People {name: "xiaoming", age: 18, run: ƒ}

var xiaoqiang = {};
xiaoqiang.__proto__ = People.prototype;
People.call(xiaoqiang, 'xiaoqiang', 20);
console.log(xiaoqiang);
// People {name: "xiaoqiang", age: 20, run: ƒ}

当我们new一个实例的同时，后台帮我们做了下面的几个步骤：

1. 创建了一个空对象
2. 将这个对象的_prototype_从Object.prototype上修改到People构造函数上
3. 修改了这个People函数的this指向这个空对象，执行People函数，传参，生成实例。