javascript 之小白学习指南 专题 --作用域

小白专题 之 作用域

在开始之前我们先来看一段代码

var name = 'csdn';
  function print() {
       alert(name);
       var name = 'tomihao';
       alert(name);
       alert(age);
  }
  print(); 

结果是什么呢？ 我们把alert 换成console 运行一下；

居然是undefined 为什么不是 csdn  ，tomihao ,脚本报错；

首先让我们来了解一个概念：

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里

在JS中，作用域的概念和其他语言差不多， 在每次调用一个函数的时候 ，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域.

任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中

注意, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候,

 var name = 'csdn';
     function print() {
          alert(name);
     }
 
     function print1() {
          var name = 'tomihaohao';
          print();
     }
 
     print();

那么输出的结果是什么 ？ 是csdn  不是 tomihaohao

下面我们在看看这个例子

function factory() {
     var name = 'csdn';
     var intro = function(){
          alert('I am ' + name);
     }
     return intro;
}
 
function app(para){
     var name = para;
     var func = factory();
     func();
}
 
app('tomihaohao');

下面我们利用上面说的定义来分析下这个例子

定义：

在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中

首先

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’tomihaohao’的属性para;

[[scope chain]] = [
{
     para : 'tomihaohao',
     name : undefined,
     func : undefined,
     arguments : []
}, {
     window call object
}
]

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

[[scope chain]] = [
{
     name : undefined,
     intor : undefined
}, {
     window call object
}
]

注意到, 此时的作用域链中, 并不包含app的活动对象.
在定义intro函数的时候, intro函数的[[scope]]为:

[[scope chain]] = [
{
     name : 'csdn',
     intor : undefined
}, {
     window call object
}
]

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

[[scope chain]] = [
{
     intro call object
}, {
     name : 'csdn',
     intor : undefined
}, {
     window call object
}
]

最后我们来总结一下：

第一个：我们要知道在js中 是没有块级作用域的。

第二个：我们要知道在js中除了 全局作用域以外，只有函数可以创建新的作用域。

第三个：我们要知道 作用域是存在上下级的关系的，上下级的关系就看 函数是在哪个作用域下创建的是创建的。

第四个：作用域最大的用处 就是隔离变量 ，不同作用域下的同一名字的变量是不会冲突的。

后面一节会介绍和作用域经常出现的上下文