1.执行环境(执行上下文)

先看段代码

var  a = 10;
var  b = 20;

function cc(){
var c = 30; alert("b="+b); } cc();
alert(c);//报错

为什么我们在函数cc中可以访问到全局变量b而外部却访问不了局部变量c呢?

这就是执行环境的作用:它定义了变量或函数是否有权访问其他数据,决定各自行为。

在javascript中有三种可执行的类型

1.Global Code,即全局的、不在任何函数里面的代码,例如:一个js文件、嵌入在HTML页面中的js代码等。

2.Eval Code,即使用eval()函数动态执行的JS代码。

3. Function Code,即用户自定义函数中的函数体JS代码。

不同的类型有不同的执行环境,我们只讨论全局执行环境和函数执行环境

2.每一个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中

在这个方框里就是一个大的执行环境对应的有一个变量对象,这个变量对象我们在程序中是没法访问它的,那它的作用是什么呢?

我们定义的变量a,b,函数cc都是定义在变量对象(variable Object),后台在解析的时候是解析的变量对象的,这就是变量对象的概念。

3.作用域链

看段代码

//执行环境window对象(最上层的执行环境)
var color1 = "blue";
function changeColor(){ //每一个函数都有一个执行环境
    var color2 ="red";
    function swapColor(){
        var color3 = color2;
         color1 = color3;
         //这里可以访问color1,2,3
     }
     //这里可以访问color1,color2,但不可以访问color3
    swapColor();
}
 //这里只能访问color1
changeColor();//第一个作用环境 changeColor是最外层的window作用域,

在上面的大的执行环境中,可以看到变量color1和函数changeColor,执行changeColor(),代码会从color2代码开始执行到完毕。

当代码执行到swapColor函数的时候,这个函数又产生了一个执行环境(因为每一个函数都有一个执行环境),

当执行到  var color3 = color2;代码中就相当于

    var color2 ="red";
    function swapColor(){
        var color3 = color2;
         color1 = color3;
         //这里可以访问color1,2,3
     }

color2是全局变量所以函数swapColor可以访问到。

当访问到swapColor()是不可以访问到color3的。

所以我们就得出一个作用域链的概念

当我们的执行环境依次执行到changeColor和swapColor时会产生一个链条,这个链条决定了整个变量的访问权限

环境变量一层一层的向上进行追溯,可以访问它的上级环境(变量和函数)

这就是作用域链的概念

就是一层一层的向上找

c3可以访问c2也可以访问c1  但不能向下访问 。

假设c1是一级作用域,c2是二级作用域,c3是三级作用域

在c3中访问c1它会怎么做呢

      1.先在swapColor函数内查找c1 结果没有发现c1

2.继续向上查找

3.发现c2作用域还是没发现c1

4.继续向上查找

5.找到c1

(完

下一章

javascript痛点之三闭包

javascript痛点之二作用域链的更多相关文章

  1. javascript深入理解-从作用域链理解闭包

    一.概要 红宝书(P178)对于闭包的定义:闭包就是有权访问另外一个函数作用域中变量的函数. MDN,对于闭包的定义:闭包就是指能够访问自由变量的函数. 那么什么是自由变量?自由变量就是在函数中使用, ...

  2. Javascript 运行上下文和作用域链

    一.作用域Scope和上下文Context 在javascript中,作用域scope和上下文context是两个不同的概念.每个函数调用都会伴随着scope和context,从本质上来说,scope ...

  3. 深度剖析Javascript执行环境、作用域链

    一.执行环境 执行环境(也叫做执行上下文,Execution Context)是Javascript中最为重要的一个概念.执行环境定义了变量或函数有权访问其他数据,决定了它们各自的行为.每个执行环境都 ...

  4. JavaScript 执行环境以及作用域链

    执行环境(execution context,为简单起见,有时也称为"环境")是 JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们 ...

  5. JavaScript高级程序设计之作用域链

    JavaScript只有函数作用域:每个函数都有个作用域链直达window对象. 变量的查找由内而外层层查找,找到即止. 同时不仅可以查找使用,甚至可以改变外部变量. var color = &quo ...

  6. Javascript中闭包的作用域链

    作用域定义了在当前上下文中能够被访问到的成员,在Javascript中分为全局作用域和函数作用域,通过函数嵌套可以实现嵌套作用域. 闭包一般发生在嵌套作用域中.闭包是JavaScript最强大的特性之 ...

  7. javaScript执行环境、作用域链与闭包

    一.执行环境 执行环境定义了变量和函数有权访问的其他数据,决定了他们各自的行为:每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中.虽然我们编写的代码无法访问这个对象 ...

  8. 【进阶2-2期】JavaScript深入之从作用域链理解闭包(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记   https://github.com/yygmind/blog/issues/18 红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一 ...

  9. javascript 执行环境,作用域链和闭包

    首先看下这条语句: (function($) {…})(jQuery): 1.原理: function(arg){…}这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...

随机推荐

  1. vue2.0版cnode社区项目搭建及实战开发

    _________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...

  2. WinForm中控件位置不随窗体大小的变化而改变

    背景:在窗体开发中使控件的位置不随窗体的大小改变而变化的问题?这是一个同事在开发时遇到的问题,在思考试错之后,写出如下代码. 声明成员: Point m_InitLocation; Size m_In ...

  3. Lucene工作原理

    Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引结构.该结构及相应的生成算法如下: 0)设有两篇文章1和2 文章1的内容为:Tom lives in Guangzhou,I l ...

  4. 一、AspNet Core通过控制台编译程序的基本指令:

    1.先创建文件夹 mkdir "文件夹"2.在对应的文件夹里边 用 dotnet new 命令创建了Program.cs和project.json俩个文件3.使用 dotnet r ...

  5. [Git]05 如何使用分支

     作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发 ...

  6. 如何使用python生成xml

    最近要用python生成一个xml格式的文件.因为有一些内容是中文,原来的xml文件中使用了CDATA 的部分. 而之前的python程序所用的库中没有 创建这个区域的方法.无奈研究了大半天. 最后用 ...

  7. python 基础之pickle 与json 报错问题解决方案

    Python 基础之pickle与json 有没有在搞pickle与json在进行数据储存的时候老是报错,这个有些让人烦恼,在之前有一篇介绍过它们的基本用法以及在使用过长中避免一些坑,但是今天在把对象 ...

  8. redis 编译安装(生产环境推荐)

    一.安装redis 1.下载redis包 wget http://download.redis.io/releases/redis-3.2.1.tar.gz 2.解压redis包到/opt下 tar ...

  9. jQuery选择器的优点

    jQuery选择器的优点 相信小伙伴们对选择器并不陌生,从css1到css3的选择器有很多,但是JQuery都能完美的支持,而且API操作起来也特别方便好用,在很大程度上精简了代码,节约了很多性能.那 ...

  10. Trie树详解

    1. 概述 Trie树,又称字典树,单词查找树或者前缀树,是一种用于快速检索的多叉树结构,如英文字母的字典树是一个26叉树,数字的字典树是一个10叉树.Trie一词来自retrieve,发音为/tri ...