作用域和闭包

词法作用域和动态作用域

作用域：

1. 作用域是指程序源代码中定义变量的区域；作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限；
2. JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。

词法作用域
函数的作用域在函数定义的时候就决定了。JavaScript 采用的是词法作用域。

动态作用域
函数的作用域是在函数调用的时候才决定
例子：

var name ="logic"
function getName(){
return name;
}
function getNameWrap(){
var name = 'wind'
return getName()
}
console.log(getNameWrap()) // 输出 logic 。因为 JavaScript 是词法作用域，在函数定义时就确定了变量的访问。

作用域链

定义：当查找变量的时候，会先从当前上下文的变量查找，如果没有找到，就从父级（词法层面的父级）执行上下文的变量对象查找，一直找到全局上下文的变量对象，也就是全局对象。由多个执行上下文的变量对象构成的链，就是作用域链。
作用：保证对执行环境有权访问的所有变量和函数的有序访问

js执行上下文和执行上下文栈

执行上下文
概念：当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)
执行上下有三个重要属性(也就是前面 3 题所说的内容) ：变量对象；作用域链；this
执行上下文栈
每个函数都会创建执行上下文，执行上下文栈（Execution context stack，ECS）就是 JavaScript 引擎创建出来管理执行上下文的
执行上下文栈是有全局上下文初始化，由于执行代码首先是全局代码。全局上下文永远在执行上下文栈中的最底下，只有等程序关闭才释放。

函数声明和函数表达式的区别

 

 

f1: 声明式创建的函数 f1 可以在 f1 定义之前就进行调用；
f2: 函数表达式创建的函数 f2 不能在 f2 被赋值之前进行调用
出现这个陷阱的本质原因体现在这两种类型在Javascript function hoisting(函数提升）和运行时机（解析时/运行时）上的差异。
函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用
函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。

this 几种不同场景的取值

显示绑定
call，apply，bind可以显示的修改this的指向
隐式绑定

1. 全局上下文：this 指向 window,严格模式下为 undefined
2. 直接调用函数：this 指向 window,严格模式下为 undefined
3. 作为对象的方法调用：那个对象调用，this指向那个对象；obj.foo()。 this 指向对象 obj
4. DOM 事件的绑定：onclick和addEventerListener中 this 默认指向绑定事件的元素
5. new 构造函数绑定：构造函数中的 this 指向实例对象
6. 箭头函数：
   箭头函数没有 this, 因此也不能绑定
   在箭头函数里的 this 会指向 外层的非箭头函数的 this。
   
   

闭包

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行（通俗一点： 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回） 在代码中引用了自由变量）

通过例子来了解闭包

例子1：

function fn1() {
    var name = 'iceman';
    function fn2() {
        console.log(name);
    }
    return fn2;
}
var fn3 = fn1();
fn3();

正常来说，当fn1函数执行完毕之后，其作用域是会被销毁的，然后垃圾回收器会释放那段内存空间。而闭包却很神奇的将fn1的作用域存活了下来，fn2的词法作用域能访问fn1的作用域。fn2依然持有该作用域的引用，这个引用就是闭包。
总结：某个函数在定义时的词法作用域之外的地方被调用，闭包可以使该函数极限访问定义时的词法作用域

例子2：

function waitSomeTime(msg, time) {
    setTimeout(function () {
        console.log(msg)
    }, time);
}
waitSomeTime('hello', 1000);

定时器中有一个匿名函数，该匿名函数就有涵盖waitSomeTime函数作用域的闭包，因此当1秒之后，该匿名函数能输出msg

例子3：

for (var i = 1; i <= 10; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}
// 输出了 10个 11

i是声明在全局作用中的，定时器中的匿名函数也是执行在全局作用域中，那当然是每次都输出11了。

解决方案:我们可以让i在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前i的值。

for (var i = 1; i <= 10; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j);
        }, 1000);
    })(i);
}

什么是堆栈溢出？什么是内存泄漏？那些操作会造成内存泄漏？怎么样防止内存泄漏？

堆栈溢出：代码执行前都会进行编译和创建执行上下文。而管理执行上下文的叫做执行上下文栈。栈有个特点就是后进先出。同时执行上下文栈是有大小限制的。当执行上下文栈大小超过限制就会产生栈溢出错误。经常发生在递归中。

内存泄漏：JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。不在使用，没有释放的内存，称为内存泄漏
造成内存泄漏的原因：闭包，意外的全局变量，循环（在两个对象彼此引用且彼此保留时，就会产生一个循环），脱离 DOM 的引用
示例：

// 意外全局变量
function foo(arg) {
    bar = "this is a hidden global variable";
}

// 脱离 DOM 的引用
const button = document.getElementById('button');
document.body.removeChild(button);
// 此时，仍旧存在一个全局的 #button 的引用,button 元素仍旧在内存中，不能被 GC 回收。

// 闭包
(function (){
    let num = 1;
    return function add(a,b){
        return a+b;
    }
})()

如何处理循环的异步操作

function getMoney(){
    var money=[100,200,300]  
    for( let i=0; i<money.length; i++){
        compute.exec().then(()=>{
            console.log(money[i])
            //alert(i)
        })
    }
}
//compute.exec()这是个异步方法,在里面处理一些实际业务
//这时候打印出来的很可能就是300,300,300（因为异步for循环还没有等异步操作返回Promise对象过来i值已经改变）
正确处理思路

关键字async/await async告诉getMoney方法里面存在异步的操作，await放在具体异步操作（方法）前面，意思是等待该异步返回Promise才会继续后面的操作

async function getMoney(){
    var money=[100,200,300]  
    for( let i=0; i<money.length; i++){
        await compute.exec().then(()=>{
            console.log(money[i])
            //alert(i)
        })
    }
}

另外一种处理思路：使用递归
用递归来实现自我循环（具体循环在then里面，可以确保前面的compute.exec()的异步操作完成）.then()是返回了Promise对象为resolve后才进行的（可以了解一下Promise对象）

function getMoney(i) {
　　var money=[100,200,300]
　　compute.exec().then(() => {
　　　　if ( i < money.length ) { 　
　　　 　　console.log(money[i]);
　　　 　　i++;
      　　getMoney(i);
    　　}
  　});
}
getMoney(0);//开始调用