JavaScript高级特性- 作用域的示例代码详情-js教程-PHP中文网

JavaScript高级特性- 作用域的示例代码详情

黄舟

发布： 2017-03-13 16:48:52

原创

1169 人浏览过

作用域在javascript中分为全局作用域和局部作用域，而局部作用域其实指得就是函数作用域，javascript将函数作为作用域的最小范围。

全局作用域 Global Scope

在代码的任何地方都可以访问到的对象，比如window对象及window对象的属性，就拥有全局作用域。
1、在最外层定义的变量，默认都是window对象的属性；
2、未定义的变量默认都是全局的，默认也都是window对象的属性；这一条是经常犯的错误,但是新版浏览器已经修复了这个问题！
举例如下：

var firstName = "leo";
function changeName() {
    var secondName = "jut";
    fullName = "jutleo";
    function getName() {
        console.log(secondName);
    }
    getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

登录后复制

局部作用域/函数作用域(Local Scope/Function Scope)

在函数中定义一个变量时，这个变量只对当前函数可见,javascript会搜索当前函数的作用域，如果没有找到，则继续向上层搜索，直到在全局作用域也没有找到会返回undefined；

var version = "version_1";
var f1 = function() {
    console.log(version);//version_1
}
f1();

登录后复制

在f1函数中没有找到，继续往上查找

var version = "version_1";
var f2 = function() {
    var version = "version_2";
    console.log(version);//version_2
}
f2();

登录后复制

在f2函数中直接找到

var socpe = "scope_01";
var f3 = function() {
    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

登录后复制

这又是为什么呢？原来javascript在f3函数内搜索scope变量，并且找到了，这个时候外层的scope就被忽略了，但是执行到console.log(scope)时，scope还没有被初始化，所以返回undefined

var f4 = function() {
    var scope = "scope_02";
    (function(){
        var scope = "scope_03";
        (function(){
            console.log(scope); //scope_03
        })();
    })();
}
f4();

登录后复制

嵌套也是要遵循同样的规则的，先在函数内部查找，没有找到继续往上层找！

var x_scope = "leo";
var f5 = function() {
    console.log(x_scope); //leo
}
var f6 = function() {
    var x_scope = "jut";
    f5();
}
f6();

登录后复制

这又是为什么呢？原来javascript函数嵌套时，作用域是由嵌套关系决定的，调用的顺序忽略不记！

说了这么多，这个作用域如何使用呢？我们从以上例子可以看出，javascript在查找变量时，顺序往上找的这个链条就作用域链。在实际应用中变量的位置越深，读写的速度就越慢，直到找到全局作用域中。

看例子：

function setLabelBgColor(){
    document.getElementById("btn").onclick=function(){
        document.getElementById("label").style.backgroundColor="red";
    };
}

登录后复制

根据作用域链的查找逻辑，查找document变量必须遍历整个作用域链，直到最后在全局对象中才能找到，这个函数引用了两次。优化如下：

function setLabelBgColor(){
    var doc = document;
    doc.getElementById("btn").onclick=function(){
        doc.getElementById("label").style.backgroundColor="red";
    };
}

登录后复制

这个只是个例子，这么做并不会大幅提升性能哦！但是在实际使用中要避免全局变量被大量访问的情况。

(function(exports){
    //do some thing ...
})(window);

登录后复制

思考一下，为什么看到的库、框架都是这么开始的？

以上是JavaScript高级特性- 作用域的示例代码详情的详细内容。更多信息请关注PHP中文网其他相关文章！