面试官: 讲讲什么是原型链吧

前言

讲Javascript原型和原型链的文章数不胜数，但能让读者读懂的真的是少之又少。而作为面试常考的知识点之一，我们都应该知道原型和原型链的重要性。为了理解原型和原型链，我先前也看过非常多的文章，网上相关的优质文章真的是非常少，本文我会用自己的理解再结合网上一些大牛的文章来向你描述原型和原型链是什么，包你弄懂原型和原型链!

什么是原型和原型链?

当面试官问到这个问题，我们该怎么回答? 这里先给个标准答案 ：

在Javascript中我们通常都是用构造函数来新建一个对象的，每一个构造函数内部都有一个prototype属性值，这个属性值是一个对象，这个对象（也称为原型对象）包含了由该构造函数创造出所有实例所共享的属性和方法。当我们用构造函数创建了一个新对象，这个新对象内部会有一个的指针，这个指针被称为对象的原型，一般来说我们是不能够获取到这个指针的，但是现在浏览器中我们都可以用__proto__属性让我们获取到这个指针。

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototype，而Object.prototype的原型指向null,所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。

一图胜千言(以下问题都是结合此图分析)

注意 : 图中一共有3个构造函数，分别是Foo、Object、Function。

让我们从上往下看 :

首先看到 Foo构造函数 有一个 prototype属性 指向一个对象（之前说过这个原型对象是包含了创建出所有实例共享的原型和方法的）。注意原型对象上面还有一个constructor指回函数Foo。再看到f1和f2是两个对象，它是由Foo构造函数new出来的，而f1、f2对象中都有一个__proto__指针（我们称之为原型）指向Foo.prototype。

可以试着在控制台打印一下以下代码验证是不是真的是这样的：

function Foo(){}
Foo.prototype.a = 'b'
var f1 = new Foo()
var f2 = new Foo()
console.log(Foo.prototype)
console.log(Foo.prototype.constructor)
console.log(f1.__proto__)
console.log(f2.__proto__)
复制代码