JavaScript系列----作用域链和闭包

1.作用域链

1.1.什么是作用域

谈起作用域链,我们就不得不从作用域开始谈起。因为所谓的作用域链就是由多个作用域组成的。那么, 什么是作用域呢?

1.1.1作用域是一个函数在执行时期的执行环境。

每一个函数在执行的时候都有着其特有的执行环境,ECMAScript标准规定,在javascript中只有函数才拥有作用域。换句话,也就是说,JS中不存在块级作用域。比如下面这样:

function getA() {
  if (false) {
    var a = 1;
  }
  console.log(a);  //undefined
}
getA();
function getB() {
  console.log(b);
}
getB();    // ReferenceError: b is not defined

上面的两段代码,区别在于 :getA()函数中,有变量a的声明,而getB()函数中没有变量b的声明。

另外还有一点,关于作用域中的声明提前。

1.1.2.作用域中声明提前

在上面的getA()函数中,或许你还存在着疑惑,为什么a="undefined"呢,具体原因就是因为作用域中的声明提前:所以getA()函数和下面的写法是等价的:

function getA(){
   var a;
  if(false){
    a=1
    };
  console.log(a);
}

既然提到变量的声明提前,那么只需要搞清楚三个问题即可:

  1.什么是变量

2.什么是变量声明

3.声明提前到什么时候。

什么是变量?

  变量包括两种,普通变量和函数变量。 

  • 普通变量:凡是用var标识的都是普通变量。比如下面 :

    var x=1;
    var object={};
    var  getA=function(){};  //以上三种均是普通变量,但是这三个等式都具有赋值操作。所以,要分清楚声明和赋值。声明是指 var x; 赋值是指 x=1; 
  • 函数变量:函数变量特指的是下面的这种,fun就是一个函数变量。

    function fun(){} ;// 这是指函数变量. 函数变量一般也说成函数声明。

    类似下面这样,不是函数声明,而是函数表达式

    var getA=function(){}      //这是函数表达式
    var getA=function fun(){}; //这也是函数表达式,不存在函数声明。关于函数声明和函数表达式的区别,详情见javascript系列---函数篇第二部分

什么是变量声明?

     变量有普通变量和函数变量,所以变量的声明就有普通变量声明和函数变量声明。

  • 普通变量声明

    var x=1; //声明+赋值
    var object={};   //声明+赋值

    上面的两个变量执行的时候总是这样的

    var x = undefined;      //声明
    var object = undefined; //声明
    x = 1;                  //赋值
    object = {};            //赋值

    关于声明和赋值,请注意,声明是在函数第一行代码执行之前就已经完成,而赋值是在函数执行时期才开始赋值。所以,声明总是存在于赋值之前。而且,普通变量的声明时期总是等于undefined.

  • 函数变量声明
    函数变量声明指的是下面这样的:

    function getA(){}; //函数声明

声明提前到什么时候?

        所有变量的声明,在函数内部第一行代码开始执行的时候就已经完成。-----声明的顺序见1.2作用域的组成

1.2.作用域的组成

函数的作用域,也就是函数的执行环境,所以函数作用域内肯定保存着函数内部声明的所有的变量。

一个函数在执行时所用到的变量无外乎来源于下面三种:

1.函数的参数----来源于函数内部的作用域

2.在函数内部声明的变量(普通变量和函数变量)----也来源于函数内部作用域

3.来源于函数的外部作用域的变量,放在1.3中讲。

比如下面这样:

var x = 1;
function add(num) () {
  var y = 1;
  return x + num + y;   //x来源于外部作用域,num来源于参数(参数也属于内部作用域),y来源于内部作用域。
}

那么一个函数的作用域到底是什么呢?

在一个函数被调用的时候,函数的作用域才会存在。此时,在函数还没有开始执行的时候,开始创建函数的作用域:

  函数作用域的创建步骤:

1. 函数形参的声明。

2.函数变量的声明

3.普通变量的声明。

4.函数内部的this指针赋值

......函数内部代码开始执行!

所以,在这里也解释了,为什么说函数被调用时,声明提前,在创建函数作用域的时候就会先声明各种变量。

关于变量的声明,这里有几点需要强调

1.函数形参在声明的时候已经指定其形参的值。

function add(num) {
  var num;
  console.log(num);   //1
}
add(1);

2.在第二步函数变量的生命中,函数变量会覆盖以前声明过的同名声明。

function add(num1, fun2) {
  function fun2() {
    var x = 2;
  }
  console.log(typeof num1); //function
  console.log(fun2.toString()) //functon fun2(){ var x=2;}
}
add(function () {
}, function () {
  var x = 1
}); 

3.  在第三步中,普通变量的声明,不会覆盖以前的同名参数

function add(fun,num) {
  var fun,num;
  console.log(typeof fun) //function
  console.log(num);      //1
}
add(function(){},1);

在所有的声明结束后,函数才开始执行代码!!!

1.3.作用域链的组成

在JS中,函数的可以允许嵌套的。即,在一个函数的内部声明另一个函数

类似这样:

function A(){
  var  a=1;
   function B(){  //在A函数内部,声明了函数B,这就是所谓的函数嵌套。
         var b=2;
   }
}

对于A来说,A函数在执行的时候,会创建其A函数的作用域, 那么函数B在创建的时候,会引用A的作用域,类似下面这样

函数B在执行的时候,其作用域类似于下面这样:

    从上面的两幅图中可以看出,函数B在执行的时候,是会引用函数A的作用域的。所以,像这种函数作用域的嵌套就组成了所谓的函数作用域链。当在自身作用域内找不到该变量的时候,会沿着作用域链逐步向上查找,若在全局作用域内部仍找不到该变量,则会抛出异常。

2.闭包

首先,要认识到一点,闭包是为了解决一种问题。那么,它是为了解决什么问题呢?

看下面的这道例题:

var funB,
funC;
(function() {
  var a = 1;
  funB = function () {
    a = a + 1;
    console.log(a);
  }
  funC = function () {
    a = a + 1;
    console.log(a);
  }
}());
funB();  //2
funC();  //3.

对于 funB和funC两个函数,在运行的时候,就会改变函数A中的变量a的值,这种情况就会污染了a变量。

两个函数的在运行的时候作用域如下图:

这这幅图中,变量a可以被函数funB和funC改变,就相当于外部作用域链上的变量对内部作用域来说都是静态的变量,这样,就很容易造成变量的污染。还有一道最经典的关于闭包的例题:

var array = [
];
for (var i = 0; i < 10; i++) {
  var fun = function () {
    console.log(i);
  }
  array.push(fun);
}
var index = array.length;
while (index > 0) {
  array[--index]();
} //输出结果 全是10;

想这种类似问题产生的根源就在于,没有注意到外部作用域链上的所有变量均是静态的。

所以,为了解决这种变量的污染问题进而引入了闭包!

那种它是如何解决的呢?  思想就是: 既然外部作用域链上的变量时静态的,那么将外部作用域链上的变量拷贝到内部作用域不就可以啦!! 具体怎么拷贝,当然是通过函数传参的形式啊。

以第一道例题为例:

var funB,funC;
(function () {
  var a = 1;
  (function () {
    funB = function () {
      a = a + 1;
      console.log(a);
    }
  }(a));
  (function (a) {
    funC = function () {
      a = a + 1;
      console.log(a);
    }
  }(a));
}());
funB()||funC();  //输出结果全是2 另外也没有改变作用域链上a的值。

在函数执行时,内存的结构如图所示:

由图中内存结构示意图可见,闭包的引入其实是牺牲了性能,因为匿名函数的执行延长了作用域链,且多复制了一份变量。

时间: 2024-10-27 04:10:30

JavaScript系列----作用域链和闭包的相关文章

JavaScript中作用域链和闭包

一.匿名函数 1.1 匿名函数的概念 ? 声明一个没有函数名的函数,就是匿名函数. ? 有函数名的函数就是具名函数. 看下面的代码: <script type="text/javascript"> /* //这里定义了一个函数,而且没有函数名.这样写语法是错误的,如果允许这样定义,那么根本就没有办法调用. //所以,我们可以用一个变量来存储一下 function(){ } */ // 声明了一个匿名函数,并把匿名函数赋值给变量f. 注意这个时候这个匿名函数并没有执行. va

JavaScript中的作用域链和闭包

JavaScript中的作用域链和闭包 2012-06-29 11:41 1878人阅读 评论(46) 收藏 举报 JavaScript中出现了一个以前没学过的概念——闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥

Javascript的作用域、作用域链以及闭包

一.javascript中的作用域 ①全局变量-函数体外部进行声明 ②局部变量-函数体内部进行声明 1)函数级作用域 javascript语言中局部变量不同于C#.Java等高级语言,在这些高级语言内部,采用的块级作用域中会声明新的变量,这些变量不会影响到外部作用域. 而javascript则采用的是函数级作用域,也就是说js创建作用域的单位是函数. 例如: 在C#当中我们写如下代码: static void Main(string[] args) { for (var x = 1; x < 1

个人理解的javascript作用域链与闭包

闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: 1 function f1(){ 2 3 n=100; 4 5 function f2(){ 6 alert(n); 7 } 8 9 return f2; 10 11 } 12 13 var result=f1(); 14 15 result(); // 100 代码中的f2函数,就是闭包. 1 function f1(){ 2 3 var n=100; 4 5 nAdd=function(){n+=1

JavaScript中的作用域 、作用域链和闭包

JavaScript中作用,作用域链和闭包详解 一.作用域在js中有全局变量和局部变量之分:比如var a = 1;function sum(){var b=1console.log(b) //1console.log(a) //2 }sum()console.log(a) //3console.log(b) //4 例子中 a 是全局变量,b是局部变量(定义在函数内部,只能在函数内部访问)所以第1行正确 函数内部也能访问全局变量 a所以第2行也能正确 第三行也正确.第4行有外部不能访问内部变量

JS详细图解作用域链与闭包

JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包.面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上. 可是为什么,闭包如此重要,还是有那么多人没有搞清楚呢?是因为大家不愿意学习吗?还真不是,

在chrome开发者工具中观察函数调用栈、作用域链与闭包

在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快速定位代码错误,快速了解代码的执行过程有着非常重要的作用,这也是我们前端开发者必不可少的一个高级技能. 当然如果你对JavaScript的这些基础概念[执行上下文,变量对象,闭包,this等]了解还不够的话,想要透彻掌握断点调试可能会有一些困

1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This

参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p/32042645 Javascript 是一种单线程编程语言,这意味着它只有一个调用栈,call Stack(调用栈 ,,先入后出) 核心:对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This js原型链? 定义 原型对象也是简单的对象并且可以拥有它们自

JavaScript的作用域链

问题的提出 首先看一个例子: var name = 'laruence'; function echo() { alert(name); var name = 'eve'; alert(name); alert(age); } echo(); 运行结果是什么呢? 上面的问题, 我相信会有很多人会认为是: laruence eve [脚本出错] 因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’.