美文网首页
JavaScript基础二

JavaScript基础二

作者: 字母31 | 来源:发表于2017-10-23 18:52 被阅读0次

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

    //函数声明
    function fn(){
          console.log("hello world")
    }
    //函数表达式
    var fn = function(){
          console.log("hello world")
    }
    

    区别:主要是要考虑到变量提升的问题,函数声明的话可以在函数调用之后,因为函数会被提升,而函数表达式的话则函数调用必须在表达式之后。

    //函数声明
    fn()
    function fn(){
          console.log("hello world")
    }
    由于变量提升最终编译结果为
    function fn(){
          console.log("hello world")
    }
    fn()
    
    //函数表达式
    fn()
    var fn = function(){
          console.log("hello world")
    }
    由于变量提升最终编译结果为
    var fn
    fn()           //未赋值
    fn = function(){
          console.log("hello world")
    }
    

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

    变量的声明前置指的是在一个作用域中,所有的变量声明都会被放在作用域的开头.

    console.log(a) 
    var a = 1;
    console.log(a);  
    因为变量提升相当于
    // var a  变量提升到开头 声明
    console.log(a) //undefined
    a = 1;
    console.log(a);  // 1
    

    函数的声明前置是指函数声明跟变量提升规则相同,将整个函数提到当前作用域前面,但是函数表达式提升的只是函数名而不是将整个函数提升到顶部。

    3、arguments 是什么

    arguments是一个类数组对象。代表传给一个function的参数列表。arguments对象是函数内部的本地变量;arguments 已经不再是函数的属性了。可以在函数内部通过使用 arguments 对象来获取函数的所有参数。这个对象为传递给函数的每个参数建立一个条目,条目的索引号从0开始。

    4、函数的"重载"怎样实现

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

      function printPeopleInfo(name, age, sex){
        if(name){
          console.log(name);
        }
        if(age){
          console.log(age);
        }
        if(sex){
          console.log(sex);
        }
      }
      printPeopleInfo('xiaogu', 3);                //xiaogu 3
      printPeopleInfo('xiaogu', 3, 'male');     //xiaogu 3 mal
    

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

    立即执行函数表达式的常见写法
    (function(){
        var a = 1;
    })()
    

    作用:隔离作用域,可以封装一些外部无法读取的变量,同时不必为函数命名,一定程度上避免了全局变量的污染。

    6、求n!,用递归来实现

    function factorial(n) {
      if (n === 0) {
        return 1
      } else {
        return n * factorial(n-1);
      }
    }
    

    7、以下代码输出什么?

    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:undefined;age:undefined;sex:男;["男"];name:valley
    

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

    function sumOfSquares(){
            var sum=0
            for(var i=0;i<arguments.length;i++){
                sum=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
    

    9、 如下代码的输出?为什么

    console.log(a);
    var a = 1;
    console.log(b);
    由于变量提升的存在,实际的编译顺序是
    var a
    console.log(a);  //undefined
    a = 1;
    console.log(b);  //b is not defined,没有b变量的声明
    

    10、如下代码的输出?为什么

    sayName('world');
    sayAge(10);
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge = function(age){
        console.log(age);
    }
    变量提升后为:
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge
    sayName('world');
    sayAge(10);
    sayAge = function(age){
        console.log(age);
    }
    //  hello world
    // 报错,函数表达式不会前置
    

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

    var x = 10
    bar() 
    function foo() {
      console.log(x)
    }
    function bar(){
      var x = 30
      foo()
    }
    //10
    
    globalContext = {
           AO :{
                  x:10;
                  foo:function;
                  foo:function;
           },
           Scope: null
    }
    foo.[[scope]] = globalContext.A0
    bar.[[scope]] = globalContext.A0
    barContext = {
          A0 = {
              x: 30
          }
          Scope: bar.[[scope]]
    }
    fooContext = {
          A0 = {}
          Scope: foo.[[scope]] //globalContext.A0
    }
    

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

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      function foo(){
        console.log(x) 
      }
      foo();
    }   
    //30
    
    globalContext = {
           AO :{
                  x:10;
                  foo:function;
           },
           Scope: null
    }
    bar.[[scope]] = globalContext.A0
    barContext = {
          A0 = {
              x: 30
              foo:function
          }
          Scope: bar.[[scope]]
    }
    foo.[[scope]] = barContext .A0
    fooContext = {
          A0 = {
               x:30   
          }
          Scope: foo.[[scope]] //barContext.A0
    }
    

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

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      (function (){
        console.log(x)
      })()
    }
    //30
    
    globalContext = {
           AO :{
                  x:10;
                  foo:function;
           },
           Scope: null
    }
    bar.[[scope]] = globalContext.A0
    barContext = {
          A0 = {
              x: 30
              foo:function
          }
          Scope: bar.[[scope]]
    }
    foo.[[scope]] = barContext .A0
    fooContext = {
          A0 = {
               x:30   
          }
          Scope: foo.[[scope]] //barContext.A0
    }
    

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

    var a = 1;
    function fn(){
      console.log(a)
      var a = 5
      console.log(a)
      a++
      var a
      fn3()
      fn2()
      console.log(a)
    
      function fn2(){
        console.log(a)
        a = 20
      }
    }
    function fn3(){
      console.log(a)
      a = 200
    }
    fn()
    console.log(a)
    
    globalContext = {
            AO:{
                 a:1
                 fn:function
                 fn3:function
            },
            Scope:null
    }
    fn.[[scope]] = globalContext.AO
    fn3.[[scope]] = globalContext.AO
    fnContext = {
            A0 = {
                a: 5 -> 6
                f2: function
            },
            Scope: fnContext.A0
    }
    f2.[[scope]] = fnContext.A0
     fn2ConText = {
             AO:{
                  a:20
             },
             Scope:fn2ConText.[[scope]]//fnContext.AO
      }
    fn3Context = {
             AO:{
                 a:200
             },
             Scope:fn3Context.[[scope]]//globalContext.AO
     }
    
    开始执行
        console.log(a)//undefined 打印
        var a = 5//fnContext中a变成5
        console.log(a)//5
        a++//fnContext.AO中a变为6
        调用fn3()
        fn3()中
        console.log(a)//globalContext.AO中的a值为1,打印
        a = 200//globalContext.AO中的a变为200
        调用fn2()
        console.log(a);//fnContext.AO中的a值为6,打印
        a = 20;//fnContext.AO中的a变为20
        继续执行fn()
        console.log(a)//fnContext.AO中的a值为20,打印
        fn()结束
        console.log(a)//globalContext.AO中a值为200,打印
    
        //输出的结果 undefined 5 1 6 20 200
    

    相关文章

      网友评论

          本文标题:JavaScript基础二

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