js作用域&闭包

作用域

作用域是负责收集并维护由所有声明的变量组成的一系列查询，并且实施一套严格的规则，确定当前执行的代码对这些变量的访问权限 -- 《你不知道的javascript》

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突

1 作用域链

作用域有上下级的关系，会在当前作用域中寻找变量，如果找不到会沿着创建时作用域链一直往上找，直到找到全局作用域。

var a=1;
function f1(){
   var b=2;   
   function f2(){ 
     var c=3;
     console.log(a,b,c);
}  
f2();
}
f1();//1 ,2 ,3

2 作用域形成时机

作用域是在一个函数创建时就已经形成的，而不是调用时.

function a () {
    let b = 2;
    return function() {
        console.log(b)
    }
}
let b = 222
a(); // 2 而不是222

以上的示例调用a函数看似是在全局环境，但是其中的b却没有使用全局的b。而且去寻找定义时的b，没有找到则沿着创建时的作用域链往上找。结果是2

3 作用域类别

作用域包含全局作用域、函数作用域、和es6中新增的块级作用域。
在es6没有出来之前。我们避免变量污染全局的方法是使用函数作用域。

最常见的是使用自执行函数来包裹模块，这样函数中的变量只能在局部作用域中生效
(function() {
  // do something
})()

而在es6中新增的let和const可以将变量绑定到所在的任意作用域中通常是{...}，为其声明的变量隐式的劫持了所在的块级作用域。 -- 《你不知道的javascript》

for (var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i) // 10 10 ... 10
    }, 500)
}
// es6之前 需要使用自执行函数来创建函数作用域来隔绝变量
for (var i = 0; i < 10; i++) {
    (function(i){
        setTimeout(() => {
        console.log(i) // 10 10 ... 10
    }, 500)
    })(i)   
}
// 而es6中直接使用let就可以实现隔绝变量的作用
for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i) // 0 1 2 ... 9
    }, 500)
}

4 提升

代码被执行前会有声明提升的过程。只有声明本身会被提升，任何作用域都会进行提升操作。

{
    console.log(a);
    var a = 2;  
}
实际上被解析成如下：
{
        var a;
    console.log(a);
    a = 2;  
}

let和const声明不会被提升，但是不代表这个作用域中不会进行提升操作。

{
    console.log(a);  //  ReferenceError
    let a = 2;  
}

函数的提升是优先于变量的

foo();  // 1 打印出来的是1 而不是2
var foo;
function foo () {console.log(1)} 
foo = function() {console.log(2)}

this

this的优先级

1. 函数是否在new中调用，如果是的话this绑定的是新创建的对象

var bar = new foo();

2. 函数通过call、apply（显式绑定），或者bind（硬绑定）。this绑定的是指定的对象

var bar = foo.call(obj)

3. 函数是否在某个上下文对象中调用（隐式绑定）如果是则绑定的是那个上下文对象

var bar = obj.foo()

4. 如果都不是的话使用默认绑定，严格模式下undefined，否则都是全局对象

var bar = foo()

apply、call都是执行本身的函数，而bind是返回一个新函数。而且可以用来做函数柯里化

function foo(a,b){
    console.log("a"+a+",b:""+b);
}
var bar = foo.bind(null, 2);
bar(3) // a:2 b:3

1 构造函数中this

function Kimi() {
    this.name = 'kimi'
    console.log(this)  // 'kimi'
}
new Kimi 

如何直接执行Kimi() this指向window

2 函数作为对象的一个属性

let kimi = {
    name : 'kimi',
    say: function() {
        console.log(this.name) // 'kimi'
    }
}
kimi.say()  // 这样调用打印的是‘kimi’

如果不作为属性调用
let  a = kimi.say;
a(); // 这样调用打印的是window

3 使用call和apply

let kimi = {
    name : 'kimi'
}
let say = function() {
    console.log(this.name)  // 'kimi'
}
say.call(kimi); 

4 全局

全局中的this一直指向window

let name = 'kimi';
let say = function() {
    console.log(this);  // window
    console.log(this.name);  // 'kimi'
}
say();

有以下情况：

let kimi = {
    name : 'kimi',
    say: function() {
        function a () {
                    console.log(this.name)  // 'undefined'
                }
                a();
    }
}
kimi.say();

函数a虽然是在kimi.say内部定义的，但是它仍然是一个普通的函数，this仍然指向window。如果需要重新指向kimi则需要使用箭头函数或者用let that = this;保存引用

5 this的用途

this可以动态的绑定执行的对象，起到复用代码的作用

jQuery.extend = jQuery.fn.extend = function() {
    target = this;
}

jQuery.extend和jQuery.fn.extend都指向了同一个函数，但是当执行时，函数中的this是不一样的。
执行jQuery.extend(…)时，this指向jQuery；执行jQuery.fn.extend(…)时，this指向jQuery.fn。

闭包

在一个函数内部定义的另一个函数，当内部函数在包裹他的函数之外被执行时，就会形成闭包。同时内部函数仍然可以访问到包裹函数中的局部变量与函数。
闭包的两个常见用途

1. 函数作为返回值

封装变量 避免全局中被修改 ，并且记录状态。状态不会销毁丢失
function isFirst() {
    var _list = [];
    return function(id) {
        if(_list.includes(id)) {
            return false
        } 
        _list.push(id)
        return true;
    }
}
var first = isFirst()
first(10) // true
first(10) // false
first(20) // true

2. 函数作为参数

function wait(message) {
    setTimeout(function timer() {
        console.log(message);
    }, 1000) 
}
wait('hello');

timer 函数传递给setTimeout(),timer就具有了涵盖wait()作用域的闭包，因此保有对变量message的引用，等到1000回调执行后，wait的内部作用域不会消失

在定时器、事件监听器、Ajax请求、跨窗口通信、webworker、或者其他的异步或者同步的任务中，只要使用了回调函数，实际上就在使用闭包。