js深入浅出系列之原型和原型链

本系列旨在帮助自己也同样帮助大家梳理JS一系列知识，本文主要讲如原型、原型链的知识

1.JS原型和原型链

首先我们先来使用构造函数new一个对象：

function Person() { }
var male=new Person();
male.name='zhangsan'

比如，在这个例子中，Person就是一个构造函数，我们使用new来创建了一个Person的实例对象male。

prototype
每个函数都会有prototype属性（箭头函数没有哦！），比如

function Person() {
	Person.prototype.age=18;
}
var male=new Person();
var female=new Person();
//male和female的age?

那么这个函数的prototype属性到底指向的是什么呢？是这个函数的原型吗？
其实，prototype属性指向了一个对象，而这个对象正是调用构造函数创建的实例的原型，也就是上面这个例子中的male和female的原型。
那什么是原型呢？
可以试着这样去理解：每一个js对象（除了null）在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型“继承”属性。
我们可以这样去理解构造函数与实例原型之间的关系:

很明显，我们已经知道了构造函数和实例原型之间的关系，那么实例和实例原型之间的关系呢？
proto
上面我们已经知道,js创建的时候就会关联一个对象（原型），除此之外，每个js对象都会有一个属性，叫__proto__，这个属性会指向该对象的原型，也就是说

male.__proto__===Person.prototype

这三者间关系如下：

那么既然实例对象和构造函数都可以指向原型，那么原型是否有属性可以指向构造函数或实例呢？
constuctor
指向实例倒是没有，因为一个构造函数会生成多个实例，但是原型指向构造函数是有的——constructor,每一个原型都有一个constructor指向关联的构造函数。
也就是说

Person=Person.prototype.constructor

因此我们再更新关系图：
综上所述，我们已经可以得出

function Person() { }
var male=new Person();
male.__proto__===Person.prototype;
Person===Person.prototype.constructor
//顺便我们还可以学习一个ES5获得对象的原型
Object.getPrototypeOf(male)===Person.prototype

了解了构造函数、实例原型、实例之间的关系，接下来我们讲实例和原型之间的关系：
实例与原型
当读取实例的属性时，如果找不到，就会查找与之关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止

Person.prototype.name='zhangsan'
male.name='lisi'
console.log(male.name)//lisi
delete male.name
console.log(male.name)//zhangsan

	在这个例子中，我们给实例对象male添加了name属性，当我们打印male.name的时候，结果自然为zhangsan
	但是当我们删除了male.name时，就无法从male对象中找到name属性了，就会从male.__proto__也就是male的原型开始查找，male的原型有name属性，结果为lisi。

原型的原型
上文中，我们说过，原型也是一个对象，既然是对象，我们就可以利用创造对象的方法创造它，那就是

var obj=new Object();
obj.name='lili'

那么这也就是说原型对象其实是通过Object函数生成的，结合实例的__proto__指向构造函数的prototype，所以再更新关系图：
原型链
那么Object.prototype的原型呢？是null,可以试着打印一下：

console.log(Object.prototype.__proto__===null)

那么null究竟代表了什么呢？
null表示“没有对象”，此处不应该有值。
因此Object.prototype.proto===null和Object.prototype没有原型其实是一个意思。
所以查找属性查到Object.prototype就可以停止查找了
因此原型链可以更新为：
如图，最右边的那一条直线，也就是从male到null所组成的链状结构，就是原型链。

最后补充几个知识点：
（1）constructor
首先是constructor，我们先看个例子

console.log(male.constructor===Person)//true

当获取到male.constrcutor时，其实male中并没有constructor属性，当不能读取到constructor属性时，会从male的原型也就是Person.prototype中读取，正好原型中有该属性，所以：male.constructor===Person.peototype.constructor
（2）proto
绝大多数浏览器都支持这个非标准的方法访问原型，然后它并不存在与Person.prototype中，实际上，它是来自Object.prototype，与其说是一个属性，不如说是一个getter/setter，当使用obj.__proto__时，可以理解成返回了Object.getPrototypeOf(obj)
（3）有关继承
我们之前说“每一个对象都会从原型继承属性”，实际上并不确切是这样：
继承意味着复制操作，然而js默认不会复制对象的属性，js只是在两个对象之间创建一个关联，这样一个对象就可以通过委托访问另一个对象的属性和函数，所以与其说是继承，委托的说法反而更准确一些。

接下来，我们看一个题
大家都知道instanceof可以判断具体的引用类型，那么instanceof具体的是实现原理是什么呢？
用x instanceof y举例

while（x.__proto__） {
	if(x.__proto__===y.prototype) {
		return true
	}
	x.__proto__=x.__proto__.__proto__
	if(x.__proto__===null) 
		reurn false
}

也就是说x instanceof y的原理是测试构造函数的prototype属性是否出现在x的原型链上的任意位置

js之执行上下文栈

想必大家都知道js的执行顺序是顺序执行的，接下来我们来看一段代码具体分析：

var foo=function() {
	console.log('foo1');
}
foo();	//foo1
var foo=funtion() {
	console.log('foo2')
}
foo();	//foo2

我们接着再来看一段代码：

function foo() {
	console.log('foo1')
}
foo();	//foo2
function foo() {
	console.log('foo2');
}
foo()	//foo2

这是因为js引擎执行代码并非是一行一行地分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工作”，比如第一个例子中的变量提升，第二个例子中的函数提升。
那么大家有没有考虑过这个一段一段的段是怎么划分的呢？js遇到什么情况才需要进行准备工作呢？

1.可执行代码

这就要说到js的可执行代码类型有哪些了？
guess what?其实就三种，全局代码，函数代码、eval代码
举个例子，当执行到一个函数的时候，就会进行准备工作，这里的准备工作，就叫做执行上下文

2.执行上下文栈

js创建了执行上下文栈ECS来管理执行上下文，为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组.
当创建一个函数的时候，就会创建一个执行上下文，并且压入执行上下文堆栈，当函数执行完毕，就会将函数的执行上下文从栈中弹出·。