1，函數聲明和函數表達式有什么區別
1、背景介紹
定義函數的方法主要有三種：
1：函數聲明(Function Declaration)
2：函數表達式Function Expression)
3：new Function構造函數
其中，經常使用的是函數聲明和函數表達式的函數定義方法，這兩種方法有著很微妙的區別和聯系，
而且這兩種方法的使用也容易混淆，所以我們來講一下兩者有哪些不同之處
2：知識剖析
函數聲明的典型格式：
function functionName(arg1, arg2, ...){}
函數表達式
函數表達式的典型格式：
var variable=function(arg1, arg2, ...){}
3、常見問題
兩者具體有哪些區別呢
一、Javascript引擎在解析javascript代碼時會‘函數聲明提升'（Function declaration Hoisting）
當前執行環境（作用域）上的函數聲明，而函數表達式必須等到Javascirtp引擎執行到它所在行時，
才會從上而下一行一行地解析函數表達式
，二、函數表達式后面可以加括號立即調用該函數，函數聲明不可以，只能以fn()形式調用 。
以下是兩者差別的兩個例子。
fn1();//不會報錯，因為"提升了"函數聲明，函數調用可在函數聲明之前
function fn1(){
console.log("這里是函數聲明");
}
fn2();//會報錯，變量fn2還未保存對函數的引用，函數調用必須在函數表達式之后
var fn2=function(){
console.log("這里是函數表達式");
}
關于立即執行函數的討論
- //情況1
//結果會被輸出
varfn=function(){
console.log("函數表達式賦值給一個變量");
}();
- //情況2
//結果不會被輸出，JavaScript引擎只解析函數聲明，忽略后面的括號，函數聲明不會被調用
functionfn(){
console.log("函數聲明");
}();
- //情況3
//語法錯誤，匿名函數屬于函數表達式，未執行賦值操作，不能被調用
function(){
console.log("函數表達式");
}();
使用兩種方式創建函數時都發生了什么
函數聲明解析過程如下:
- 創建一個new Function對象，FormalParameterList指定參數，FunctionBody指定函數體。
將當前正在運行環境中作用域鏈作為它的作用域。
- 為當前變量對象創建一個名為Identifier的屬性，值為Result(1)。
具名函數表達式的解析過程如下：
創建一個new Object對象
將Result(1)添加到作用域鏈的頂端
創建一個new Function對象，FormalParameterList指定參數，FunctionBody指定函數體。將當前正在運行的執行環境中作用域鏈作為它的作用域。
為Result(1)創建一個名為Identifier 的屬性，其值為為Result(3)，只讀，不可刪除
從作用域鏈中移除Result(1)
返回Result(3)
2，什么是變量的聲明前置？什么是函數的聲明前置
變量的聲明前置JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，給他初始值undefined，然后再一行一行地運行。這造成的結果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升。
變量提升
上面的效果JS引擎會自動幫我們去這樣解析：
默認解析方式
函數的聲明前置函數的聲明前置包括兩種情況，分別為函數聲明和函數表達式：函數表達式
函數表達式聲明前置
上面的代碼瀏覽器會自動幫我們轉成下面的方式，效果都是一樣的：
JS引擎默認這么做
從上面可以看出函數表達式的聲明前置只是將變量的聲明前置而已，并不是將整個表達式前置。
最后總結一下：
變量聲明會提前到作用域的頂部，而賦值部分會留在原來的地方，按次序執行；
函數表達式其實和變量是一樣的，只是將一個函數賦值給變量，同樣也只是這個變量會提前，函數賦值給變量部分依然留在原地；
但是對于函數聲明就不一樣，整個聲明都會被前置，但是總是跟隨在變量聲明的后面，所以即使我們把函數寫在最后也可以被前面的語句調用。
3，arguments 是什么?
arguments是一個類數組對象，里面存儲的是函數在執行時所傳遞進來的參數。
arguments只在函數內部有效，可以在函數內部通過使用arguments對象來獲取函數的所有參數；這個對象為傳遞給函數的每一個參數建立一個索引，從0開始；外部傳進來的參數還可以通過這個方法被重新賦值；
arguments對象類似于數組，但它并不是真正的數組，除了length，它沒有數組所特有的屬性和方法；
4，函數的"重載"怎樣實現？
重載是很多面向對象語言實現多態的手段之一，在靜態語言中相同名字的函數參數個數不同或者順序不同都被認為是不同的函數，稱為函數重載。
在JS中沒有函數重載的概念，函數通過名字確定唯一性，參數不同也被認為是相同的函數，后面的覆蓋前面的。
那么難道JS中我們就不能通過重載實現一個函數參數不同功能不同嗎？這里就可以用到上面的arguments類數組對象來實現了；
5立即執行函數表達式是什么？有什么作用
立即執行函數表達式（Immediately-Invoked Function Expression）是一種語法，可以在你的函數在定義后立即被執行，這種模式本質上就是函數表達式（命名或者匿名的），在創建后立即執行，其代碼格式如下：
//在最前最后加括號
(function atOnce(){
console.log('abc');
}());
//在function外面加括號
(function atOnce(){
console.log('abc');
})();
立即執行函數表達式的作用：
- 它可以幫你封裝大量的工作而不會在背后遺留任何全局變量；
- 定義的所有變量都會成為立即執行函數的局部變量，所以你不用擔心這些臨時變量會污染全局空間；
- 這種模式經常被使用在書簽工具中，因為書簽工具在任何頁面上運行并且保持全局命名空間干凈非常必要的；
- 這種模式也可以讓你將獨立的功能封裝在自包含模塊中；
求n!，用遞歸來實現
·```
function factorial(n){
if(n==0) return 1;
if(n<0) return 'error';
var f = 1;
for(var i=1;i<=n;i++){
f*=i;
}
return f;
}
####以下代碼輸出什么？
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('hunger', 28, '男');
getInfo('hunger', 28);
getInfo('男');
輸出：
name: hunger
age: 28
sex: 男
["hunger", 28, "男"]
name valley
name: hunger
age: 28
sex: undefined
["hunger", 28]
name valley
name: 男
age: undefined
sex: undefined
["男"]
name valley
####寫一個函數，返回參數的平方和？
####如下代碼的輸出？為什么
console.log(a);
var a = 1;
console.log(b);
輸出：
undefined
未定義的錯誤
由JavaScript的變量提升，變量a被提升了，所以聲明的時候放置在代碼的前端，所以輸出a的時候是undefined。由于b在作用域內無法找到其聲明，所以報出未定義的錯誤。
####如下代碼的輸出？為什么
sayName('world');
sayAge(10);
function sayName(name){
console.log('hello ', name);
}
var sayAge = function(age){
console.log(age);
};
輸出：
"hello world"
Error: sayAge is not a function
在JavaScript中，函數聲明可以被提升，所以sayName(name)可以放置在函數聲明前也可以被調用。而對于函數表達式就不存在函數提升，只有變量提升，所以sayAge就被提升到了代碼前端。當使用sayAge(10)時，由于此時解析器只知道sayAge是一個變量，而不知道它是一個函數（即使在后面實現了這個函數），所以報出"sayAge is not a function"的錯誤。
####如下代碼輸出什么? 寫出作用域鏈查找過程偽代碼?
var x = 10
bar()
function foo() {
console.log(x)
}
function bar(){
var x = 30
foo()
}
10
globalEC = {
AO: {
x: 10,
foo: function,
bar: function
},
Scope: null
}
foo.[[scope]] = globalEC. AO
bar.[[scope]] = globalEC. AO
barEC = {
AO: {
x: 30
}
Scope: bar.[[scope]] = globalEC. AO
}
fooEC = {
AO: {
}
Scope: bar.[[scope]] = globalEC. AO
}
####如下代碼輸出什么? 寫出作用域鏈查找過程偽代碼
var x = 10;
bar()
function bar(){
var x = 30;
function foo(){
console.log(x)
}
foo();
}
30
globalEC = {
AO: {
x: 10,
bar: function
},
Scope: null
}
bar.[[scope]] = globalEC. AO
barEC = {
AO: {
x: 30
foo: function,
}
Scope: bar.[[scope]] = globalEC. AO
}
foo.[[scope]] = barEC. AO
fooEC = {
AO: {
}
Scope: foo.[[scope]] = barEC. AO
}
##以下代碼輸出什么? 寫出作用域鏈的查找過程偽代碼
var x = 10;
bar()
function bar(){
var x = 30;
(function (){
console.log(x)
})()
}
30
globalEC = {
AO: {
x: 10,
bar: function
},
Scope: null
}
bar.[[scope]] = globalEC. AO
barEC = {
AO: {
x: 30
function(){}
}
Scope: bar.[[scope]] = globalEC. AO
}
function.[[scope]] = barEC. AO
functionEC = {
AO: {
}
Scope: function.[[scope]] = barEC. AO
}
####以下代碼輸出什么？ 寫出作用域鏈查找過程偽代碼
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
globalEC = {
AO: {
a: 1,
fn: function
fn3: function
},
Scope: null
}
fn.[[scope]] = globalEC. AO
fn3.[[scope]] = globalEC. AO
執行 fn()
fnEC = {
AO: {
a: 5
fn2: function,
}
Scope: bar.[[scope]] = globalEC. AO
}
fn2.[[scope]] =fnEC. AO
執行 fn3()
fn3EC = {
AO: {
}
Scope: fn3.[[scope]] = globalEC. AO
}
fn3()執行完畢跳回fn()
執行fn2()
fn2EC = {
AO: {
}
Scope: fn2.[[scope]] =fnEC. AO
fn2()執行完畢跳回fn()
fn()執行完畢跳回globalEC
