問答題
1. 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別
1.函數(shù)聲明必須有標(biāo)識(shí)符，也就是常說的函數(shù)名宅此；函數(shù)表達(dá)式可以省略函數(shù)名。
函數(shù)聲明（要帶標(biāo)識(shí)符）
function functionName(arg1, arg2, ...){
<!-- function body -->
}
函數(shù)表達(dá)式
- 省略標(biāo)識(shí)符：
var variable=function(arg1, arg2, ...){
<!-- function body -->
}
- 帶有標(biāo)識(shí)符：
var variable=function functionName(arg1, arg2, ...){
<!-- function body -->
}
2.函數(shù)聲明會(huì)提前
sayTruth();<!-- 函數(shù)聲明 -->
function sayTruth(){
alert('myvin is handsome.');
}
sayTruth();<!-- 函數(shù)表達(dá)式 -->
var sayTruth=function(){
alert('myvin is handsome.');
}
即函數(shù)聲明的話sayTruth()可以提前調(diào)用，而函數(shù)表達(dá)式是什么時(shí)候遇到什么時(shí)候執(zhí)行删壮。
3.ECMAScript規(guī)范中表示铐拐，函數(shù)聲明語句可以出現(xiàn)在全局代碼中徘键，或者內(nèi)嵌在其他函數(shù)中，但是不能出現(xiàn)在循環(huán)遍蟋、條件判吹害、或者try/finally以及with語句中；而函數(shù)表達(dá)式可以在任何地方聲明.
2. 什么是變量的聲明前置虚青？什么是函數(shù)的聲明前置
- 變量的聲明前置
JavaScript引擎的工作方式是它呀，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運(yùn)行纵穿。這造成的結(jié)果下隧，就是所有的變量的聲明語句，都會(huì)被提升到代碼的頭部谓媒，這就叫做變量提升
console.log(xxx); // Uncaught ReferenceError: xxx is not defined
我們?cè)谑褂靡粋€(gè)變量之前必須聲明變量淆院，但是由于變量提升，我們?nèi)绻暶髁俗兞扛莺模词乖诼暶髡Z句前使用也是可以的迫筑，只不過其值是初始值undefined
console.log(xxx); // undefined
var xxx = 2;
- 函數(shù)的聲明前置
和變量的聲明會(huì)前置一樣，函數(shù)聲明同樣會(huì)前置宗弯，如果我們使用函數(shù)表達(dá)式那么規(guī)則和變量一樣;
console.log(fn); //undefined
var fn = function(){}
如果我們使用函數(shù)聲明的方式脯燃，那么即使函數(shù)寫在最后也可以在前面語句調(diào)用，前提是函數(shù)聲明部分已經(jīng)被下載到本地
fn(); // "1"
function fn(){
console.log('1');
}
3.arguments 是什么
在函數(shù)內(nèi)部,你可以使用arguments對(duì)象獲取到該函數(shù)的所有傳入?yún)?shù)
function printPersonInfo(name, age, sex){
console.log(name);
console.log(age);
console.log(sex);
console.log(arguments);
}
printPersonInfo("Bob", 22, "male");
//輸出：
// Bob
// 22
// male
// ["Bob", 22, "male"]
4.函數(shù)的重載怎樣實(shí)現(xiàn)
重載是很多面向?qū)ο笳Z言實(shí)現(xiàn)多態(tài)的手段之一蒙保，在靜態(tài)語言中確定一個(gè)函數(shù)的手段是靠方法簽名——函數(shù)名+參數(shù)列表辕棚，也就是說相同名字的函數(shù)參數(shù)個(gè)數(shù)不同或者順序不同都被認(rèn)為是不同的函數(shù)，稱為函數(shù)重載
在JavaScript中沒有函數(shù)重載的概念邓厕，函數(shù)通過名字確定唯一性逝嚎，參數(shù)不同也被認(rèn)為是相同的函數(shù)，后面的覆蓋前面的.
function sum(a,b){
var sum=0;
sum=a+b;
return sum;
}
function sum(a,b,c){
var sum=0;
sum=a+b+c;
return sum;
}
console.log(sum(1,2));//NaN
console.log(sum(1,2,3));//6
實(shí)現(xiàn)方法：
function sum(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
console.log(sum(1,2,3));//6
console.log(sum(1,2));//3
5. 立即執(zhí)行函數(shù)表達(dá)式是什么详恼？有什么作用
1.立即執(zhí)行函數(shù)就是：
- 聲明一個(gè)匿名函數(shù)
- 馬上調(diào)用這個(gè)匿名函數(shù)
下面是一個(gè)典型的立即執(zhí)行函數(shù)：
0_1481618156231_2509778-0a9edfdef63e74c7.png
注意要將匿名函數(shù)包起來补君，若直接寫function(){console.log("我是一個(gè)匿名函數(shù)");則報(bào)錯(cuò)
function(){console.log("我是一個(gè)匿名函數(shù)");
//Uncaught SyntaxError: Unexpected token (
你必須讓瀏覽器知道你聲明的這個(gè)匿名函數(shù)是要用的才行，也就是當(dāng)函數(shù)被理解成表達(dá)式時(shí)就會(huì)執(zhí)行昧互，比如下面幾種寫法：
(function(){alert('我是匿名函數(shù)')} ()) // 用括號(hào)把整個(gè)表達(dá)式包起來
(function(){alert('我是匿名函數(shù)')}) () // 用括號(hào)把函數(shù)包起來
!function(){alert('我是匿名函數(shù)')}() // 我們不在意值是多少挽铁，只想通過語法檢查。
+function(){alert('我是匿名函數(shù)')}()
-function(){alert('我是匿名函數(shù)')}()
~function(){alert('我是匿名函數(shù)')}()
void function(){alert('我是匿名函數(shù)')}()
new function(){alert('我是匿名函數(shù)')}()
前面兩種對(duì)整個(gè)表達(dá)式的值沒有影響敞掘，其他的在使用時(shí)可以注意一下叽掘。
-
立即執(zhí)行函數(shù)的作用
作用只有一個(gè)：創(chuàng)建一個(gè)獨(dú)立的作用域。這個(gè)作用域里面的變量玖雁，外面訪問不到（避免了變量污染）更扁。
比如下面這個(gè)例子:不管單擊哪個(gè)item，alert出來的總是6赫冬，而不是0浓镜、1、2劲厌、3膛薛、4、5脊僚。
因?yàn)閕是貫穿整個(gè)作用域的（即window下的）相叁，而不是給每個(gè)div分配一個(gè)i遵绰。for循環(huán)執(zhí)行完后i已經(jīng)變成6了（注意不是5），然后用戶一定是在for循環(huán)運(yùn)行完之后才點(diǎn)擊的增淹，此時(shí)i的結(jié)果已經(jīng)為6了.
<div class="wrap">
<div class="item">0</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var items = $(".item");
for(var i=0; i<items.length; i++){
items[i].onclick = function(){
alert(i);
}
}
</script>
- 那我們?cè)趺唇鉀Q這個(gè)問題呢椿访？明顯我們要給每個(gè)div創(chuàng)建一個(gè)獨(dú)立的作用域，一種方法就是用立即執(zhí)行函數(shù)虑润。
var items = $(".item");
for(var i=0; i<items.length; i++){
(function(n){
items[n].onclick = function(){
alert(n);
}
})(i);
}
for循環(huán)每執(zhí)行一次立即執(zhí)行函數(shù)也跟著執(zhí)行一次成玫，并且保存在內(nèi)存中。在立即執(zhí)行函數(shù)執(zhí)行的時(shí)候拳喻，i 的值被賦值給 n哭当，此后 n 的值一直不變。
i 的值從 0 變化到 5冗澈，對(duì)應(yīng) 6 個(gè)立即執(zhí)行函數(shù)钦勘，這 6 個(gè)立即執(zhí)行函數(shù)里面的 div分別是 0、1亚亲、2彻采、3、4捌归、5肛响。
6.什么是函數(shù)的作用域鏈
在JavaScript中，函數(shù)也是對(duì)象惜索，實(shí)際上特笋，JavaScript里一切都是對(duì)象。函數(shù)對(duì)象和其它對(duì)象一樣巾兆，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內(nèi)部屬性猎物。其中一個(gè)內(nèi)部屬性是[[Scope]]，由ECMA-262標(biāo)準(zhǔn)第三版定義臼寄，該內(nèi)部屬性包含了函數(shù)被創(chuàng)建的作用域中對(duì)象的集合霸奕，這個(gè)集合被稱為函數(shù)的作用域鏈溜宽，它決定了哪些數(shù)據(jù)能被函數(shù)訪問吉拳。
當(dāng)一個(gè)函數(shù)創(chuàng)建后，它的作用域鏈會(huì)被創(chuàng)建此函數(shù)的作用域中可訪問的數(shù)據(jù)對(duì)象填充适揉。例如定義下面這樣一個(gè)函數(shù)：
function add(num1,num2) {
var sum = num1 + num2;
return sum;
}
在函數(shù)add創(chuàng)建時(shí)留攒，它的作用域鏈中會(huì)填入一個(gè)全局對(duì)象，該全局對(duì)象包含了所有全局變量嫉嘀，如下圖所示（注意：圖片只例舉了全部變量中的一部分）：
函數(shù)add的作用域?qū)?huì)在執(zhí)行時(shí)用到炼邀。例如執(zhí)行如下代碼：
var total = add(5,10);執(zhí)行此函數(shù)時(shí)會(huì)創(chuàng)建一個(gè)稱為“運(yùn)行期上下文(execution context)”的內(nèi)部對(duì)象，運(yùn)行期上下文定義了函數(shù)執(zhí)行時(shí)的環(huán)境剪侮。每個(gè)運(yùn)行期上下文都有自己的作用域鏈拭宁，用于標(biāo)識(shí)符解析洛退，當(dāng)運(yùn)行期上下文被創(chuàng)建時(shí)，而它的作用域鏈初始化為當(dāng)前運(yùn)行函數(shù)的[[Scope]]所包含的對(duì)象杰标。
這些值按照它們出現(xiàn)在函數(shù)中的順序被復(fù)制到運(yùn)行期上下文的作用域鏈中兵怯。它們共同組成了一個(gè)新的對(duì)象，叫“活動(dòng)對(duì)象(activation object)”腔剂，該對(duì)象包含了函數(shù)的所有局部變量媒区、命名參數(shù)、參數(shù)集合以及this掸犬，然后此對(duì)象會(huì)被推入作用域鏈的前端袜漩，當(dāng)運(yùn)行期上下文被銷毀，活動(dòng)對(duì)象也隨之銷毀湾碎。新的作用域鏈如下圖所示：
在函數(shù)執(zhí)行過程中宙攻，沒遇到一個(gè)變量，都會(huì)經(jīng)歷一次標(biāo)識(shí)符解析過程以決定從哪里獲取和存儲(chǔ)數(shù)據(jù)介褥。該過程從作用域鏈頭部粘优，也就是從活動(dòng)對(duì)象開始搜索，查找同名的標(biāo)識(shí)符呻顽，如果找到了就使用這個(gè)標(biāo)識(shí)符對(duì)應(yīng)的變量雹顺，如果沒找到繼續(xù)搜索作用域鏈中的下一個(gè)對(duì)象，如果搜索完所有對(duì)象都未找到廊遍，則認(rèn)為該標(biāo)識(shí)符未定義嬉愧。函數(shù)執(zhí)行過程中，每個(gè)標(biāo)識(shí)符都要經(jīng)歷這樣的搜索過程喉前。
簡單總結(jié): 以函數(shù)為例：函數(shù)定義時(shí)（或被聲明時(shí)）没酣，此時(shí)會(huì)生成一個(gè)全局執(zhí)行期上下文，函數(shù)每次執(zhí)行都會(huì)產(chǎn)生一個(gè)自己唯一的執(zhí)行期上下文卵迂，然后和之前函數(shù)定義產(chǎn)生的執(zhí)行期上下文形成棧式作用域鏈裕便，全局位于棧底，而剛生成上下文位于棧頂见咒，訪問時(shí)偿衰，優(yōu)先訪問棧頂執(zhí)行期上下文，若沒有目標(biāo)改览，再往下尋找下翎，依次規(guī)則，一般全局變量都是被最后訪問的宝当，所以盡量少定義全局變量视事。
代碼題
1.以下代碼輸出什么？ （難度**）
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, '男');
//name: hunger
//age: 28
//sex: 男
//["hunger", 28, "男"]
//name valley
getInfo('hunger', 28);
//name: hunger
//age: 28
//sex: undefined
//["hunger", 28]
//name valley
getInfo('男');
//name: 男
//age: undefined
//sex: undefined
//["男"]
//name valley
2. 寫一個(gè)函數(shù)庆揩，返回參數(shù)的平方和俐东？如 （難度**）
function sumOfSquares(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i]*arguments[i];
}
return sum;
}
console.log(sumOfSquares(2,3,4)); // 29
console.log(sumOfSquares(1,3)); // 10
3. 如下代碼的輸出跌穗？為什么 （難度*）
console.log(a);//undefined
var a = 1;
console.log(b);// Uncaught ReferenceError: b is not defined(…)
變量提升，相當(dāng)于：
var a虏辫；
console.log(a);
a = 1;
console.log(b);
4.如下代碼的輸出瞻离？為什么 （難度*）
sayName('world');//hello world
sayAge(10);//Uncaught TypeError: sayAge is not a function(…)
function sayName(name){
console.log('hello ', name);
}
var sayAge = function(age){
console.log(age);
};
相當(dāng)于：
var sayAge;
function sayName(name){
console.log('hello ', name);
}
sayName('world');
sayAge(10);
sayAge = function(age){
console.log(age);
};
5.如下代碼的輸出？為什么 （難度**）
function fn(){}
var fn = 3;
console.log(fn);//3
相當(dāng)于
var fn;
function fn(){}
fn = 3;
console.log(fn);//3
先函數(shù)的聲明覆蓋變量的聲明乒裆，然后變量的賦值覆蓋函數(shù)的聲明套利。
6.如下代碼的輸出？為什么 （難度***）
function fn(fn2){
console.log(fn2);
var fn2 = 3;
console.log(fn2);
console.log(fn);
function fn2(){
console.log('fnnn2');
}
}
fn(10);
輸出
function fn2(){
console.log('fnnn2');
}
3
function fn(fn2){
console.log(fn2);
var fn2 = 3;
console.log(fn2);
console.log(fn);
function fn2(){
console.log('fnnn2');
}
}
相當(dāng)于
function fn(fn2){
var fn2
function fn2(){
console.log('fnnn2');
}
console.log(fn2);
fn2 = 3;
console.log(fn2);
console.log(fn);
}
fn(10);
7.如下代碼的輸出鹤耍？為什么 （難度***）
var fn = 1;
function fn(fn){
console.log(fn);
}
console.log(fn(fn)); // Uncaught TypeError: fn is not a function(…)
相當(dāng)于
var fn ;
function fn(fn){
console.log(fn);
}
fn = 1;
console.log(fn(fn)); //最后 fn=1肉迫，無法使用fn( )
8.如下代碼的輸出？為什么 （難度**）
//作用域
console.log(j); //undefined
console.log(i); //undefined
for(var i=0; i<10; i++){
var j = 100;
}
console.log(i); //10
console.log(j); //100
for循環(huán)不會(huì)建立局部變量稿黄，仍是全局變量喊衫，for循環(huán)結(jié)束后i=10，j=100
相當(dāng)于
var i,j;
console.log(j); //undefined
console.log(i); //undefined
for(var i=0; i<10; i++){
var j = 100;
} //此時(shí)i=10杆怕，j=100
console.log(i); //10
console.log(j); //100
9.如下代碼的輸出族购？為什么 （難度****）
fn();
var i = 10;
var fn = 20;
console.log(i);
function fn(){
console.log(i);
var i = 99;
fn2();
console.log(i);
function fn2(){
i = 100;
}
}
輸出：
undefined
100
10
相當(dāng)于：
var i;
var fn ;
function fn(){
var i;
function fn2(){
i = 100;
}
console.log(i);//undefined
i = 99;
fn2(); //此時(shí)調(diào)用fn2( ) i=100
console.log(i);//100
}
fn();
i = 10;
fn = 20;
console.log(i);//10
10.如下代碼的輸出？為什么 （難度*****）
var say = 0;
(function say(n){
console.log(n);
if(n<3) return;
say(n-1);
}( 10 ));
console.log(say);
依次輸出：10,9,8,7,6,5,4,3,2,0
括號(hào)內(nèi)是一個(gè)立即執(zhí)行函數(shù)陵珍，創(chuàng)建了一個(gè)獨(dú)立的作用域寝杖，這個(gè)作用域里的變量，外面訪問不到互纯。第一次傳入?yún)?shù)10瑟幕，打印10，由于n=10不滿足條件(n<3)留潦，于是執(zhí)行函數(shù)say(n-1)只盹，打印9,接著是8,7......3,2，當(dāng)n=2時(shí)兔院，滿足條件(n<3)殖卑，于是跳出函數(shù)，執(zhí)行console.log(say);,打印0坊萝。
