几张图搞懂原型与原型链

原型prototype

1.我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象，这个对象就是我们所谓的原型对象

2.如果函数作为普通函数调用prototype，没有任何作用；

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含属性指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

什么意思，举个例子：

example code

run code

这个MyClass构造函数的prototype属性默认指向的是一个Object空对象（原型对象），原型对象中有一个属性constructor指向函数对象;我们通过调用构造函数的方式创建一个实例对象，实例对象有一个__protr__属性，通过run code我们可以发现实例对象的__proto__属性与构造函数的prorotype属性相等，都指向MyClass的原型对象

我们给MyClass的原型上添加一个方法：

给原型添加方法

run code

通过run code我们可以看到MyClass的原型链中已经添加上了test方法，实例对象也可以正常调用这个test方法；其实原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象

画一个堆栈结构图帮助理解：

图示

值得注意的是：当我们访问一个对象的属性和方法时，他会先在对象自身上寻找，如果有直接使用，没有找到才去原型对象中寻找，如果找到直接使用，例如：

mc实例本身有test方法

run code

tips：

函数的显示原型（prototype）属性：定义函数时自动添加，默认是一个空的Object对象

函数的隐式原型（__proto__）属性：在创建对象时自动添加，默认为构造函数的prototype属性值

原型链

我们先来看一个例子

example

根据打印结果可知hasOwnProperty既不是对象自身的方法也不是原型对象中的方法；但是mc可以调用它，那么这个方法是在哪里呢；这就涉及到了原型链的问题

我们通过画一个堆栈图来理解这个问题：

图示

tips:

 当我们访问一个对象的属性和方法时，他会先在对象自身上寻找，如果有直接使用;

没有找到才去原型对象中寻找，如果找到直接使用;

如果还没有则去原型的原型中寻找，直到找到Object对象的原型，Object对象的原型没有原型，如果在Object中没找到，则返回undefined

console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))//true

我们再来看一张图：

原型链

从上图我们可以得出以下结论：

1.所有函数都有两个属性：显示原型属性和隐式原型属性

2.实例对象的隐式原型等于构造函数的显示原型

3.所有函数的隐式原型都是一样的（都是new Function产生的，都指向Function的原型）

4.函数的显示原型指向的对象是Object的原型对象（但是Object不满足，Object的原型对象指向的是null）<所有函数的原型对象默认都是Object的实例，Object除外）

5.Function是它自身的实例（所有函数都是Function的实例） Function.__proto__ = Function.prototype

6.Object的原型对象是原型链的尽头Object.prototype.__proto__=null

7.Object instanceof Function//true

   Function instanceof Object//true

探索instanceof

instanceof 是如何判断的呢？

表达式A instanceof B

如果B函数的显示原型对象在A对象的原型链上则返回true,否则返回false

instanceof

原型链面试题

我们再来看两道原型链的经典面试题

test1

我们可以通过一个堆栈图来理解这个问题

解析图

test2

其实这个题目考的也是原型链的那张图，只要理解了那张图，基本原型链就没啥问题了。我们快速的根据题目来画一下：

解析图

原型链继承

套路

我们通过一张图来理解为什么这样去实现：

堆栈图

最后我们顺便看下组合继承：

组合继承

这个其实也很好理解，需要注意的是call的使用：A.call( B,x,y )：就是把A的函数放到B中运行，x 和 y 是A方法的参数。

--------the end