函數(shù)與作用域

1，函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別

1、背景介紹

定義函數(shù)的方法主要有三種：

1：函數(shù)聲明(Function Declaration)

2：函數(shù)表達(dá)式Function Expression)

3：new Function構(gòu)造函數(shù)

其中，經(jīng)常使用的是函數(shù)聲明和函數(shù)表達(dá)式的函數(shù)定義方法，這兩種方法有著很微妙的區(qū)別和聯(lián)系，

而且這兩種方法的使用也容易混淆，所以我們來講一下兩者有哪些不同之處

2：知識(shí)剖析

函數(shù)聲明的典型格式：

function functionName(arg1, arg2, ...){}

函數(shù)表達(dá)式

函數(shù)表達(dá)式的典型格式：

var variable=function(arg1, arg2, ...){}

3、常見問題

兩者具體有哪些區(qū)別呢

一、Javascript引擎在解析javascript代碼時(shí)會(huì)‘函數(shù)聲明提升'（Function declaration Hoisting）

當(dāng)前執(zhí)行環(huán)境（作用域）上的函數(shù)聲明，而函數(shù)表達(dá)式必須等到Javascirtp引擎執(zhí)行到它所在行時(shí)，

才會(huì)從上而下一行一行地解析函數(shù)表達(dá)式

，二、函數(shù)表達(dá)式后面可以加括號立即調(diào)用該函數(shù)，函數(shù)聲明不可以，只能以fn()形式調(diào)用 。

以下是兩者差別的兩個(gè)例子。

fn1();//不會(huì)報(bào)錯(cuò)，因?yàn)?提升了"函數(shù)聲明，函數(shù)調(diào)用可在函數(shù)聲明之前

function fn1(){

console.log("這里是函數(shù)聲明");

}

fn2();//會(huì)報(bào)錯(cuò)，變量fn2還未保存對函數(shù)的引用，函數(shù)調(diào)用必須在函數(shù)表達(dá)式之后

var fn2=function(){

console.log("這里是函數(shù)表達(dá)式");

}

關(guān)于立即執(zhí)行函數(shù)的討論

  • //情況1

//結(jié)果會(huì)被輸出

varfn=function(){

console.log("函數(shù)表達(dá)式賦值給一個(gè)變量");

}();

  • //情況2

//結(jié)果不會(huì)被輸出，JavaScript引擎只解析函數(shù)聲明，忽略后面的括號，函數(shù)聲明不會(huì)被調(diào)用

functionfn(){

console.log("函數(shù)聲明");

}();

  • //情況3

//語法錯(cuò)誤，匿名函數(shù)屬于函數(shù)表達(dá)式，未執(zhí)行賦值操作，不能被調(diào)用

function(){

console.log("函數(shù)表達(dá)式");

}();

使用兩種方式創(chuàng)建函數(shù)時(shí)都發(fā)生了什么

函數(shù)聲明解析過程如下:

  1. 創(chuàng)建一個(gè)new Function對象，F(xiàn)ormalParameterList指定參數(shù)，F(xiàn)unctionBody指定函數(shù)體。

將當(dāng)前正在運(yùn)行環(huán)境中作用域鏈作為它的作用域。

  1. 為當(dāng)前變量對象創(chuàng)建一個(gè)名為Identifier的屬性，值為Result(1)。

具名函數(shù)表達(dá)式的解析過程如下：

  1. 創(chuàng)建一個(gè)new Object對象

  2. 將Result(1)添加到作用域鏈的頂端

  3. 創(chuàng)建一個(gè)new Function對象，F(xiàn)ormalParameterList指定參數(shù)，F(xiàn)unctionBody指定函數(shù)體。將當(dāng)前正在運(yùn)行的執(zhí)行環(huán)境中作用域鏈作為它的作用域。

  4. 為Result(1)創(chuàng)建一個(gè)名為Identifier 的屬性，其值為為Result(3)，只讀，不可刪除

  5. 從作用域鏈中移除Result(1)

  6. 返回Result(3)

2，什么是變量的聲明前置？什么是函數(shù)的聲明前置

變量的聲明前置JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，給他初始值undefined，然后再一行一行地運(yùn)行。這造成的結(jié)果，就是所有的變量的聲明語句，都會(huì)被提升到代碼的頭部，這就叫做變量提升。

變量提升

上面的效果JS引擎會(huì)自動(dòng)幫我們?nèi)ミ@樣解析：

默認(rèn)解析方式

函數(shù)的聲明前置函數(shù)的聲明前置包括兩種情況，分別為函數(shù)聲明和函數(shù)表達(dá)式：函數(shù)表達(dá)式

函數(shù)表達(dá)式聲明前置

上面的代碼瀏覽器會(huì)自動(dòng)幫我們轉(zhuǎn)成下面的方式，效果都是一樣的：

JS引擎默認(rèn)這么做

從上面可以看出函數(shù)表達(dá)式的聲明前置只是將變量的聲明前置而已，并不是將整個(gè)表達(dá)式前置。

函數(shù)聲明但是對于函數(shù)聲明前置的則是整個(gè)函數(shù)聲明，即使函數(shù)寫在最后也可以在前面語句調(diào)用：
函數(shù)聲明的前置

最后總結(jié)一下：
變量聲明會(huì)提前到作用域的頂部，而賦值部分會(huì)留在原來的地方，按次序執(zhí)行；
函數(shù)表達(dá)式其實(shí)和變量是一樣的，只是將一個(gè)函數(shù)賦值給變量，同樣也只是這個(gè)變量會(huì)提前，函數(shù)賦值給變量部分依然留在原地；
但是對于函數(shù)聲明就不一樣，整個(gè)聲明都會(huì)被前置，但是總是跟隨在變量聲明的后面，所以即使我們把函數(shù)寫在最后也可以被前面的語句調(diào)用。

3，arguments 是什么?

arguments是一個(gè)類數(shù)組對象，里面存儲(chǔ)的是函數(shù)在執(zhí)行時(shí)所傳遞進(jìn)來的參數(shù)。
arguments只在函數(shù)內(nèi)部有效，可以在函數(shù)內(nèi)部通過使用arguments對象來獲取函數(shù)的所有參數(shù)；這個(gè)對象為傳遞給函數(shù)的每一個(gè)參數(shù)建立一個(gè)索引，從0開始；外部傳進(jìn)來的參數(shù)還可以通過這個(gè)方法被重新賦值；
arguments對象類似于數(shù)組，但它并不是真正的數(shù)組，除了length，它沒有數(shù)組所特有的屬性和方法；

arguments主要用途：arguments對于參數(shù)數(shù)量是一個(gè)可變量的函數(shù)來說比較有用。 當(dāng)我們傳遞給這個(gè)函數(shù)的參數(shù)數(shù)量比它顯式聲明的參數(shù)數(shù)量更多的時(shí)候，你就可以使用 arguments對象獲取到該函數(shù)的所有傳入?yún)?shù)。
arguments用法

4，函數(shù)的"重載"怎樣實(shí)現(xiàn)？

重載是很多面向?qū)ο笳Z言實(shí)現(xiàn)多態(tài)的手段之一，在靜態(tài)語言中相同名字的函數(shù)參數(shù)個(gè)數(shù)不同或者順序不同都被認(rèn)為是不同的函數(shù)，稱為函數(shù)重載。
在JS中沒有函數(shù)重載的概念，函數(shù)通過名字確定唯一性，參數(shù)不同也被認(rèn)為是相同的函數(shù)，后面的覆蓋前面的。

JS中沒有重載

那么難道JS中我們就不能通過重載實(shí)現(xiàn)一個(gè)函數(shù)參數(shù)不同功能不同嗎？這里就可以用到上面的arguments類數(shù)組對象來實(shí)現(xiàn)了；

用arguments實(shí)現(xiàn)重載

5立即執(zhí)行函數(shù)表達(dá)式是什么？有什么作用

立即執(zhí)行函數(shù)表達(dá)式（Immediately-Invoked Function Expression）是一種語法，可以在你的函數(shù)在定義后立即被執(zhí)行，這種模式本質(zhì)上就是函數(shù)表達(dá)式（命名或者匿名的），在創(chuàng)建后立即執(zhí)行，其代碼格式如下：
//在最前最后加括號
(function atOnce(){
console.log('abc');
}());
//在function外面加括號
(function atOnce(){
console.log('abc');
})();
立即執(zhí)行函數(shù)表達(dá)式的作用：

  • 它可以幫你封裝大量的工作而不會(huì)在背后遺留任何全局變量；
  • 定義的所有變量都會(huì)成為立即執(zhí)行函數(shù)的局部變量，所以你不用擔(dān)心這些臨時(shí)變量會(huì)污染全局空間；
  • 這種模式經(jīng)常被使用在書簽工具中，因?yàn)闀灩ぞ咴谌魏雾撁嫔线\(yùn)行并且保持全局命名空間干凈非常必要的；
  • 這種模式也可以讓你將獨(dú)立的功能封裝在自包含模塊中；

求n!，用遞歸來實(shí)現(xiàn)

Paste_Image.png

·```
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
####寫一個(gè)函數(shù)，返回參數(shù)的平方和？

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/6760918-1fb3003249f83f61.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####如下代碼的輸出？為什么

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

輸出：
undefined
未定義的錯(cuò)誤
由JavaScript的變量提升，變量a被提升了，所以聲明的時(shí)候放置在代碼的前端，所以輸出a的時(shí)候是undefined。由于b在作用域內(nèi)無法找到其聲明，所以報(bào)出未定義的錯(cuò)誤。
 ####如下代碼的輸出？為什么

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中，函數(shù)聲明可以被提升，所以sayName(name)可以放置在函數(shù)聲明前也可以被調(diào)用。而對于函數(shù)表達(dá)式就不存在函數(shù)提升，只有變量提升，所以sayAge就被提升到了代碼前端。當(dāng)使用sayAge(10)時(shí)，由于此時(shí)解析器只知道sayAge是一個(gè)變量，而不知道它是一個(gè)函數(shù)（即使在后面實(shí)現(xiàn)了這個(gè)函數(shù)），所以報(bào)出"sayAge is not a function"的錯(cuò)誤。
####如下代碼輸出什么? 寫出作用域鏈查找過程偽代碼?

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

執(zhí)行 fn()

fnEC = {
AO: {
a: 5
fn2: function,
}
Scope: bar.[[scope]] = globalEC. AO
}
fn2.[[scope]] =fnEC. AO

執(zhí)行 fn3()

fn3EC = {
AO: {
}
Scope: fn3.[[scope]] = globalEC. AO
}

fn3()執(zhí)行完畢跳回fn()
執(zhí)行fn2()

fn2EC = {
AO: {
}
Scope: fn2.[[scope]] =fnEC. AO

fn2()執(zhí)行完畢跳回fn()
fn()執(zhí)行完畢跳回globalEC

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1. 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別 使用function關(guān)鍵字聲明一個(gè)函數(shù)時(shí)，聲明不必放到調(diào)用的前面。//函數(shù)聲...
    _李祺閱讀 281評論 0贊 0
  • 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別？ 函數(shù)聲明和函數(shù)表達(dá)式是EMACScript規(guī)定的兩種不同的聲明函數(shù)的方法。1.函...
    LeeoZz閱讀 354評論 0贊 1
  • 1.函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別。 函數(shù)聲明使用function來進(jìn)行聲明，函數(shù)聲明提升，所以不論執(zhí)行語句的位置...
    Rising_suns閱讀 307評論 0贊 0
  • 任務(wù) 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別答：函數(shù)聲明：function functionName(){}??函數(shù)表達(dá)式...
    mhy_web閱讀 422評論 0贊 0
  • JavaScript中的函數(shù)運(yùn)行在它們被定義的作用域里，而不是它們被執(zhí)行的作用域里。 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)...
    畢子歌閱讀 419評論 0贊 0