作用域和闭包

词法作用域和动态作用域

作用域:

  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 默认指向绑定事件的元素;
    setTimeout的函数内this是window(非严格模式下)
  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);
}


闭包的应用场景

https://juejin.im/post/5d7747185188254dc43a610a
https://juejin.im/post/5d50c6ef6fb9a06b1d21358d

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

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

内存泄漏: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);//开始调用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容