做用域, 闭包和this关键字

做用域

执行上下文分为全局上下文（在浏览器中全局上下文为window对象）,和函数上下文。全局上下文存储的即是全局变量和方法。而在函数里面定义的变量和方法则储存在函数上下文里面。 当代码执行时，遇到变量，首先会在当前做用域里面找，没有的话则会到父级做用域，直到找到为止或者到达全局做用域

var color = “blue”;
function changeColor(){
    var anotherColor = “red”;
    function swapColors(){
        var tempColor = anotherColor; 
        anotherColor = color;
        color = tempColor;
//color, anotherColor, and tempColor are all accessible here }
//color and anotherColor are accessible here, but not tempColor
    swapColors(); 
    }
//only color is accessible here changeColor();
复制代码

上面的代码有三个执行上下文：全局上下文，changeColor()的函数上下文，swapColors()的函数上下文。全局上下文的color变量在swapColors()函数里面被访问到，正是由于做用域链的关系，做用域链是向上的而这不是向下的，因此全局上下文没有办法访问到tempColor这个变量

javascript在es6以前是没有块级做用域的

if (true) {
    var color = 'blue'
}
console.log(color)
复制代码

在if里面建立的color是能够在全局上下文访问到的，es6以后可使用let关键字来限制变量的范围。

自由变量将从做用域链中去寻找，可是 依据的是函数定义时的做用域链，而不是函数执行时，以上这个例子就是闭包。闭包主要有两个应用场景：

• 函数做为返回值，上面的例子就是
• 函数做为参数传递

function F1() {
    var a = 100
    return function () {
        console.log(a)
    }
}
function F2(f1) {
    var a = 200
    console.log(f1())
}
var f1 = F1()
F2(f1)
复制代码

以上结果输出的100，由于函数定义时a的值已是100了。

若是在函数内部分配一个之前没有被定义的变量的值，它会自动成为全局范围的一部分。

function myFunction() {
  myVariable = 'JavaScript';
}
myFunction();
console.log(myVariable); //JavaScript
复制代码

this

this是什么呢，this其实就是函数调用时的执行上下文 func(p1, p2)执行这个代码，等价于func.call(undefined, p1, p2), 里面的context为undefined，当context 就 null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）,那么这时候的this就是等价于winodow。 若是是执行obj.f1(p1),至关于执行obj.f1.call(obj, p1)，这时候的this就是obj的执行上下文

默认绑定：

规则：在非严格模式下，默认绑定的this指向全局对象，严格模式下this指向undefined

function foo() {
  console.log(this.a); // this指向全局对象
}
var a = 2;
foo(); // 2
function foo2() {
  "use strict"; // 严格模式this绑定到undefined
  console.log(this.a); 
}
foo2(); // TypeError:a undefined
复制代码

默认绑定规则如上述栗子，书中还提到了一个微妙的细节：

function foo() {
  console.log(this.a); // foo函数不是严格模式 默认绑定全局对象
}
var a = 2;
function foo2(){
  "use strict";
  foo(); // 严格模式下调用其余函数，不影响默认绑定
}
foo2(); // 2
复制代码

因此：对于默认绑定来讲，决定this绑定对象的是函数体是否处于严格模式，严格指向undefined，非严格指向全局对象。

一般不会在代码中混用严格模式和非严格模式，因此这种状况很罕见，知道一下就能够了，避免某些变态的面试题挖坑。

隐式绑定：

规则：函数在调用位置，是否有上下文对象，若是有，那么this就会隐式绑定到这个对象上。

function foo() {
      console.log(this.a);
    }
    var a = "Oops, global";
    let obj2 = {
      a: 2,
      foo: foo
    };
    let obj1 = {
      a: 22,
      obj2: obj2
    };
    obj2.foo(); // 2 this指向调用函数的对象
    obj1.obj2.foo(); // 2 this指向最后一层调用函数的对象
    
    // 隐式绑定丢失
    let bar = obj2.foo; // bar只是一个函数别名 是obj2.foo的一个引用
    bar(); // "Oops, global" - 指向全局
复制代码

隐式绑定丢失：

隐式绑定丢失的问题：实际上就是函数调用时，并无上下文对象，只是对函数的引用，因此会致使隐式绑定丢失。

一样的问题，还发生在传入回调函数中，这种状况更加常见，而且隐蔽，相似：

test(obj2.foo); // 传入函数的引用，调用时也是没有上下文对象。
复制代码

显式绑定:

就像咱们上面看到的，若是单纯使用隐式绑定确定没有办法获得指望的绑定，幸亏咱们还能够在某个对象上强制调用函数，从而将this绑定在这个对象上。

规则：咱们能够经过apply、call、bind将函数中的this绑定到指定对象上。

function foo() {
    console.log(this.a);
}
let obj = {
    a: 2
};
foo.call(obj); // 2
复制代码

传入的不是对象：

若是你传入了一个原始值(字符串,布尔类型，数字类型)，来当作this的绑定对象，这个原始值转换成它的对象形式。

若是你把null或者undefined做为this的绑定对象传入call/apply/bind，这些值会在调用时被忽略，实际应用的是默认绑定规则。

new绑定：

书中提到：在js中，实际上并不存在所谓的'构造函数'，只有对于函数的'构造调用'。

new的时候会作哪些事情：

1. 建立一个全新的对象。
2. 这个新对象会被执行 [[Prototype]] 链接。
3. 这个新对象会绑定到函数调用的this。
4. 若是函数没有返回其余对象，那么new表达式中的函数调用会自动返回这个新对象。

规则：使用构造调用的时候，this会自动绑定在new期间建立的对象上。

function foo(a) {
  this.a = a; // this绑定到bar上
}
let bar = new foo(2);
console.log(bar.a); // 2
复制代码

this四种绑定规则的优先级

若是在某个调用位置应用了多条规则，如何肯定哪条规则生效？

obj.foo.call(obj2); // this指向obj2 显式绑定比隐式绑定优先级高。
    new obj.foo(); // thsi指向new新建立的对象 new绑定比隐式绑定优先级高。
复制代码

显式绑定和new绑定没法直接比较(会报错),默认绑定是不该用其余规则以后的兜底绑定因此优先级最低，最后的结果是：

显式绑定 > 隐式绑定 > 默认绑定

new绑定 > 隐式绑定 > 默认绑定

箭头函数的this指向不会使用上述的四条规则：

function foo() {
  return () => {
    console.log(this.a);
  };
}
let obj1 = {
  a: 2
};
let obj2 = {
  a: 22
};
let bar = foo.call(obj1); // foo this指向obj1
bar.call(obj2); // 输出2 这里执行箭头函数 并试图绑定this指向到obj2
复制代码

从上述栗子能够得出，箭头函数的this规则：

1. 箭头函数中的this继承于它外面第一个不是箭头函数的函数的this指向。
2. 箭头函数的 this 一旦绑定了上下文，就不会被任何代码改变。

闭包

一般，函数的做用域及其全部变量都会在函数执行结束后被销毁。可是，在建立了一个闭包之后，这个函数的做用域就会一直保存到闭包不存在为止。 闭包有三个特性：

1.函数嵌套函数

2.函数内部能够引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

// 释放对闭包的引用
add5 = null;
add10 = null;
复制代码

闭包的做用，就是保存本身私有的变量，经过提供的接口(方法)给外部使用，但外部不能直接访问该变量。

当咱们须要在模块中定义一些变量，并但愿这些变量一直保存在内存中但又不会“污染”全局的变量时，就能够用闭包来定义这个模块。

闭包的缺点：闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。

函数套函数就是闭包吗？：不是！，当一个内部函数被其外部函数以外的变量引用时，才会造成了一个闭包。

对象模式 函数内部定义个一个对象，对象中绑定多个函数（方法），返回对象，利用对象的方法访问函数内的数据

function createPerson() {
    var __name__ = "";
    return {
        getName: function () {
            return __name__;
        },
        setName: function( value ) {
            // 若是不姓张就报错
            if ( value.charAt(0) === '张' ) {
                __name__ = value;
            } else {
                throw new Error( '姓氏不对，不能取名' );
            }
        }
    }
}
var p = createPerson();
p.set_Name( '张三丰' );
console.log( p.get_Name() );
p.set_Name( '张王富贵' );
console.log( p.get_Name() );
复制代码

函数模式 函数内部定义一个新函数，返回新函数，用新函数得到函数内的数据

function foo() {
    var num = Math.random();
    function func() {
        return mun;
    }
    return func;
}
var f = foo();
// f 能够直接访问这个 num
var res1 = f();
var res2 = f();
复制代码

沙箱模式 沙箱模式就是一个自调用函数，代码写到函数中同样会执行，可是不会与外界有任何的影响，好比jQuery

(function () {
   var jQuery = function () { // 全部的算法 }
   // .... // .... jQuery.each = function () {}
   window.jQuery = window.$ = jQuery;
})();
$.each( ... )
复制代码

回收机制

在javascript中，若是一个对象再也不被引用，那么这个对象就会被垃圾回收机制回收； 若是两个对象互相引用，而再也不被第3者所引用，那么这两个互相引用的对象也会被回收。

变量声明提高

js 代码在运行前都会进行 AST 解析，函数申明默认会提到当前做用域最前面，变量申明也会进行提高。但赋值不会获得提高。

参考 https://juejin.im/post/5b3715def265da59af40a630#heading-2