资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/浅谈JavaScript作用域

浅谈JavaScript作用域

figofuture / 3290人阅读

摘要：我们在面试时，总会碰到一些奇奇怪怪的关于作用域的面试题，其实弄清楚原理，万变不离其宗，大部分的面试题都可以得姐。

我们在面试时，总会碰到一些奇奇怪怪的关于 作用域 的面试题，其实弄清楚原理，万变不离其宗，大部分的面试题都可以得 ‘姐’。

所以，今天我们来谈谈 JavaScript 的 作用域(javascript scope) ，这是老生常谈的话题，这里我们会从 作用域 开始，会延伸到 预解析规则（预编译） 、 表达式 、 变量提升 、 函数提升 、 匿名函数表达式 、 具名函数表达式 等，彻底搞明白作用域这些事 ?

详情，可查看我的博客 lishaoy.net

变量提升和函数提升

在开始阐述之前，我们来看一段代码，看看结果是什么？

alert(a);
function a(){ alter(2); }
alert(a);
var a = 1
alert(a);
var a = 3;
alert(a);
function a(){ alter(4); }
alert(a);
a();

这里先揭晓答案：

第一个 alert(a)  弹出 function a(){ alter(4); } 函数体


第二个 alter(a)  弹出 function a(){ alter(4); } 函数体


第三个 alter(a)  弹出 1



第四个 alter(a)  弹出 3



第五个 alter(a)  弹出 3



最后一行报错 a is not a function

下面来分析一下这段代码：
其实在 javascript 开始执行代码之前，有一个 预解析（预编译） 的过程，这个过程会产生 变量提升 和 函数提升 ，其实整个执行过程可以分为两部分，方便理解：

预解析

这个过程，会把 关键字 var 、 function 、 参数 提取出来

上面这段代码 预解析 的过程是：

// 第1行，没有关键字 ， 不解析
// 第2行，遇到 function 关键字，解析到全局的头部
a = function a(){ alter(2); }
// 第3行，没有关键字 ， 不解析
// 第4行，遇到关键字 var ， 解析到全局的头部
a = undefined
// 第5行，没有关键字 ， 不解析
// 第6行，遇到关键字 var ， 解析到全局的头部
a = undefined
// 第8行，遇到 function 关键字，解析到全局的头部
a = function a(){ alter(4); }
// 第9行，没有关键字 ， 不解析
// 第10行，a() 函数调用

此时这里有4个同名变量 a ，依循规则是：function 优先与 var, 同名的后面覆盖前面的
因此，a = function a(){ alter(2); } 替换掉下面的2个 a = undefined ，a = function a(){ alter(4); } 又替换掉 a = function a(){ alter(2); } ,最终只剩下 a = function a(){ alter(4); }

预解析（预编译） 后的代码样子是这样的

var a = function a(){ alter(4); }
alert(a);
alert(a);
a = 1
alert(a);
a = 3;
alert(a);
alert(a);
a();

执行代码

就是执行的这段代码，依次从上到下执行，最后的 a() 函数调用，这时的 a 已被 表达式 赋值成 3 ，而报错 a is not a function

全局作用域和局部作用域

再看这段代码

var a = 1;
function fn1(){
    alert(a);
    var a = 2;
}
fn1();
alert(a);

这里先揭晓答案：

第一个 alert(a) 弹出 undefined



第二个 alert(a) 弹出 1

JavaScript 的作用域只用两种，一个是全局的，一个是函数的，也称为 全局作用域 和 局部作用域 ；局部作用域 可以访问 全局作用域 。但是 全局作用域 不能访问 局部作用域

同样用 预解析（预编译） 的方法来分析这段代码

预解析（预编译） 全局作用域

// 第1行，遇到 var 关键字，解析到全局的头部
a = undefined
// 第2行，遇到 function 关键字，解析到全局的头部
fn1 = function fn1(){
    alert(a);
    var a = 2;
}
// 第3行，没有遇到关键字，不解析
// 第4行，没有遇到关键字，不解析

开始执行代码

第1行，遇到表达式 a = 1, a 被赋值成 1
第6行，遇到函数调用 fn1() ,开始 预解析（预编译） 局部

预解析（预编译） 局部作用域

// 第3行，没有遇到关键字，不解析
// 第4行，遇到 var 关键字，解析到局部
a = undefined

开始执行 局部 代码

第3行，弹出 undefined
第4行，遇到表达式，把局部 a 改成 2

局部执行完成，继续执行全局

第7行，弹出 1 ，因为全局和局部是两个独立的作用域

作用域链

如果，把上面?代码，稍作修改

var a = 1;
function fn1(){
    alert(a);
    a = 2;
}
fn1();
alert(a);

去掉了 function 里的 var ，结果就会不一样
这次，输出的是：

第一个 alert 弹出 1

第二个 alert 弹出 2

因为在解析局部是没有发现 var a ，如是在执行时，就会去全局查找，找到了全局的 a = 1 ，所以 第一个 alert 弹出 1 ，而不是 undefined ,这个就是 作用域连

匿名函数表达式、具名函数表达式

在来看看这段代码?

var a = 3;
function fn() {
    foo();
    function foo() {
        console.log(1);
    }
    foo();
    var foo = function() {
        console.log(2);
    };
    foo();
    var bar = function foo() {
        if(a > 3) return;
        console.log(++a);
        foo();
    };
    foo();
    bar();
}
fn();

先揭晓答案：

第1个 foo() 输出的是 1



第2个 foo() 输出的是 1



第3个 foo() 输出的是 2



第4个 foo() 输出的是 2



最后的 bar() 输出的是 4

以上代码包含了 函数声明 、 匿名函数表达式 、 具名函数表达式 ，匿名函数表达式 、 具名函数表达式 是把函数体赋值给一个变量，因此拥有和变量相同的特性 变量提升 ，而 具名函数表达式 的函数名只能在函数内部使用。

了解了这些，再来分析段代码

全局预解析

a = undefined
fn = function fn(){
    ...
}

执行代码

第1行，遇到表达式,把 a 的值改变成3
最后行，遇到函数调用，重新 预解析 局部

局部预解析

// 第4行，遇到 function 关键字，解析到局部的头部
foo = function(){
    console.log(1);
}
// 第8行，遇到 var 关键字，解析到局部的头部
foo = undefined
// 第12行，遇到 var 关键字，解析到局部的头部
bar = undefined

由于有两个同名变量 foo ，遵循 function 优先 var 因此， foo = undefined 被干掉

局部预解析 完之后的代码应该是这个样子?

var a = 3
function fn() {
    var foo = function foo() {
        console.log(1);
    }
    var bar;
    foo();
    foo();
    foo = function foo() {
        console.log(2);
    };
    foo();
    bar = function foo() {
        if(a > 3) return;
        console.log(++a);
        foo();
    };
    foo();
    bar();
}
fn();

执行局部代码

第1个 foo() 输出的是 1
第2个 foo() 输出的是 1
第3个 foo() 输出的是 2
第4个 foo() 输出的是 2 

注意 这个 foo() 输出的是上面 foo = function foo() {console.log(2);} 的内容，因为 具名函数表达式 的函数名只能在函数内部使用，在外部无法访问。

最后的 bar() 输出的是 4

这里才是输出 function foo() {if(a > 3) return;console.log(++a);foo();} 里的内容，而且，这个函数体内也有自身的调用，结果 a 变量 +1 ，说明可以调用，其实，可以用 bar.name 输出的就是 foo

所以，注意：


bar = function foo() , 不要用这种写法




不推荐使用 匿名函数表达式 ，有以下 ? 几个缺点



在追踪栈中没函数名，调试困难


如果需要引用自身，只能用非标准的 arguments.callee（ES5严格模式禁用）
idc机房托管 云服务器 javascript作用域链 浅谈javascript 作用域 中作用域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93951.html

相关文章

  • 浅谈javascript作用域

    摘要：理解作用域作用域负责收集并维护由所有声明的变量组成的集合，等待引擎的查找。当遇到时，编译器会询问作用域是否存在变量。词法作用域就是定义在词法阶段的作用域。但函数不是唯一的作用域单元。块作用域属于某个代码块通常指内部。 理解作用域 作用域负责收集并维护由所有声明的变量组成的集合，等待引擎的查找。 var a = 2; console.log(a); // 2 console.log(b...

    leiyi 评论0 收藏0

  • 浅谈Javascript闭包中作用域及内存泄漏问题

    摘要：将作用域赋值给变量这里的作用域是，而不是将作用域赋值给一个变量闭包返回浏览器中内存泄漏问题大家都知道，闭包会使变量驻留在内存中，这也就导致了内存泄漏。 上一章我们讲了匿名函数和闭包，这次我们来谈谈闭包中作用域this的问题。 大家都知道，this对象是在运行时基于函数的执行环境绑定的，如果this在全局就是[object window]，如果在对象内部就是指向这个对象，而闭包却是在运行...

    source 评论0 收藏0

  • 浅谈JavaScript闭包

    摘要：但是函数返回了内部函数，内部函数会随时访问变量所以垃圾回收机制是不会回收函数的内部作用域的，这就是闭包的含义。也就是函数在定义的词法作用域以外的地方被调用，闭包使得函数可以继续访问定义时的词法作用域。 　　初学JavaScript闭包时，闭包这个概念在我眼里及其的神秘，也不知道这个东西在讲什么，尤其某些地方的闭包概念定义的非常抽象，属于那种本来你可能明白这个概念，看了反而又把你给绕糊涂...

    hsluoyz 评论0 收藏0

  • 云天视角-浅谈闭包

    摘要：函数在执行的时候执行函数，将当前的变量对象由于当前的环境是函数，所以将其活动对象作为变量对象添加到作用域链的前端。此时，由于在执行，而作用域链也存在，所以可以在作用域链上进行查找，去访问的变量。 一、现状 闭包是jser绕不过的坎，一直在都在说，套用 simpson 的话来说：JavaScript中闭包无处不在，你只需要能够识别并拥抱它。 闭包是基于词法作用域书写代码时的自然结果，你甚...

    nanfeiyan 评论0 收藏0

  • 浅谈JavaScript中的闭包

    摘要：在内部，理所当然能访问到局部变量，但当作为的返回值赋给外的全局变量时，神奇的事情发生了在全局作用域中访问到了，这就是闭包。而闭包最神奇的地方就是能在一个函数外访问函数中的局部变量，把这些变量用闭包的形式放在函数中便能避免污染。 一、闭包是什么？ 《JavaScript高级程序设计》中写道：闭包是指有权访问另一个函数作用域中的变量的函数，如果用下定义的观点看，这句话就是说闭包是函数，我...

    Riddler 评论0 收藏0

发表评论

登陆后可评论

0条评论

figofuture

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<