• Javascript中的作用域(scope)


    类 C 语言一般都用于块级作用域,但是Javascript中的 while, if-else, for, switch-case 等控制结构不具有自己的作用域,

    在Javascript中只有函数(function)具有自己的作用域,请比较如下的 C# 代码和 Javascript 代码:

    // C# 中 for 循环有自己的作用域
    for (int i = 0; i < 5; i++)
    {
        
    //
    }
    Console.WriteLine(i); 
    // 当前上下文中不存在名称“i”
    // Javascript中 for 循环没有自己的作用域
    for (var i = 0; i < 5; i++) {
        
    // do something
    }
    console.log(i);   
    // 5


    但是,Javascript中的函数有自己的作用域,如下示例:

    // function 拥有自己的作用域
    (function() {
        
    var j = 6;
    })();
    console.log(
    typeof (j)); // 'undefined'
    // function 中使用和全局变量相同名称的局部变量
    var i = 5;
    (
    function() {
        
    var i = 1;
    })();
    console.log(i);   
    // 5

    在函数中不使用 var 关键字声明的变量,就会在全局范围内查找,如下:

    var i = 5;
    (
    function() {
        i
    ++;    // 此时的i是全局变量
    })();
    console.log(i);   
    // 6

    这里就有一个可能让人迷惑的代码,如下:

    var i = 6;
    (
    function() {
        i
    ++;    // 此时的i是局部变量,但是未定义(undefined),undefined + 1 == NaN
        console.log(isNaN(i));    // true
        var i;
    })();
    console.log(i);   
    // 6


    或许你会觉得函数中 i++, 引用的岂不是全部变量?

    答案是否定的,只要在函数内拥有相同名称的局部变量定义,那这个变量就是局部的。

    那我们如何在函数内引用和局部变量相同名称的全局变量呢?

    答案是使用命名前缀。考虑如下代码:

    var i = 6;
    (
    function() {
        window.i
    ++;    // 此时的i是局部变量
        var i = 1;
    })();
    console.log(i);   
    // 7


    正因为自执行的匿名函数,可以用来向外部隐藏属性,我们可以用这个特性在Javascript中实现私有属性。

    考虑如下获取随机数([0,10])的对象:

    var random1 = {
        _num: 
    -1,
        _init: 
    function() {
            
    // 随机一个大于等于0,小于等于10的整数
            this._num = Math.round(Math.random() * 10);
        },
        getNum: 
    function() {
            
    if (this._num === -1) {
                
    this._init();
            }
            
    return this._num;
        }
    };
    console.log(
    'random1._num == ' + random1._num); // -1
    console.log('random1.getNum() == ' + random1.getNum()); // [0,10]


    虽然我们的意图是想向外界隐藏 _num 变量和 _init 属性,不过这个目的显然没有达到,用户仍然可以通过 random1._init(); 的方式调用。

    我们需要是用Javascript中函数特有的性质(拥有自己的作用域),使用自执行的匿名函数来达到隐藏属性的目的。

    考虑如下解决办法:

    var random2 = {};
    (
    function() {
        
    var _num = -1;

        
    function _init() {
            _num 
    = Math.round(Math.random() * 10);
        }

        random2.getNum 
    = function() {
            
    if (_num === -1) {
                _init();
            }
            
    return _num;
        };
    })();
    console.log(
    'random2._num == ' + random2._num); // 'undefined'
    console.log('random2.getNum() == ' + random2.getNum()); // [0,10]


    代码下载

  • 相关阅读:
    JS-得到屏幕宽高、页面宽高
    CSS3-border-radius 属性
    从30岁到35岁:为你的生命多积累一些厚度【转载】
    HTML5-IOS WEB APP应用程序(IOS META)
    HTML-Meta中的viewport指令
    EasyUI-window包含一个iframe,在iframe中如何关闭window
    JS-为句柄添加监听函数
    EasyUI-EasyUI框架入门学习
    Linux下的C编程
    ***经典笔试题
  • 原文地址:https://www.cnblogs.com/sanshi/p/javascript_scope.html
Copyright © 2020-2023  润新知