美文网首页
函数与作用域

函数与作用域

作者: 1w1ng | 来源:发表于2017-12-04 10:29 被阅读0次

    函数声明和函数表达式有什么区别

    • 函数声明
      function声明一个函数
    function functionName(){
      statement;
    }
    
    • 函数表达式
      函数表达式不是以function开始,而是像声明一个变量一样
    var printName = function(){
      console.log('Byron')
    }
    

    区别:

    函数声明: 声明不必放到调用的前面,可放随意位置,随时调用

    函数表达式: 声明必须放到调用的前面


    什么是变量的声明前置?什么是函数的声明前置

    • 变量的声明前置:
      变量声明前置就是在一个作用域块中,在代码执行前会先将所有声明变量提前进行初始化再执行语句。

    • 函数的声明前置:
      和变量声明前置一样,执行代码之前会先读取函数声明,只要函数在代码中进行了声明,无论它在哪个位置上进行声明,js引擎都会将它的声明放在作用域的顶部。


    arguments 是什么

    在函数内部,你可以使用arguments对象获取到该函数的所有传入参数。
    arguments 叫做类数组对象。这个对象为传递给函数的每个参数建立一个条目,条目的索引号从0开始。它包括了函所要调用的参数, object对象, 类数组。


    函数的"重载"怎样实现?

    在JS中, 没有重载, 同名函数会覆盖。但可以在函数体针对不同的参数调用执行相应的逻辑

    
    function printPersonInfo(name, age, sex) {
        if(name) {
            console.log(name);
        }
        if (age) {
            console.log(age);
        }
        if(sex) {
            console.log(sex);
        }
    } 
    printPersonInfo('wing', 20);
    printPersonInfo('wing', 20, 'boy');
    

    立即执行函数表达式是什么?有什么作用

    立即执行函数是指一种声明之后就立即进行该函数执行操作的函数

    //表达式一
    (function sum(i){
      console.log(i)
    }());
    
    //表达式二
    (function sum(i){
      console.log(i)
    })();
    

    作用:

    • 临时需要变量的时候,可以创建私有作用域,这样不会污染到全局,避免了全局变量过多,防止命名冲突
    • 内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量上面代码中。

    求n!,用递归来实现

    function factorial(n){
        if(n <= 0){
          return "Wrong numbers";
        }
        if(n === 1){
          return 1
        }
        if(n>1){
          return n * factorial(n-1)
        }
    }
    factorial(0) //"Wrong numbers"
    factorial(1) //1
    factorial(3)  //6
    

    以下代码输出什么?

        function getInfo(name, age, sex){
            console.log('name:',name);
            console.log('age:', age);
            console.log('sex:', sex);
            console.log(arguments);
            arguments[0] = 'valley';
            console.log('name', name);
        }
    
    getInfo('饥人谷', 2, '男');
    /*
    name:饥人谷 
    age:2 
    sex:男
    ["饥人谷", 2, "男"]
    name valley
    */
    getInfo('小谷', 3);
    /*
    name:小谷 
    age:3
    sex:undefined
    ["小谷", 3]
    name valley
    */
    getInfo('男');
    /*
    name:男
    age:undefined
    sex:undefined
    ["男"]
    name valley
    */
    

    写一个函数,返回参数的平方和?

    function sumOfSquares(){
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i] * arguments[i];
        }
        return sum;
       }
       var result = sumOfSquares(2, 3, 4);
       var result2 = sumOfSquares(1, 3);
       console.log(result);//29
       console.log(result2);// 10
    

    如下代码的输出?为什么

        console.log(a); //undefined  a输出undefined是因为变量声明提升
        var a = 1;
        console.log(b); //报错 因为b没有声明
    
    

    上面代码等价于:

    var a;
    console.log(a);
    a = 1;
    console.log(b);
    

    如下代码的输出?为什么

    sayName('world');
        sayAge(10);
        function sayName(name){
            console.log('hello ', name); //hello world ; 由于函数声明提升,整个sayName函数提到代码头部
        }
        var sayAge = function(age){
            console.log(age); //报错sayAge is not a function ; 由于sayAge是函数表达式,解析时只是把var sayAge提到代码头部,并未把整个函数部分提到代码头部
        };
    

    如下代码输出什么? 写出作用域链查找过程伪代码

    var x = 10
    bar() 
    function foo() {
      console.log(x)
    }
    function bar(){
      var x = 30
      foo()
    }
     //最终输出为:10
    

    伪代码如下:

    /*
    globalContext = {
        AO: {
            x: 10
            foo: function(){}
            bar: function(){}
        },
        Scope: null
    }
    
    foo.[[scope]] = globalContext.AO
    bar.[[scope]] = globalContext.AO
    
    // 调用 bar() 时,进入 bar 的执行上下文
    barContext = {
        AO: {
            x: 30
        },
        Scope: bar.[[scope]] 
    }
    
    // 调用 foo 时,先从 bar 执行上下文中的 AO 里找,
    找不到再从 bar 的 [[scope]] 里找,找到后即调用
    
    */
    

    如下代码输出什么? 写出作用域链查找过程伪代码

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      function foo(){
        console.log(x) 
      }
      foo();
    }
    //最终输出为:30  
    

    伪代码如下:

    /*
    
    globalContext = {
        AO: {
            x: 10
            bar: function(){}
        },
        Scope: null
    }
    
    bar.[[scope]] = globalContext.AO 
    
    // 调用 bar 时 进入 bar 的上下文
    barContext = {
        AO: {
            x: 30
            foo: function(){}
        },
        Scope: bar.[[scope]]
    }
    
    // 声明 foo 时 得到
    foo.[[scope]] = barContext.AO
    
    // 调用 foo 时 进入 foo 的上下文
    fooContext = {
        AO: {},
        Scope: foo.[[scope]]
    }
    
    // 调用 foo 时,先从 bar 执行上下文的 AO 里找,找不到再从 bar 的 全局作用域找,找到后即调用
    
    */
    

    以下代码输出什么? 写出作用域链查找过程伪代码

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      (function (){
        console.log(x)
      })()
    }
    //最终输出为:30  
    

    伪代码如下:

    /*
        GlobalContext = {
            AO: {
                x: 10,
                bar: function() {}
            }
        }
        bar.[[scope]] = GlobalContext.AO
        
        barContext = {
            AO: {
                x: 30,
                匿名函数: function () {}
            },
            scope: GlobalContext.AO
        }
        
        匿名函数Context = {
            AO: {},
            scope: barContext.AO
        }
    */
    

    以下代码输出什么? 写出作用域链查找过程伪代码

    var a = 1; //声明全局变量a = 1,即globalContext中a = 1;
    
    function fn(){  
      console.log(a) //var a声明前置但未赋值,所以输出undefined;
      var a = 5  
      console.log(a) //输出5;
      a++ //a值自增变为6,即fnContext中a变为6;
      var a 
      fn3()  
      fn2() 
      console.log(a)  //在globalContext中a = 1,所以输出1;
    
      function fn2(){
        console.log(a) //在fnContext中a = 6,所以输出6;
        a = 20 
      }
    }
    
    function fn3(){
      console.log(a)  //在fnContext中a = 20,所以输出20;
      a = 200 
    }
    
    fn()
    console.log(a) //globalContext中a = 200,所以输出200。
    
    //最终输出结果为:undefined 5 1 6 20 200
    

    伪代码如下:

    /*
    
    globalContext = {
        AO: {
            a: 1
            fn: function(){}
            fn3: function(){}
        },
        Scope: null
    }
    
    fn.[[scope]] = globalContext.AO
    fn3.[[scope]] = globalContext.AO
    
    // 调用 fn 时 进入 fn 的上下文
    fnContext = {
        AO: {
            a:undefined,//解析时的值是undefined,
            fn2: function(){}
        },
        Scope: fn.[[scope]] //globalContext.AO
    }
        fn2.[[scope]] = fnContext.AO
    
    fn3Context = {
            AO: {
               a: 200, 
            },
            Scope:fn3.[[scope]]//globalContext.AO 
        }
        fn2Context = {
            AO: {
              a: 20,
            }, 
            Scope:fn2.[[scope]]//fnContext.AO
        }
    
    */
    
    

    相关文章

      网友评论

          本文标题:函数与作用域

          本文链接:https://www.haomeiwen.com/subject/jdoamxtx.html