758
JavaScript 函數
JavaScript 函數定義
JavaScript 使用關鍵字 function 定義函數
函數可以通過聲明定義，也可以是一個表達式
函數聲明
函數聲明的語法 :
function sum1(n1,n2){
return n1+n2;
};
函數聲明後不會立即執行，會在我們需要的時候調用到
分號是用來分隔可執行JavaScript語句，由於函數聲明不是一個可執行語句所以不以分號結束
函數表達式，又叫函數字麵量
JavaScript 函數可以通過一個表達式定義
函數表達式可以存儲在變量中：
var sum2=function(n1,n2){
return n1+n2;
};
在函數表達式存儲在變量後，變量也可作為一個函數使用：
兩者的區別：解析器會先讀取函數聲明，並使其在執行任何代碼之前可以訪問；而函數表達式則必須等到解析器執行到它所在的代碼行才會真正被解釋執行。
var x = function (a, b) {return a * b};
var z = x(4, 3);
以上函數實際上是一個 匿名函數 (函數沒有名稱)。函數存儲在變量中，不需要函數名稱，通常通過變量名來調用。上述函數以分號結尾，因為它是一個執行語句。
函數的幾種寫法
1 常見寫法:
function Test(){
alert("test");
}
Test()
2 匿名函數：
var test=function(){
alert("test");
}
test();
3 自調用函數：
(function () {
alert('test');
})();
4 函數嵌套:
var Test = {
test1:function(){
alert('test1');
},
test2:function(){
alert('test2');
}
}
var t = Test.test1();
5 函數繼承和構造函數
var Test = function(){};
Test.prototype={
test1:function(){
alert('test1');
},test2:function(){
alert('test2');
}
}
var t = new Test();
t.test2();
Function() 構造函數
在以上實例中，我們了解到函數通過關鍵字 function 定義。函數同樣可以通過內置的 JavaScript 函數構造器（Function()）定義
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
實際上，你不必使用構造函數。上麵實例可以寫成：
var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);
在 JavaScript 中，很多時候，你需要避免使用 new 關鍵字
函數提升（Hoisting）
提升（Hoisting）是 JavaScript 默認將當前作用域提升到前麵去的的行為。
提升（Hoisting）應用在變量的聲明與函數的聲明，因此，函數可以在聲明之前調用：
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表達式定義函數時無法提升
myFunction(5);
var myFunction = function(y) {
return y * y;
}
以上代碼運行即會報錯，原因在於函數位於一個初始化語句中，而不是一個函數聲明。換句話講，在執行到函數所在的語句之前，變量myFunction中不會保存有對函數的引用；而且，由於第一行代碼就會導致“unexpected identifier”（意外標識符）錯誤，實際上也不會執行到下一行。
除了聲明時候可以通過變量訪問函數這一點區別之外，函數聲明與函數表達式的語法其實是等價的。
自調用函數
函數表達式可以 "自調用"。自調用表達式會自動調用。如果表達式後麵緊跟 () ，則會自動調用。不能自調用聲明的函數。通過添加括號，來說明它是一個函數表達式：
(function () {
var x = "Hello!!"; // 我將調用自己
})();
以上函數實際上是一個 匿名自我調用的函數
自調用函數可用來傳參帶返回值
var sum=(function(x,y){
return x+y;
})(2,3);
console.log(sum);
自執行函數嚴格來說也叫函數表達式，它主要用於創建一個新的作用域，在此作用域內聲明的變量，不會和其它作用域內的變量衝突或混淆，大多是以匿名函數方式存在，且立即自動執行。
JavaScript函數可作為一個值使用
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
JavaScript函數可作為表達式使用：
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;
函數是對象
在 JavaScript 中使用 typeof 操作符判斷函數類型將返回 "function" ,但JavaScript 函數描述為一個對象更加準確。
JavaScript 函數有屬性和方法。
arguments.length 屬性返回函數調用過程接收到的參數個數：
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4,3,6,5);
toString() 方法將函數作為一個字符串返回:
函數定義作為對象的屬性，稱之為對象方法。
函數如果用於創建新的對象，稱之為對象的構造函數
JavaScript 函數參數
JavaScript 函數對參數的值(arguments)沒有進行任何的檢查
函數顯式參數與隱藏參數(arguments)
函數顯式參數在函數定義時列出
functionName(parameter1, parameter2, parameter3) {
code to be executed
}
函數隱藏參數(arguments)在函數調用時傳遞給函數真正的值
參數規則
JavaScript 函數定義時參數沒有指定數據類型,對隱藏參數(arguments)沒有進行檢測,對隱藏參數(arguments)的個數沒有進行檢測
默認參數
如果函數在調用時缺少參數，參數會默認設置為： undefined
有時這是可以接受的，但是建議最好為參數設置一個默認值：
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
或者，更簡單的方式：
function myFunction(x, y) {
y = y || 0;
}
如果y已經定義， y || 返回y, 因為y是 true, 否則返回 0, 因為undefined為 false
如果函數調用時設置了過多的參數，參數將無法被引用，因為無法找到對應的參數名。 隻能使用 arguments 對象來調用
Arguments 對象
JavaScript 函數有個內置的對象 arguments 對象。arguments 對象包含了函數調用的參數數組。通過這種方式你可以很方便的找到每個參數的值：
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
或者創建一個函數用來統計所有數值的和：
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
通過值傳遞參數
在函數中調用的參數是函數的參數。
如果函數修改參數的值，將不會修改參數的初始值（在函數外定義）。
var x = 1;
function myFunction(x) {// 通過值傳遞參數
x++; //修改參數x的值，將不會修改在函數外定義的變量 x
console.log(x);
}
myFunction(x); // 2
console.log(x); // 1
通過對象傳遞參數
在JavaScript中可以引用對象的值，因此我們在函數內部修改對象的屬性就會修改其初始的值。
修改對象屬性可作用於函數外部（全局變量）。
var obj = {x:1};
function myFunction(obj) {// 通過對象傳遞參數
obj.x++; //修改參數對象obj.x的值，函數外定義的obj也將會被修改
console.log(obj.x);
}
myFunction(obj); // 2
console.log(obj.x); // 2
JavaScript 函數調用
JavaScript 函數有 4 種調用方式。每種方式的不同方式在於 this 的初始化
this 關鍵字
一般而言，在Javascript中，this指向函數執行時的當前對象
注意 this 是保留關鍵字，你不能修改 this 的值
調用 JavaScript 函數
函數中的代碼在函數被調用後執行
作為一個函數調用
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
以上函數不屬於任何對象。但是在 JavaScript 中它始終是默認的全局對象。
在 HTML 中默認的全局對象是 HTML 頁麵本身，所以函數是屬於 HTML 頁麵。
在瀏覽器中的頁麵對象是瀏覽器窗口(window 對象)。以上函數會自動變為 window 對象的函數
myFunction() 和 window.myFunction() 是一樣的：
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20
這是調用 JavaScript 函數常用的方法， 但不是良好的編程習慣。全局變量，方法或函數容易造成命名衝突的bug
全局對象
當函數沒有被自身的對象調用時， this 的值就會變成全局對象。
在 web 瀏覽器中全局對象是瀏覽器窗口（window 對象）。
該實例返回 this 的值是 window 對象:
function myFunction() {
return this;
}
myFunction(); // 返回 window 對象
函數作為全局對象調用，會使 this 的值成為全局對象。使用 window 對象作為一個變量容易造成程序崩潰
函數作為方法調用
在 JavaScript 中你可以將函數定義為對象的方法。
以下實例創建了一個對象 (myObject), 對象有兩個屬性 (firstName 和 lastName), 及一個方法 (fullName):
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
fullName 方法是一個函數。函數屬於對象。 myObject 是函數的所有者。
this對象，擁有 JavaScript 代碼。實例中 this 的值為 myObject 對象。
測試以下！修改 fullName 方法並返回 this 值:
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // 返回 [object Object] (所有者對象)
函數作為對象方法調用，會使得 this 的值成為對象myObject本身
使用構造函數調用函數，參數必須加引號
如果函數調用前使用了 new 關鍵字, 則是調用了構造函數。這看起來就像創建了新的函數，但實際上 JavaScript 函數是重新創建的對象：
// 構造函數:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"
構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法
構造函數中 this 關鍵字沒有任何的值。this 的值在函數調用時實例化對象(new object)時創建。
作為函數方法調用函數
在 JavaScript 中, 函數是對象。JavaScript 函數有它的屬性和方法。call() 和 apply() 是預定義的函數方法。 兩個方法可用於調用函數，兩個方法的第一個參數必須是對象本身。
//call()
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回 20
//apply()
function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 返回 20
兩個方法都使用了對象本身作為第一個參數。 兩者的區別在於第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。call和apply的第一個參數就是this指針要指向的對象
在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成為 this 的值， 即使該參數不是一個對象。
在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代。
通過 call() 或 apply() 方法你可以設置 this 的值, 且作為已存在對象的新方法調用
JavaScript 閉包
JavaScript 變量可以是局部變量或全局變量
私有變量可以用到閉包
局部變量和全局變量
函數可以訪問函數內部定義的變量
function myFunction() {
var a = 4;
return a * a;
}
函數也可以訪問函數外部定義的變量
var a = 4;
function myFunction() {
return a * a;
}
後麵一個實例中， a 是一個全局變量。在web頁麵中全局變量屬於 window 對象。全局變量可應用於頁麵上的所有腳本。
在第一個實例中， a是一個局部變量。局部變量隻能用於定義它函數內部。對於其他的函數或腳本代碼是不可用的。全局和局部變量即便名稱相同，它們也是兩個不同的變量。修改其中一個，不會影響另一個的值。
變量聲明是如果不使用 var 關鍵字，那麼它就是一個全局變量，即便它在函數內定義
變量生命周期
全局變量的作用域是全局性的，即在整個JavaScript程序中，全局變量處處都在。而在函數內部聲明的變量，隻在函數內部起作用。這些變量是局部變量，作用域是局部性的；函數的參數也是局部性的，隻在函數內部起作用。
計數器困境
設想下如果你想統計一些數值，且該計數器在所有函數中都是可用的。你可以使用全局變量，函數設置計數器遞增：
var counter = 0;
function add() {
counter += 1;
}
add();
add();
add();
// 計數器現在為 3
計數器數值在執行 add() 函數時發生變化。但問題來了，頁麵上的任何腳本都能改變計數器，即便沒有調用 add() 函數。如果我在函數內聲明計數器，如果沒有調用函數將無法修改計數器的值：
function add() {
var counter = 0;
counter += 1;
}
add();
add();
add();
// 本意是想輸出 3, 但事與願違，輸出的都是 1 !
以上代碼將無法正確輸出，每次我調用 add() 函數，計數器都會設置為 1。JavaScript 內嵌函數可以解決該問題
JavaScript 內嵌函數
所有函數都能訪問全局變量。 實際上，在 JavaScript 中，所有函數都能訪問它們上一層的作用域。JavaScript 支持嵌套函數。嵌套函數可以訪問上一層的函數變量。
該實例中，內嵌函數 plus() 可以訪問父函數的 counter 變量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
如果我們能在外部訪問 plus() 函數，這樣就能解決計數器的困境。我們同樣需要確保 counter = 0 隻執行一次。我們需要閉包。
JavaScript 閉包
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 計數器為 3
變量 add 指定了函數自我調用的返回字值。自我調用函數隻執行一次。設置計數器為 0。並返回函數表達式。add變量可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層作用域的計數器。這個叫作 JavaScript 閉包。它使得函數擁有私有變量變成可能。計數器受匿名函數的作用域保護，隻能通過 add 方法修改。
閉包是可訪問上一層函數作用域裏變量的函數，即便上一層函數已經關閉
最後更新：2017-05-31 18:01:20