問答題
1. 函數聲明和函數表達式有什么區別
1.函數聲明必須有標識符，也就是常說的函數名；函數表達式可以省略函數名。
函數聲明（要帶標識符）
function functionName(arg1, arg2, ...){
<!-- function body -->
}
函數表達式
- 省略標識符：
var variable=function(arg1, arg2, ...){
<!-- function body -->
}
- 帶有標識符：
var variable=function functionName(arg1, arg2, ...){
<!-- function body -->
}
2.函數聲明會提前
sayTruth();<!-- 函數聲明 -->
function sayTruth(){
alert('myvin is handsome.');
}
sayTruth();<!-- 函數表達式 -->
var sayTruth=function(){
alert('myvin is handsome.');
}
即函數聲明的話sayTruth()可以提前調用，而函數表達式是什么時候遇到什么時候執行。
3.ECMAScript規范中表示，函數聲明語句可以出現在全局代碼中，或者內嵌在其他函數中，但是不能出現在循環、條件判、或者try/finally以及with語句中；而函數表達式可以在任何地方聲明.
2. 什么是變量的聲明前置？什么是函數的聲明前置
- 變量的聲明前置
JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。這造成的結果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升
console.log(xxx); // Uncaught ReferenceError: xxx is not defined
我們在使用一個變量之前必須聲明變量，但是由于變量提升，我們如果聲明了變量，即使在聲明語句前使用也是可以的，只不過其值是初始值undefined
console.log(xxx); // undefined
var xxx = 2;
- 函數的聲明前置
和變量的聲明會前置一樣，函數聲明同樣會前置，如果我們使用函數表達式那么規則和變量一樣;
console.log(fn); //undefined
var fn = function(){}
如果我們使用函數聲明的方式，那么即使函數寫在最后也可以在前面語句調用，前提是函數聲明部分已經被下載到本地
fn(); // "1"
function fn(){
console.log('1');
}
3.arguments 是什么
在函數內部,你可以使用arguments對象獲取到該函數的所有傳入參數
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.函數的重載怎樣實現
重載是很多面向對象語言實現多態的手段之一，在靜態語言中確定一個函數的手段是靠方法簽名——函數名+參數列表，也就是說相同名字的函數參數個數不同或者順序不同都被認為是不同的函數，稱為函數重載
在JavaScript中沒有函數重載的概念，函數通過名字確定唯一性，參數不同也被認為是相同的函數，后面的覆蓋前面的.
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
實現方法：
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. 立即執行函數表達式是什么？有什么作用
1.立即執行函數就是：
- 聲明一個匿名函數
- 馬上調用這個匿名函數
下面是一個典型的立即執行函數：
0_1481618156231_2509778-0a9edfdef63e74c7.png
注意要將匿名函數包起來，若直接寫function(){console.log("我是一個匿名函數");則報錯
function(){console.log("我是一個匿名函數");
//Uncaught SyntaxError: Unexpected token (
你必須讓瀏覽器知道你聲明的這個匿名函數是要用的才行，也就是當函數被理解成表達式時就會執行，比如下面幾種寫法：
(function(){alert('我是匿名函數')} ()) // 用括號把整個表達式包起來
(function(){alert('我是匿名函數')}) () // 用括號把函數包起來
!function(){alert('我是匿名函數')}() // 我們不在意值是多少，只想通過語法檢查。
+function(){alert('我是匿名函數')}()
-function(){alert('我是匿名函數')}()
~function(){alert('我是匿名函數')}()
void function(){alert('我是匿名函數')}()
new function(){alert('我是匿名函數')}()
前面兩種對整個表達式的值沒有影響，其他的在使用時可以注意一下。
-
立即執行函數的作用
作用只有一個：創建一個獨立的作用域。這個作用域里面的變量，外面訪問不到（避免了變量污染）。
比如下面這個例子:不管單擊哪個item，alert出來的總是6，而不是0、1、2、3、4、5。
因為i是貫穿整個作用域的（即window下的），而不是給每個div分配一個i。for循環執行完后i已經變成6了（注意不是5），然后用戶一定是在for循環運行完之后才點擊的，此時i的結果已經為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>
- 那我們怎么解決這個問題呢？明顯我們要給每個div創建一個獨立的作用域，一種方法就是用立即執行函數。
var items = $(".item");
for(var i=0; i<items.length; i++){
(function(n){
items[n].onclick = function(){
alert(n);
}
})(i);
}
for循環每執行一次立即執行函數也跟著執行一次，并且保存在內存中。在立即執行函數執行的時候，i 的值被賦值給 n，此后 n 的值一直不變。
i 的值從 0 變化到 5，對應 6 個立即執行函數，這 6 個立即執行函數里面的 div分別是 0、1、2、3、4、5。
6.什么是函數的作用域鏈
在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。
當一個函數創建后，它的作用域鏈會被創建此函數的作用域中可訪問的數據對象填充。例如定義下面這樣一個函數：
function add(num1,num2) {
var sum = num1 + num2;
return sum;
}
在函數add創建時，它的作用域鏈中會填入一個全局對象，該全局對象包含了所有全局變量，如下圖所示（注意：圖片只例舉了全部變量中的一部分）：
函數add的作用域將會在執行時用到。例如執行如下代碼：
var total = add(5,10);執行此函數時會創建一個稱為“運行期上下文(execution context)”的內部對象，運行期上下文定義了函數執行時的環境。每個運行期上下文都有自己的作用域鏈，用于標識符解析，當運行期上下文被創建時，而它的作用域鏈初始化為當前運行函數的[[Scope]]所包含的對象。
這些值按照它們出現在函數中的順序被復制到運行期上下文的作用域鏈中。它們共同組成了一個新的對象，叫“活動對象(activation object)”，該對象包含了函數的所有局部變量、命名參數、參數集合以及this，然后此對象會被推入作用域鏈的前端，當運行期上下文被銷毀，活動對象也隨之銷毀。新的作用域鏈如下圖所示：
在函數執行過程中，沒遇到一個變量，都會經歷一次標識符解析過程以決定從哪里獲取和存儲數據。該過程從作用域鏈頭部，也就是從活動對象開始搜索，查找同名的標識符，如果找到了就使用這個標識符對應的變量，如果沒找到繼續搜索作用域鏈中的下一個對象，如果搜索完所有對象都未找到，則認為該標識符未定義。函數執行過程中，每個標識符都要經歷這樣的搜索過程。
簡單總結: 以函數為例：函數定義時（或被聲明時），此時會生成一個全局執行期上下文，函數每次執行都會產生一個自己唯一的執行期上下文，然后和之前函數定義產生的執行期上下文形成棧式作用域鏈，全局位于棧底，而剛生成上下文位于棧頂，訪問時，優先訪問棧頂執行期上下文，若沒有目標，再往下尋找，依次規則，一般全局變量都是被最后訪問的，所以盡量少定義全局變量。
代碼題
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. 寫一個函數，返回參數的平方和？如 （難度**）
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(…)
變量提升，相當于：
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);
};
相當于：
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
相當于
var fn;
function fn(){}
fn = 3;
console.log(fn);//3
先函數的聲明覆蓋變量的聲明，然后變量的賦值覆蓋函數的聲明。
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');
}
}
相當于
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(…)
相當于
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循環不會建立局部變量，仍是全局變量，for循環結束后i=10，j=100
相當于
var i,j;
console.log(j); //undefined
console.log(i); //undefined
for(var i=0; i<10; i++){
var j = 100;
} //此時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
相當于：
var i;
var fn ;
function fn(){
var i;
function fn2(){
i = 100;
}
console.log(i);//undefined
i = 99;
fn2(); //此時調用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
括號內是一個立即執行函數，創建了一個獨立的作用域，這個作用域里的變量，外面訪問不到。第一次傳入參數10，打印10，由于n=10不滿足條件(n<3)，于是執行函數say(n-1)，打印9,接著是8,7......3,2，當n=2時，滿足條件(n<3)，于是跳出函數，執行console.log(say);,打印0。
