javascrip函數簡單介紹
JavaScript 函數定義
JavaScript 使用關鍵字 function 定義函數。
函數可以通過聲明定義,也可以是一個表達式。
函數聲明
在之前的教程中,你已經了解了函數聲明的語法 :
function functionName(parameters) {
執行的代碼
}
函數聲明後不會立即執行,會在我們需要的時候調用到。
函數表達式
JavaScript 函數可以通過一個表達式定義。
函數表達式可以存儲在變量中:
實例
var x = function (a, b) {return a * b};
在函數表達式存儲在變量後,變量也可作為一個函數使用:
實例
var x = function (a, b) {return a * b};
var z = x(4, 3);
以上函數實際上是一個 匿名函數 (函數沒有名稱)。
函數存儲在變量中,不需要函數名稱,通常通過變量名來調用。
上述函數以分號結尾,因為它是一個執行語句。
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(提升)"。
提升(Hoisting)是 JavaScript 默認將當前作用域提升到前面去的的行為。
提升(Hoisting)應用在變量的聲明與函數的聲明。
因此,函數可以在聲明之前調用:
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表達式定義函數時無法提升。
自調用函數
函數表達式可以 "自調用"。
自調用表達式會自動調用。
如果表達式後面緊跟 () ,則會自動調用。
不能自調用聲明的函數。
通過添加括號,來說明它是一個函數表達式:
實例
(function () {
var x = "Hello!!"; // 我將調用自己
})();
以上函數實際上是一個 匿名自我調用的函數 (沒有函數名)。
函數可作為一個值使用
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;
}
toString() 方法將函數作為一個字符串返回:
實例
function myFunction(a, b) {
return a * b;
}
var txt = myFunction.toString();
函數定義作為對象的屬性,稱之為對象方法。
函數如果用於創建新的對象,稱之為對象的構造函數。
JavaScript 函數參數
JavaScript 函數對參數的值沒有進行任何的檢查。
函數顯式參數(Parameters)與隱式參數(Arguments)
在先前的教程中,我們已經學習了函數的顯式參數:
functionName(parameter1, parameter2, parameter3) {
// 要執行的代碼……
}
函數顯式參數在函數定義時列出。
函數隱式參數在函數調用時傳遞給函數真正的值。
參數規則
JavaScript 函數定義時顯式參數沒有指定數據類型。
JavaScript 函數對隱式參數沒有進行類型檢測。
JavaScript 函數對隱式參數的個數沒有進行檢測。
默認參數
如果函數在調用時未提供隱式參數,參數會默認設置為: 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 對象。
argument 對象包含了函數調用的參數數組。
通過這種方式你可以很方便的找到最大的一個參數的值:
實例
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = arguments[0];
if(arguments.length < 2) return max;
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;
}
通過值傳遞參數
在函數中調用的參數是函數的隱式參數。
JavaScript 隱式參數通過值來傳遞:函數僅僅只是獲取值。
如果函數修改參數的值,不會修改顯式參數的初始值(在函數外定義)。
隱式參數的改變在函數外是不可見的。
通過對象傳遞參數
在JavaScript中,可以引用對象的值。
因此我們在函數內部修改對象的屬性就會修改其初始的值。
修改對象屬性可作用於函數外部(全局變量)。
修改對象屬性在函數外是可見的。
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 的值成為對象本身。
使用構造函數調用函數
如果函數調用前使用了 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() 是預定義的函數方法。 兩個方法可用於調用函數,兩個方法的第一個參數必須是對象本身。
實例
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
實例
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20
兩個方法都使用了對象本身作為第一個參數。 兩者的區別在於第二個參數: apply傳入的是一個參數數組,也就是將多個參數組合成為一個數組傳入,而call則作為call的參數傳入(從第二個參數開始)。
在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成為 this 的值, 即使該參數不是一個對象。
在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代。
通過 call() 或 apply() 方法你可以設置 this 的值, 且作為已存在對象的新方法調用。
this 是 JavaScript 語言的一個關鍵字。
它代表函數運行時,自動生成的一個內部對象,只能在函數內部使用。比如:
function test() {
this.x = 1;
}
隨著函數使用場合的不同,this 的值會發生變化。但是有一個總的原則,那就是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() {
return 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 方法修改。
閉包是可訪問上一層函數作用域裏變量的函數,即便上一層函數已經關閉。
javascrip函數簡單介紹