走在前端的大道上
本篇是 一篇文章带你理解原型和原型链 、一篇文章带你完全理解this的查漏补缺，会不断丰富提炼总结更新。
什么是原型链
原型链 是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。
Object ==> 构造函数1 ==> 构造函数2
就和css中的继承一样，如果自身没有定义就会继承父元素的样式。
function a(){};
a.prototype.name = "追梦子";
var b = new a();
console.log(b.name); //追梦子什么是作用域链
作用域 是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域
全局作用域==>函数1作用域==>函数2作用域
作用域的特点:先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
如：
var a = 1;
function b(){
var a = 2;
function c(){
var a = 3;
console.log(a);
}
c();
}
b();最后打印出来的是3，因为执行函数c()的时候它在自己的范围内找到了变量a所以就不会越上继续查找，如果在函数c()中没有找到则会继续向上找，一直会找到全局变量a，这个查找的过程就叫作用域链。
不知道你有没有疑问，函数c为什么可以在函数b中查找变量a，因为函数c是在函数b中创建的，也就是说函数c的作用域包括了函数b的作用域，当然也包括了全局作用域，但是函数b不能向函数c中查找变量，因为作用域只会向上查找。
上下文
console.log(a); // Uncaught ReferenceError: a is not defined
// 因为没有定义a所以报错了。var a = 52;
console.log(a); //52
// 有定义a，并且给a赋值了52所以打印a就是52。console.log(a); //undefined
var a = 52; 虽然有定义a但是打印却在变量a的前面，那为什么不是报错而是打印出来的是undefined？因为在js执行代码之前，js会先获取到所有的变量并且把这些变量放置到js代码的顶部。（简称变量声明提前）
我们给赋值给a的52到哪去了。虽然我前面说了js会事先获取所有的变量并且将这些变量放置到顶部，但是 变量的赋值并不会事先执行 ，也就是说，在哪声明的变量，这个变量的赋值就在哪执行。
实际上，上面的代码是这样执行的：
var a;
console.log(a); //undefined
a=52;console.log(a);
function a(){
this.user = "追梦子";
}
//为什么，可以事先就打印出函数a呢？因为 函数的赋值在函数声明的时候 就已经赋值了,结合上面我说的变量提前，那是不是就可以理解这句话了？
function a(){
this.user = "追梦子";
}
console.log(a);
//正常a(); //Uncaught TypeError: a is not a function
var a = function(){
console.log(52);
}
//为什么现在又不行了？因为现在的函数已经赋值给了变量a，现在 它的执行过程和变量一样 了，我们通常把这种函数赋值给变量的形式叫做 函数表达式。
var a = function(){
console.log(52);
}
a(); //52
//正常if(false){
var a = 1;
}
console.log(a); //undefined之所以没有报错而是输出了undefined是因为 变量存在预解析 的情况，又因为 js没有块级作用域，所以最后代码就成了这样
var a;
if(false){
a = 1;
}
console.log(a);总结：
函数分为：函数声明和函数表达式。
函数声明
function a(){
alert("追梦子博客");
}函数表达式
var a = function(){
alert("追梦子");
}看似两段相同的语句，它们的执行顺序却截然不同，函数声明时的赋值行为是在函数创建的时候进行的，而函数表达式的赋值行为是在执行这句变量时进行的（因为它已经赋值给了变量所以我这里把它称为变量）。
不管是变量还是函数都会存在变量声明提前。
来看看几题有意思的js例题，加以理解
var a = 1;
function b(){
console.log(a); //undefined
var a = 5;
}
b();为什么打印的是undefined？
我们先来看看它的解析过程：
var a = 1;
function b(){
var a
console.log(a); //undefined
a = 5;
}
b();我们一起来看看另外一题比较有难度的js面试题：
var a = 1;
function b() {
a = 120;
return;
function a() {}
}
b();
alert(a); //1;如果你看了上面一题我相信你应该有种不知所措的感觉，这里现在为什么又是1了呢？
我把执行过程的代码写出来我相信你就懂了。
var a = 1;
function b() {
var a;
a = 120;
return;
function a() {}
}
b();
alert(a); 如果你正在js的进阶阶段肯定更闷了，你肯定会想我们不是写return了吗？return后面的代码不是不执行吗？为什么这里却影响了这段代码？
虽然return后面的代码不会被执行，但是在js预解析的时候（变量提升的时候）还是会把return后面的变量提前，所以我们这段代码 因为变量提前所以函数里面的变量a就成了局部变量，因为函数外部是访问不了函数内部的变量所以就输出了1。
另外提两点，函数的arguments和函数名都是直接赋值的，也就是在这个函数解析的时候就会进行赋值。
作用域的进阶
什么是自由变量？
如我在全局中定义了一个变量a，然后我在函数中使用了这个a，这个a就可以称之为自由变量，可以这样理解，凡是跨了自己的作用域的变量都叫 自由变量。
var a = "追梦子";
function b(){
console.log(a); //追梦子
}
b();上面的这段代码中的变量a就是一个自由变量，因为在函数b执行到console.log(a)的时候，发现在函数中找不到变量a，于是就往上一层中找，最后找到了全局变量a。
作用域的进阶
在我讲作用域链的时候说过如果有一个全局变量a，以及函数中也有一个变量a，那么只会作用函数中的那个变量a，都是有一种情况就显得比较复杂一些，我们一起来看看这段代码。
var aa = 22;
function a(){
console.log(aa);
}
function b(fn){
var aa = 11;
fn();
}
b(a); //22最后打印的不是11而是22，为什么会这样呢？一起来分析一下这段代码。
假如我们的代码是这样的
var aa = 22;
function a(){
console.log(aa);
}打印出的是22，我想大家应该没有意见，但是有一点我一定要提，那就是 在创建这个函数的时候，这个函数的作用域就已经决定了，而是不是在调用的时候，这句话至管重要。
分析一下过程,首先我们创建了一个全局变量aa
var aa = 22;接着我们创建了一个函数a
function a(){
console.log(aa);
}这时js解析这个函数的时候，就已经决定了这个函数a的作用域，既如果在函数a中找不到变量aa那就会到全局变量中找，如果找到了就返回这个aa，如果找不到就报错。
接着我们又创建了一个函数b
function b(fn){
var aa = 11;
fn();
}在函数b中我们定义了又重新定义了这个变量aa，虽然我们这个时候重新定义了变量aa，但是因为函数a的作用域在创建的时候已经决定了，所以在函数b中创建的那个变量aa以及和函数a里面的那个变量aa没有关系了。
function b(fn){
var aa = 11;
fn();
}
b(a);我们把函数a传到了函数b中，并且当做函数b的形参，接着我们执行了这个被传进去的函数a，最后打印出来的就是22。
在创建这个函数的时候，这个函数的作用域就已经决定了，而是不是在调用的时候。
笔者注： 看到这句话是不是似曾相识？this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
一个是作用域，一个是上下文
举个例子回顾对比一下
box.onclick = function(){
function fn(){
alert(this);
}
fn();
};我们原本以为这里面的this指向的是box,然而却是Window。一般我们这样解决，将this保存下来：
box.onclick = function(){
var _this = this;
function fn(){
alert(_this);
}
fn();
};还有一些情况，有时我们想让伪数组也能够调用数组的一些方法，这时call、apply、bind就派上用场了。
我们先来解决第一个问题修复this指向。
box.onclick = function(){
function fn(){
alert(this);
}
fn();
};改成如下：
box.onclick = function(){
function fn(){
console.log(this);
}
fn.call(this);
};很神奇吧，call的作用就是改变this的指向的，第一个传的是一个对象，就是你要借用的那个对象。
fn.call(this); 这里的意思是 让this去调用fn这个函数，这里的this是box，这个没有意见吧？box调用fn，这句话非常重要，我们知道 this始终指向一个对象，刚好box就是一个对象。那么fn里面的this就是box。
可以简写的，比如：
box.onclick = function(){
var fn = function(){
console.log(this); //box
}.call(this);
};或者这样：
box.onclick = function(){
(function(){
console.log(this);
}.call(this)); //box
};又或者这样：
var objName = {name:'JS2016'};
var obj = {
name:'0 _ 0',
sayHello:function(){
console.log(this.name);
}.bind(objName)
};
obj.sayHello();//JS2016call和apply、bind但是用来改变this的指向的，但也有一些小小的差别。下面我们来看看它们的差别在哪。
call和apply、bind但是用来改变this的指向的，但也有一些小小的差别。下面我们来看看它们的差别在哪。
function fn(a,b,c,d){
console.log(a,b,c,d);
}
//call
fn.call(null,1,2,3);
//apply
fn.apply(null,[1,2,3]);
//bind
var f = fn.bind(null,1,2,3);
f(4);结果如下：
1 2 3 undefined
1 2 3 undefined
1 2 3 4前面说过第一个参数传的是一个你要借用的对象，但这么我们不需要，所有就传了一个null，当然你也可以传其他的，反正在这里没有用到，除了第一个参数后面的参数将作为实际参数传入到函数中。
call就是挨个传值，apply传一个数组，bind也是挨个传值，call和apply会直接执行这个函数，而bind并不会而是将绑定好的this重新返回一个新函数，什么时候调用由你自己决定。
var objName = {name:'JS2016'};
var obj = {
name:'0 _ 0',
sayHello:function(){
console.log(this.name);
}.bind(objName)
};
obj.sayHello();//JS2016这里也就是为什么我要用bind的原因，如果 用call的话就会报错了。自己想想这个sayHello在obj都已经执行完了，就根本没有sayHello这个函数了。
这几个方法使用的好的话可以帮你解决不少问题比如：
正常情况下Math.max只能这样用
Math.max(10,6)但如果你想传一个数组的话你可以用apply
var arr = [1,2,30,4,5];
console.log(Math.max.apply(null,arr));
又或者你想让伪数组调用数组的方法
function fn(){
[].push.call(arguments,3);
console.log(arguments); //[1, 2, 3]
}
fn(1,2);再者：
var arr = ['aaabc'];
console.log(''.indexOf.call(arr,'b')); //3参考文章：
1.什么是作用域链，什么是原型链，它们的区别，在js中它们具体指什么？
2.js中的执行上下文，菜鸟入门基础
3.JS中call、apply、bind使用指南，带部分原理。
3.理解js中的自由变量以及作用域的进阶
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。