zoukankan      html  css  js  c++  java
  • 前端之JS(五)

    js的作用域

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

    任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

    作用域

    1. 全局作用域(Global Scope)

    在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

    (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

    复制代码
    var name="yuan";
    
        function foo(){
            var age=23;
            function inner(){
                console.log(age);
            }
    
            inner();
        }
    
        console.log(name);    // yuan
        //console.log(age);   // Uncaught ReferenceError: age is not defined
        foo();                // 23
        inner();              // Uncaught ReferenceError: inner is not defined
    复制代码

    (2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

    复制代码
        var name="yuan";
    
        function foo(){
            age=23;
    
            var sex="male"
        }
        foo();
        console.log(age);   //  23
        console.log(sex);   // sex is not defined
    复制代码

    变量blog拥有全局作用域,而sex在函数外部无法访问到。

    (3)所有window对象的属性拥有全局作用域

    一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。

    2. 局部作用域(Local Scope)

    和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域.

    如示例1中的age与inner都只有局部作用域。(js中if、for没有自己的作用域)

    作用域链(Scope Chain)

    在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

    示例演示

    please have a try:

    复制代码
    //-----**********************例1*********************************
    
    var s=12;
        function f(){
            console.log(s);
             var s=12;          // if s=12
            console.log(s)
        }
        f();
    
    //-----**********************例2*********************************
    
    var s=10;
    function foo(){
      console.log(s);
      var s=5;
      console.log(s);
      function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作
    
      console.log(s);
    }
    
    foo();
    
    //-----***********************例3********************************
    
    function bar(age) {
    
            console.log(age);
            var age = 99;
    var sex= 'male'; console.log(age); function age() {
    alert(123) }; console.log(age);
    return 100; } result=bar(5); //-----********************************************************
    复制代码

    结果分析

    我相信大家一定会有想不到的结果,接下来我们就以最复杂的例3来分析整个过程。

    当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示:

    解析到函数调用时,即bar(5),会生成一个active object的对象,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

    过程解析:

    复制代码
    function bar(age) {
    
            console.log(age);
            var age = 99;
            var sex="male";
            console.log(age);
            function age(){
                alert(123);
            } ;
            console.log(age);
            return 100;
    }
    
    result=bar(5);
    
    一 词法分析过程(涉及参数,局部变量声明,函数声明表达式):
        1-1 、分析参数,有一个参数,形成一个 AO.age=undefine;
        1-2 、接收参数 AO.age=5;
        1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不做任何处理
        1-4 、分析变量声明,有一个 var sex,形成一个 AO.sex=undefine;
        1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
    二 执行过程:
        2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,所以输出的一个函数
        2-2 、这句 var age=99; 是对不 AO.age 的属性赋值, AO.age=99 ,所以在第二个输出的age是 99;
        2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。
    
              注意:执行阶段:
                            function age(){
                                alert(123)
                            } ;
    
                不进行任何操作,将执行语句复制给age这部操作是在词法分析时,即运行前完成的。
    复制代码
  • 相关阅读:
    docker学习
    io性能调优之page cache
    ll命令执行后结果分析
    Angular2+ ViewChild & ViewChildren解析
    <router-outlet> 干什么用的?
    npm基本命令
    什么情况下会出现undefined
    关于VUE调用父实例($parent) 根实例 中的数据和方法
    vue中的this指向问题
    对 Foreach 的理解
  • 原文地址:https://www.cnblogs.com/guozhenle/p/7345568.html
Copyright © 2011-2022 走看看