JS核心知识点梳理——上下文、做用域、闭包、this（中）

引言

满满的干货，面试必bei系列，参考大量资料，并集合本身的理解以及相关的面试题，对JS核心知识点中的做用域、闭包、this、上下文进行了梳理。上一篇介绍了做用域和上下文。由于感受这两个概念互相纠缠，上下文的生成会依赖做用域规则。本篇重点介绍闭包和this。

this

先介绍this，由于我以为this最简单了，掌握住分析的方法，依照方法去分析，毫无难度。

为何引入this

由于咱们解耦，为何要解耦？由于咱们要复用！
举个例子：我费了九牛二虎之力写了一个方法，能够对某个数组a进行复杂的操做

var a = [xxx,xxx,....]
function foo (){
  a xxx // do something to a
  xxx a  // do something to a
}

这个方法只能a用 耦合性太强。当其余数组b想用这个方法的时候因为方法里面的操做对象固定是a致使失败。
固然我也不能写成b，由于若是数组c要用难道咱们再改为c?
怎么办，显然这个操做的对象不能是固定的，应该说最好是一个变量，谁调用，这个变量就是谁。
this就这么产生了！因此说this的可变是业务的须要，咱们要的就是它的可变。固然你要是掌握不了它的变化规则，那么对你来讲引入this就是一场灾难了。

this的规则

总原则: 函数中的this，指的是当前函数的执行主体；谁让函数执行的，那么this就指向谁

• 在全局做用域下，this指向window；
• 函数体中的this，看函数执行前有没有".",若是有，那么点前面是谁，this就指向谁；若是没有“.”，那么会指向window;
• 若是给元素的事件行为绑定方法，那么方法中的this，就会指向当前被绑定的那个元素；
• 回调函数中的this指向window；
• 自执行函数中的this永远指向window；
• call 、apply、bind能够改变this关键字；
• 构造函数中的this指向当前类的实例；

改变this

apply call bind能够改变this

问题来了，为何要改变this?

还记得我以前说的引入this是为了进行更好的复用吗？
js里面没有类，可是经过原型、继承js在努力模仿类。同一个类固然能经过继承复用代码，不一样类不继承的状况下怎么复用呢？经过改变this。
举个例子，Array类有reverse方法。只要是数组，都继承了Array的reverse方法，能够直接调用。

[1,2,3].reverse()  //[3,2,1]

如今有个类数组arguments,因为不属于Array类，没有办法继承reverse方法，可是我就是想用，咋办？改变this

Array.prototype.reverse.call(argumengts)

闭包

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量的 函数。这个被引用的自由变量将和这个函数一同存在，即便已经离开了创造它的环境也不例外。因此，有另外一种说法认为闭包是由 函数和与其相关的引用环境组合而成的实体。 wiki

闭包这个东西咋说呢，不一样的程序员，不一样的资料都有不一样的理解。你把它理解为一个函数，也能够把它理解为函数+执行环境。

咱们这里不纠结闭包的定义。而是关注闭包的现象，应用，再结合相关面试题去攻克它，最后谈一下我对闭包的思考。

现象

话说了一箩筐，你却是给我上代码呀.....
各位看官息怒，小的再多说几句

以前咱们说过了，函数执行，生成执行环境。函数执行完，销毁执行环境。嗯，听上去很正常，不用的东西就销毁嘛。

可是若是函数执行完，该函数上下文还用用怎么办，有用的东西确定不敢销毁了。这个就是闭包的现象，那么能引发这个现象的鄙人就把它理解为闭包！

function foo () {
    var a = 1
    return function bar () {
        a++
        console.log(a)
    }
}
var b = foo() //函数执行完，我就问你foo的上下文你敢销毁吗？
b()  //  2
b()  //  3

你们看foo执行完的结果赋值给了b,也就是函数bar赋值给了b,将来我可能让b执行的，也就是让bar执行，因此我须要保证bar能访问上下文不被销毁。bar能访问的上下文其实是foo执行时候的上下文。因此foo执行完之后上下文不会被销毁，会继续存在。

个人理解是 函数向外层做用域暴露出了一个内部引用，那么就存在闭包现象（真的不必纠结闭包究竟是啥，是函数？内部总体？是xxx?`。

做用与应用

做用1：保存变量

应用: 函数柯里化

var add = (a)=>(b)=> a+b
add(2)(3) //5

优势：延迟执行，提早传参，逼格高

做用2：保护变量（不受污染）

应用: 单例模式

//jQ源码
 (function(){
      var jQuery=function(){
          //jq代码
       }
      window.$=window.jQuery=jQuery;  //这个经过window对象暴露给外面，根return的暴露是一个意思
   })()
//函数执行完了，里面的引用暴露给外面了，因此上下文不销毁

优势：变量和函数都写到当即执行函数里面了，避免了污染外层做用域

优缺点

闭包无处不在，也许你不经意就写了个闭包。

须要注意的是，因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。

总结

本篇详细介绍了闭包和this的来源，规律，应用。因为篇幅有限，将在下一篇中会结合各大公司面试题来巩固这些知识，但愿给你们带来帮助。