作用域和闭包

词法作用域和动态作用域

作用域:

  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);//开始调用
原文地址:https://www.cnblogs.com/xiewangfei123/p/12899919.html