web前端-js小记(3)-函数及作用域

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

1. 函数声明

function hello(){
  console.log("hello");
}
hello();

2. 函数表达式

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

区别：函数声明不用把声明放到函数调用的前面，函数表达式其实就是创建一个匿名的函数声明并赋值给一个变量，虽然省略了函数名，但是一定要把函数表达式放到函数调用前面。

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

在同一个作用域下，var 声明的变量和 function 声明的函数会前置，JavaScript 的解析器先统一把它们全部按顺序放在作用域的最前面，然后才开始执行后面的语句。在 JavaScript 中，只有全局作用域和函数作用域，没有块作用域。举例如下：

console.log(a);
a=1;
var a;     //结果为undefined，不会报错，虽然a变量声明在最后，但是实际是变量的声明前置了，所以当console.log(a)的时候已经声明了变量a

hello();
funciton hello(){
  console.log("hello");
}                 //函数声明虽然写在函数调用后面，但是是先进行函数声明，在进行调用函数，但是，使用函数表达式则会报错。

3. arguments 是什么

arguments其实是函数的一个内置参数的数组对象，通过arguments[1、2、3]等...我门可以获取到相应的传入参数。

var f = function(one) {
 for(var i=0;i<arguments.length;i++){
  console.log(arguments[i]);
}
}
f(1, 2, 3)

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

1. 函数重载：相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数，称为函数重载。
   在JavaScript中没有函数重载的概念，函数通过名字确定唯一性，参数不同也被认为是相同的函数，后面的覆盖前面的，但可以在函数体针对不同的参数调用执行相应的逻辑。
2. js函数：没有重载! 同名函数会覆盖。 但可以在函数体针对不同的参数调用执行相应的逻辑

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

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

立即执行函数表达式：（Immediately-Invoked Function Expression），简称IIFE。表示定义函数之后，立即调用该函数。

1. 书写方法：

(function(){})();
或者
(function(){}());

2. why：
   JavaScript引擎规定，如果function关键字出现在行首，一律解释成语句。因此，如果JavaScript引擎看到行首是function关键字之后，认为这一段都是函数的定义，所以在function前面加上括号，括号会把function(){}强制转化为表达式，而不是语句，就会立即执行。
3. 作用：
   通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

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

function fn(n){
if(n<0) return;
  if(n===1 || n===0) return 1;
  return n*fn(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, "男", callee: function, Symbol(Symbol.iterator): function] name valley
getInfo('小谷', 3);  //name: 小谷 age: 3 sex: undefined ["小谷", 3, callee: function, Symbol(Symbol.iterator): function] name valley
getInfo('男');   //name: 男 age: undefined sex: undefined ["男",callee: function, Symbol(Symbol.iterator): function]  name valley

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

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

9. 如下代码的输出？为什么

console.log(a);              //undefined,变量声明前置，所以未报错，但还未赋值，所以undefined
    var a = 1;
    console.log(b);     //b变量未声明，所以报错

10. 如下代码的输出？为什么

sayName('world');                                    //hello world,函数声明前置，所以显示成功
    sayAge(10);                                    //函数表达式声明不前置，函数调用时函数未声明，所以报错                                
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge = function(age){
        console.log(age);
    };                                                 

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

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}
/* 输出：10
1.
globalContext = {
  AO: {
    x: 10, foo: function, bar: function
  }
  Scope: null
foo.[[scope]] = globalContext.AO
bar.[[scope]] = globalContext.AO
}
2.调用bar()
barContext = {
  AO: {
    x: 30
  }
  Scope: bar.[[scope]] = globalContext.AO
}
3.调用foo()
fooContext = {
  AO: {}
  Scope: foo.[[scope]] = globalContext.AO
} */

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

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. 调用bar
barContext={
  AO:{
    x: 30, foo:function
  }
Scope: bar.[[scope]]=globalContext.AO
}
foo.[[scope]]=barContext.AO
3. 调用foo
fooContext={
  AO:{}
  Scope: foo.[[scope]]=barContext.AO
}
*/

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

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}
/*输出： 30
1.
globalContext={
  AO:{
    x: 10, bar:function
 }
    Scope: null
}
bar.[[scope]]=globalContext.AO
2.调用bar
barContext={
  AO:{
    x:30, function(){}
  }
Scope:bar.[[scope]]=globalContext.AO
}
function().[[scope]]=barContext.AO
3. 调用function()
functionContext={
  AO:{}
  Scope:function().[[scope]]=barContext.AO
}
*/

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)
/*输出： undefined 5 1 6 20 200
1.
globalContext={
  AO:{
    a:200,fn:function,fn3:function
  }
Scope: null
}
fn.[[scope]]=globalContext.AO
fn3.[[scope]]=globalContext.AO
2. 调用fn
fnContext={
  AO:{
  a:20, fn2:function  
}
Scope: fn.[[scope]]=globalContext.AO
}
fn2.[[scope]]=fnContext.AO
3. 调用fn3
fn3Context={
  AO:{}
  Scope:fn3.[[scope]]=globalContext.AO
}
4. 调用fn2
fn2Context={
  AO:{}
 Scope:fn2.[[scope]]=fnContext.AO
}
*/

(mission 3)