进阶3

2017-10-09 本文已影响0人饥人谷_严琰

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

使用函数声明，如果函数被提前调用也是可以正常运行的；如果使用函数表达式，和变量提升是一样的，提前调用会返回undefined。

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

变量声明前置就是在一个作用域中，所有的变量都被放在作用域的顶部声明，举例：

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

相当于
var a;
console.log(a);//undefined
a=1;
console.log(a);//1

函数声明前置把函数提升到作用域的顶部声明（函数表达式不可以），举例：

  sayHello();
  sayHi();
  function sayHello(){
    console.log("hello");
  }
  var sayHi=function(){ 
    console.log("hi");
  }

sayHello()返回结果是 "hello"，说明函数声明进行了声明前置，函数声明被提升到了前面
sayHi()报错，说明函数表达式未进行函数声明前置，按从上往下的顺序执行到sayHi()时未解析到函数。

arguments 是什么

arguments是一个类数组对象，类似数组的方式，可以通过下标的方式去获取值，但它本身不是数组，没有数组的一些特性，所以叫类数组对象。在函数内部，可以使用arguments对象获取到该函数的所有传入参数

函数的"重载"怎样实现

重载是指不同的函数使用相同的函数名，但是函数的参数个数或类型不同。调用的时候根据函数的参数来区别不同的函数。
JS并不像其他强类型语言一样可以声明重载函数，若在原先声明的函数后再声明一个不同参数数量的函数(JS是弱语言，声明的函数不需要指明参数类型)，解析器会用后面声明的函数覆盖前面声明的函数。
函数的重载实现方法：

在函数体针对不同的参数调用执行相应的逻辑

function printInfo(name, age, sex){
    if(name){ console.log(name); }
    if(age){ console.log(age); }
    if(sex){ console.log(sex); }
  }
  printInfo('xxx', 26);
  printInfo('xxx', 26, 'male');

使用arguments属性

function printInfo(name, age, sex){
    console.log(arguments);
  }
  printInfo('xxx', 26);
  printeInfo('xxx', 26, 'male');

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

立即执行函数的作用是隔离作用域，使被执行的函数内部的变量不会污染到外部，即外部不能访问函数内部的变量。写法：

 (function fn(){})();
 (function fn(){}());

参考https://segmentfault.com/a/1190000003985390

求n!，用递归来实现

image.png

以下代码输出什么？

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, '男');
getInfo('小谷', 3);
getInfo('男');

输出为

name:饥人谷 age:2  sex:男     ["饥人谷",2,"男"]    name valley
name: 小谷  age: 3  sex: undefined  ["小谷", 3]  name valley
name: 男  age: undefined  sex: undefined  [ "男"]   name valley

写一个函数，返回参数的平方和？

image.png

如下代码的输出？为什么

console.log(a);
var a = 1;
console.log(b);
相当于

var a;
console.log(a); //声明了变量a未赋值，输出undefined
a=1;
console.log(b);//未声明过变量b，报错

如下代码的输出？为什么

sayName('world');
sayAge(10);
function sayName(name){
    console.log('hello ', name);
}
var sayAge = function(age){
    console.log(age);
};

输出结果为：hellow,world ;报错
声明不必放在调用前面；而函数表达式，声明必须放在调用的前面

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

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}

输出结果为10，作用域链查找过程伪代码：

1.
  globalContext = {
    AO: {
      x:10
      bar: function
      foo: function
    }
    Scope: null
  }
  bar.[[scope]] = globalContext.AO
  foo.[[scope]] = globalContext.AO
2.
  barContext = {
  AO: {
    x: 30
  }
  Scope: bar.[[scope]] = globalContext.AO
  }
3.
  fooContext = {
  AO: { }
  Scope: foo.[[scope]] = globalContext.AO
  }

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

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

输出结果为30，作用域链查找过程伪代码：

1. globalContext = {
     AO: {
          x: 10;
          bar: function
      }
      Scope: null
    }
    bar.[[scope]] = globalContext.AO
2. barContext = {
    AO: {
        x: 30
        foo: function
      } 
      Scope: bar.[[scope]] = globalContext.AO
    }
3. fooContext = {
    AO: { }
    Scope: foo.[[scope]] = barContext.AO
  }

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

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}

输出结果为30，执行过程同上一题但是bar内嵌套的是一个立即执行函数声明以后立即调用并执行自身同时其内部没有x变量所以会去bar的AO里找所以输出 30

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

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)

输出结果为：undefined 5 1 6 20 200,作用域链查找过程伪代码:

1. globalContext = {
      AO: {
        a: 1;  //200
        fn: function;
        fu3: function;
      }
    Scope: null
    }
    fn.[[scope]] = globalContext.AO
    fn3.[[scope]] = globalContext.AO
 2. fnContext = {
      AO: {
         a: undefined;  //5  6 20 
         fn2: function
      }
      Scope: globalContext.AO
    }
   fn2.[[scope]]=fnContext.AO
3. fn3Context = {
      Ao: { }
      Scope: globalContext.AO
   }
4. fn2Context = {
      Ao: { }
      Scope: fnContext.AO
   }

进阶3