简单理解原型和原型链

原型和原型链是我们在面试中必会提问到的一个问题，理解原型和原型链不管对学习还是工作都会得到帮助，希望这篇文章会帮助你理解原型和原型链。

一、原型对象

原型对象分为两种，隐式原型（proto）和显式原型（prototype），
所有函数都有prototype属性（显式原型）仅限函数，
所有引用类型（数组、对象、函数）都拥有__proto__属性（隐式原型）

二、原型

先来看一个原型例子

function Foo(name,age){
	this.name = name;
	this.age = age;
}
Foo.prototype = {
	getName:function(){
		return '我是'+this.name
	},
	getAge:function(){
		return '我今年'+this.age
	}
}

const w = new Foo('Q','XX');
console.log(w.getName()) //我是Q
console.log(w.getAge()) //我今年XX
/*当调用getName和getAge方法时，若这个实例不存在该方法，那么就会去它构造函数的 prototype 中去找*/

这就是原型，理解起来比较容易，那为什么要使用原型呢？
假如我们用Foo创建跟多个对象，不使用原型的话是这样：

function Foo(name,age){
	this.name = name;
	this.age = age;
	this.getName = function (){
		return '我是'+this.name
	};
	this.getAge = funciton (){
		return '我今年'+this.age
	}
}

这样来实现的话回对我们的代码带来极大的不便，不易维护，还会占用很多的资源。
通过原型来实现的话，只需要在构造函数里面给属性赋值，把方法写在prototype属性(这个属性是唯一的)，这样每个对象都可以调用prototype属性里面的getName、getAge方法，节省了不少的资源和维护成本。

三、原型链

理解原型链稍微有一些绕，我们先看一下代码

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Foo(){};
let f = new Foo();
console.log(f.a); //undefined 
console.log(f.b); //b

运行上面代码，我们会发现为什么f.a是undefined呢？这就是原型链机制影响的。

console.log(typeof f.__proto__.__proto__); //object

打印f.b的结果为b，但f没有b属性，就会一直通过__proto__往上找，最后当查找到Object.prototype时找到，最后打印出b，向上查找过程中，得到的是Object.prototype，而不是Function.prototype，找不到a属性，所以结果为undefined，这就是原型链，通过__proto__向上进行查找，最终到null结束。