JavaScript的作用域和闭包原理

一、JavaScript的作用域

1.什么是作用域?                        在JS里面,作用域可以理解为变量的有效范围。相信都能理解。。
2.作用域的类别?                        全局作用域(Global Scope)和局部作用域(Local Scope) 
3.如何判断是全局还是局部作用域?
全局:
1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
2)所有末定义直接赋值的变量自动声明为拥有全局作用域
3)所有window对象的属性拥有全局作用域
局部:
函数内部用var声明的变量

作用域解析方法---词法分析
一段JS代码,一般可以分为2个阶段:变量声明阶段(词法分析阶段)和代码执行阶段
所谓的词法分析,就是分析一个变量到底是谁的过程,具体的步骤如下:

1.第一步:分析参数
2.第二步:分析变量声明
3.第三步:分析函数声明

再具体拆分步骤如下:
0.函数运行前,生成Active Object(活动对象),该对象就是一个容器,里面放所有的变量以及对应的值
1.把声明的参数放到AO里面,值全部为undefined,之后接收实参(就是外面传过来的)形成AO的属性,参数的值就是属性的值
2.分析变量声明,对于带有var的变量,
        如果AO上没有此属性,则添加此属性,值是undefined
        如果AO上已经有此属性,则没影响
        
3.分析函数声明,如function foo(){}
  则把函数赋给AO.foo属性,如果此前该属性已经存在,则覆盖
  注意:函数也可以直接被赋值,在JS里面,一切皆对象,函数也可以作为对象来传递。


栗子解析:
1:词法分析过程:0.形成AO
                              1.参数age放进AO,值为undefined,外界是否有值传进?t()时没有,则age=undefined,t(5)时则age=5
                              2.无var,跳过
                              3.无函数声明,跳过
      代码执行过程:1.alert(age)---t()时为undefined,t(5)时则为5

2:词法分析:0.AO
                       1.age生成等于undefined,之后外界传值age=null
                       2.var声明age
                       3.函数声明g()
     代码执行:1.g=“hello”
                       2.alert(g)----hello
                       3.alert(g)---hello

3:词法分析:0.AO={}
                       1.AO={b:undefined},b=1;
                       2.AO={b:function(){..}}
     代码执行:1.alert(b)---函数
                       2.b()----函数

4:词法分析:0.AO={}
                       1.AO={b:undefined},b=1;
                       2.此处b为赋值,不在词法分析过程中
     代码执行:1.alert(b)---1
                       2.b=function (){alert(b);}---函数
                      
OK,看了以上的分析,是否已经清晰了一点呢,反正一步步来,基本是不会错的啦。

附加题: 
Q:谈谈对(function(window,undefined){})(window)的理解?
A:这是jquery最外层代码,(function(window,undefined){})是内层表达式,返回值是函数,
而(function(window,undefined){})()是一个立即执行的匿名函数

Q:为什么传window,后面不传undefined?
A:传window是为了速度,加快内部查找的速度
   不传undefined是为了安全, IE,FF低版本,undefined可以赋值
   声明了又不传值的话,值肯定是undefined,所以外界影响不了了

拓展:当函数嵌套时,每个函数内都会生成AO,如果在本函数内找不到变量,就会去上层的AO找,最后找不到去
window上找,这样就会形成一个链条,也就是作用域链,或者说是AO链。

二、JavaScript的闭包原理

什么是js(JavaScript)的闭包原理,有什么作用?

一、定义

官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

个人的理解是这样的:****定义在函数中的函数,并且可在外部访问得到。(正常情况下我们是无法访问局部函数   的)这就有点儿类似脱了裤子放屁的意思,多此一举,可是并非多此一举。闭包肯定有   它的作用的。

 作用:1、可以减少全局变量的对象,防止全局变量过去庞大,导致难以维护

         2、防止可修改变量,因为内部的变量外部是无法访问的,并且也不可修改的。安全

         3、读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。 

二、例子:(JS代码)

1.Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 


var n=999;
  function f1(){
    alert(n);
  }
  f1(); // 999


2.另一方面,在函数外部自然无法读取函数内的局部变量。 

  function f1(){
    var n=999;
  }
  alert(n); // error


这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量! 

  function f1(){
    n=999;
  }
  f1();
  alert(n); // 999

 

*****如何从外部读取局部变量? 

我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

 

function f1(){
    n=999;
    function f2(){
      alert(n); // 999
    }
  }

三、使用闭包的注意点 

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。 


2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便
改变父函数内部变量的值。 

原文地址:https://www.cnblogs.com/xiaofox0018/p/5991977.html