函数与作用域

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

• 函数声明：可以定义命名的函数变量，而无需给变量赋值

function fn() {
    console.log('happy')
}

• 函数表达式：将函数定义为表达式语句（通常是变量赋值）的一部分。

var fn =function() {
    console.log('happy')
}

• 区别：JavaScript 解释器中存在一种变量声明被提升（hoisting）的机制，也就是说变量（函数）的声明会被提升到作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面；而函数表达式在使用前必须先赋值，所以声明必须放在调用前面。

console.log(fn);          //ƒ fn() {}
console.log(fn2);         //undefined
function fn() {}
var fn2 = function () {}
console.log(fn);          //ƒ fn() {}
console.log(fn2);         //ƒ () {}

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

• 变量的声明前置：使用var关键字可以声明一个变量，声明变量的作用域限制在其声明位置的上下文中，而未声明变量总是全局的，所以总在作用域最开始声明变量可以使变量的作用域变得清晰。

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

解析为：
var a;
console.log(a);   //undefined
a = 2;
console.log(a);   //2

• 函数的声明前置：使用function关键字可以声明一个函数，它的特征是函数声明提升，执行代码前会先读取函数声明，即函数声明不必放在调用的前面，它可以放在当前作用域的任何位置。

fn();
function fn() {
   console.log('happy');
}

解析为：
function fn() {
   console.log('happy');
}
fn();

function声明会在代码执行之前就创建、初始化、赋值

• 注意：变量声明和函数声明都会提升，但函数声明提升的优先级高于变量声明提升。

console.log(a);
var a = 2;
function a() {}

解析为：
function a() {}
var a;
console.log (a);     //ƒ a() {}
a = 2;

3. arguments 是什么？

• arguments是一个类似数组的对象, 对应于传递给函数的参数。

function fn(name, age, sex) {
    console.log(arguments[0]);   
    console.log(arguments[1]);     
    console.log(arguments[2]);   
    console.log(arguments.length);  
}
fn('zhou', 23);   //zhou, 23, undefined, 2

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

• 函数重载，就是函数名称一样，但是输入输出不一样。或者说，允许某个函数有各种不同输入，根据不同的输入，调用不同的函数，然后返回不同的结果。
• JS中函数名相同的两个函数，后定义的函数会覆盖前面的函数。因此JS没有重载，但是可以在JS中实现重载的功能，通过检查闯入函数中的参数的类型和数量，然后做出不同的反应。

function fn(name, age, sex) {
    if(typeof arguments[0] === 'string'){
        console.log(name);
    }
    if(typeof arguments[1] === 'number'){
        console.log(age);
    }
    console.log(arguments[2]);
}
fn('zhou', 23, 'man');  //zhou, 23, man
fn(true, 23, 'man');  //23, man

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

• 在Javascript中，一对圆括号“()”是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。有时，我们需要在定义函数之后，立即调用该函数。但是不能直接在函数的定义之后直接加上圆括号。
• JavaScript引擎规定，如果function关键字出现在行首，一律解释成语句。因此，JavaScript引擎看到行首是function关键字之后，认为这一段都是函数的定义，不应该以圆括号结尾，就会报错。
  解决方法就是不要让function出现在行首，让引擎将其理解成一个表达式。最简单的处理，就是将其放在一个圆括号里面。

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

推而广之，任何让解释器以表达式来处理函数定义的方法，都能产生同样的效果

• 通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。

  • 一是不必为函数命名，避免了污染全局变量；
  • 二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

• 参考阮一峰-JavaScript标准教程

6. 求n!，用递归来实现

function factorial(n) {
   if(n === 0) {
        return 1;
    } 
    if(n === 1) {
        return 1;
    } 
    return n * factorial(n-1);
}
factorial(6);   //720

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

输出分别为：

name:  饥人谷
age:  2
sex:  男
['饥人谷', 2, '男']
name vallery

name:  小谷
age:  3
sex:  undefined
['小谷', 3]
name vallery

name:  男
age: undefined
sex:  undefined
['男']
name vallery

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

function sumOfSquares(){
    var sum = 0;
    for(var i = 0; i < arguments.length; i++) {
       sum += arguments[i] * arguments[i];
    }
    console.log(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变量提升后，暂未赋值
a = 1;
console.log(b);   //Uncaught ReferenceError: 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');     //hello world  函数声明提升
sayAge(10);           //Uncaught TypeError: sayAge is not a function  //sayAge是函数表达式，在使用前必须先赋值
sayAge = function(age){
    console.log(age);
};

11. 如下代码输出什么，写出作用域链查找过程伪代码？

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

查找过程伪代码：

globalContent = {
    AO = {
        x: 10
        foo: function
        bar: function
    }
    Scope: null
}

barContent = {
    AO = {
        x: 30
        f00: function
    }
    Scope: bar.[[scope]] = globalContent.AO
}

fooContent = {
    AO = {}
    Scope:foo.[[scope]] = globalContent.AO
}

12. 如下代码输出什么，写出作用域链查找过程伪代码？

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

查找过程伪代码：

globalContent = {
    AO = {
        x: 10
        bar: function
    }
    Scope: null
}
barContent = {
    AO: {
        x: 30
        foo:function
    }
    Scope: bar.[[scope]] = globalContent.AO
}
fooContent = {
    AO: {}
    Scope: foo.[[scope]] = barContent.AO
}

13. 如下代码输出什么，写出作用域链查找过程伪代码？

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

查找过程伪代码：

globalContent = {
    AO = {
        x: 10
        bar: function
    }
    Scope: null
}
barContent = {
    AO: {
        x: 30
    }
    Scope: bar.[[scope]] = globalContent.AO
}

14. 如下代码输出什么，写出作用域链查找过程伪代码？

var a = 1;

function fn(){
  console.log(a)          //undefined
  var a = 5
  console.log(a)          //5
  a++
  var a
  fn3()
  fn2()
  console.log(a)          //20

  function fn2(){
    console.log(a)        //6
    a = 20
  }
}

function fn3(){
  console.log(a)         //1
  a = 200
}

fn()
console.log(a)           //200

查找过程伪代码：

globalContent = {
    AO : {
        a: 1 -> 200
        fn: function
        fn3: function
    },
    Scope: null
}

fnContent = {
    AO : {
     a: undefined -> 5 -> 6 -> 20
     fn2: function
    }
    Scope: fn.[[scope]] = globalContent.AO
}
fn3Content = {
    AO : {}
    Scope: fn3.[[scope]] = globalContent.AO
}
fn2Content = {
    AO : {}
    Scope: fn2.[[scope]] = fnContent.AO
}