前端点滴

作者: 如画 | 来源:发表于2015-11-25 19:27 被阅读166次

javascript中的执行环境 作用域链和闭包

在浏览器中当js代码被加载和函数调用的过程中都发生了怎样的变化呢?
大家都知道javascript是一种解释型或弱类型的语言,它没有像c c++语言那样的编译过程,js代码的运行机制是边解析边执行的,函数的执行均在解析后所创建的执行环境内完成。下面先说说自己对执行环境和作用域链的理解。

执行环境:函数或对象有权访问自身数据的范围。当函数被调用时会创建一个执行环境及对应的变量对象,这个变量对象包含this arguments 命名参数及其他变量。

作用域链:当函数被创建时会预先包含一个指向全局变量对象(始终存在的)的指针,并赋给函数的内部属性[[scope]]中,自身的活动对象的引用也存储在这个属性中,当函数被嵌套时还会包含外层函数的活动对象,这样就形成了一个包含变量对象的指针列表,也就是作用域链。下面举个例子。

在这个例子中,当函数compare被创建时会预先包含一个指向全局变量对象的指针(全局变量对象是始终存在的)并保存在scope中,当执行compare()时会先创建一个活动对象,两个变量对象及作用域链如下图所示。

当有函数嵌套时,过程也是类似的,此时闭包的作用域链中还包含外层函数的作用域,访问作用域中对象变量的次序是从当前函数的活动对象到外层变量对象依次 查询 读写相关变量。

其实,清晰的理解执行环境和作用域的创建过程及作用对理解变量声明提前, this对象的指向 ,闭包的副作用,和命名空间(模仿块级作用域)有重要意义。

先看闭包中this的指向问题,当闭包作为普通函数调用时,则其执行环境具有全局性,即活动对象中的this指向window;当作为对象方法调用时,则执行环境在该对象中,故this指向调用对象。请看下面的一段代码。

上图中红色椭圆处就是一个闭包,可以看出当闭包以不同的方式调用时,其this指向是不同的,

当闭包沿着作用域链访问外层函数的活动变量时,不是按值访问而是按引用访问,所以闭包只能取得外层函数任何变量的最后一个值。请看下面的一段代码。

可以看出最后输出了6个6,而不是0-5;这是因为闭包中的i 是外层函数的变量,每次循环闭包只是取得了指向i的指针,当for循环结束后,i 的值为6,所以函数数组中的每个函数最终取得的值都为6,故下面循环打印出了6个六,要想输出0-5,就要利用函数的参数按值传递的特点进行处理。为了进行参数的传递,可以在闭包的外层创建一个立即执行函数来实现,对代码的处理如下图

虽然最后返回的闭包还是引用num,但由于每次循环,闭包的外层函数的num都是用参数传递过来的,所以最后保存了六个不同的值。当setTimeout()函数在for循环里时也可以用这种方法进行处理。

在javascript语言中,执行环境是最重要的一个概念,常见的作用域链 闭包 命名空间 this指向等问题都是以此基础进行分析的,所以在这分享一下个人的理解,有不足之处,还望指正。

相关文章

  • 前端点滴

    javascript中的执行环境 作用域链和闭包 在浏览器中当js代码被加载和函数调用的过程中都发生了怎样的变化呢...

  • 前端技术点滴

    30. array 使用 29. replace用法 28. 对象数组 27. 数组 splice()方法 26...

  • 新的征程

    从今天开始在这里写下自己对于工作(前端)的记录,和点点滴滴

  • js学习note1 返回2个数组之间的差异*

    想通过某个途径记录下JavaScript学习点滴,注册简书,开启前端小白皮皮M的JavaScript学习之旅,决心...

  • 前端路上的点点滴滴

    我刚开始知道有前端这个工作的时候,是我刚上大二的时候,我也是那时候,开始接触的前端。刚开学,就是从html、css...

  • app终于上架了

    app终于上架了。 感谢我们的UI设计师在整个过程中乐此不疲的点滴设计。感谢我们的前端工程师在面对下一秒可能就要立...

  • 点点滴滴

    点点滴滴……点点滴滴……点点滴滴……点点滴滴……点点滴滴……点点滴滴……点点滴滴……点点滴滴……点点滴滴……

  • 前端从零开始——第一周笔记

    [TOC]开通简书记录一下我在学习前端路上的点点滴滴,有我的笔记,也有过程中所遇到的问题,希望能帮助到有需要的人!...

  • 点滴点滴

  • 2020-09-08 粗心记(纪狂妄自大的自己愿改过)

    时隔一年多,在这里我想记录我的点滴,我已经毕业了,刚步入社会,但我现在选择来某机构培训成为一名前端。 事情是这...

网友评论

    本文标题:前端点滴

    本文链接:https://www.haomeiwen.com/subject/wstdhttx.html