javascript - 立即执行函数的作用域链是什么样子?
大家讲道理
大家讲道理 2017-04-11 13:01:00
[JavaScript讨论组]

以下代码为什么输出结果是10,10?在https://segmentfault.com/a/11...看了函数创建和执行时作用域链的创建过程,那么立即执行函数的作用域链是怎么形成的?

var bo = 10;
function foo() {
  console.log(bo);
}
(function() {
  var bo = 20;
  foo();
})();
(function (func) {
  var bo = 30;
  func();
})(foo)
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(6)
大家讲道理

立即执行函数的作用域链 与普通函数作用域链一样.(要说区别,立即不会提升)

先看看这个视频作用域

然后理解这篇文章AO/VO 作用域链

天蓬老师
javascript 是**词法作用域**,关于词法作用域和动态作用域,请自行搜索资料。
在《你不知道的JavaScript》一书中有详细的介绍。
想必你的预期输出结果是
var bo = 10;
function foo() {
  console.log(bo);
}
(function() {
  var bo = 20;
  foo();//20?
})();
(function (func) {
  var bo = 30;
  func();//30?
})(foo)
在动态作用域中的确是这个结果,但词法作用域中是在函数内变量作用域是再定义处(即代码书写处)的作用域。
大家讲道理

函数的Scope由函数定义处决定, 所以无论你在什么Scope下调用foo(), 能访问到的bo都是你在第一行也就是var bo = 10;处定义的bo.

黄舟
<script>
    var bo = 10;//全局变量  值为10
    function foo() {
        console.log(this)//此处this一直指向window 所以this.bo一直是10
        console.log(bo);

        //bo全局变量  打印10
    }
    (function() {//自执行函数 此处this指代window
        var bo = 20;
        console.log(this.bo)//10
        foo();//依然打印10
    })();
    (function (func) {//自执行函数 此处this指代window
        var bo = 30;
        console.log(this.bo)//10
        func();//依然打印10
    })(foo)
</script>

以下 可以实现理想上的打印结果 此时相当于 后面两个函数调用 foo函数 并向其传递参数 如果不传递 打印结果为undefined 此时的bo以及是属于函数内部的变量了

<script>
    var bo = 10;//全局变量  值为10
    function foo(bo) {
        console.log(bo);
    }
    (function() {
        var bo = 20;
        foo(bo);//打印20
    })();
    (function (func) {
        var bo = 30;
        func(bo);//打印30
    })(foo)
</script>
黄舟

很简单,你的两个(function(){...})()里定义的var bo=xxx都是在一个局部作用域中,它们都不会影响外面全局的
var bo=10;

而你的foo()调用的时候全都【没传参】,所以最后输出的都是全局上的bo=10

大家讲道理

简单一句话:任何函数都有作用域,浏览器下默认是 window。

解释完毕。

其实这个话题应该了解的是原型链;那么我再话痨几句什么是原型链,简单理解就是 new 一个实例,因为任何一个函数都是可以被实例的。

var a = new foo();

那么会把 a 被传入构造函数并替代 this(浏览器下默认是 window)。

以上。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号