react native 開發基礎=javaScript=學習筆記----函數

JavaScript 函數定義

函數表達式

JavaScript 函數可以通過一個表達式定義。

函數表達式可以存儲在變量中,這樣,變量也可作爲一個函數使用,例如:

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);

函數提升(Hoisting)

在之前的教程中我們已經瞭解了 "hoisting(提升)"。

提升(Hoisting)是 JavaScript 默認將當前作用域提升到前面去的的行爲。

提升(Hoisting)應用在變量的聲明與函數的聲明。

因此,函數可以在聲明之前調用。

使用表達式定義函數時無法提升。

自調用函數

函數表達式可以 "自調用"。自調用表達式會自動調用。

如果表達式後面緊跟 () ,則會自動調用。

不能自調用聲明的函數。通過添加括號,來說明它是一個函數表達式:例子

(function () {
    var x = "Hello!!";      // 我將調用自己
})();

函數是對象

在 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)

函數顯式參數在函數定義時列出。

函數隱式參數在函數調用時傳遞給函數真正的值。

參數規則

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 對象

JavaScript 函數有個內置的對象 arguments 對象。

argument 對象包含了函數調用的參數數組。

通過這種方式你可以很方便的找到最後一個參數的值:

實例

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;
}

通過值傳遞參數

在函數中調用的參數是函數的隱式參數。

JavaScript 隱式參數通過值來傳遞:函數僅僅只是獲取值。

如果函數修改參數的值,不會修改顯式參數的初始值(在函數外定義)。

隱式參數的改變在函數外是不可見的。

通過對象傳遞參數

在JavaScript中,可以引用對象的值。

因此我們在函數內部修改對象的屬性就會修改其初始的值。

修改對象屬性可作用於函數外部(全局變量)。

修改對象屬性在函數外是可見的。


JavaScript 函數調用

JavaScript 函數有 4 種調用方式。

每種方式的不同方式在於 this 的初始化。//還不太理解?

作爲一個函數調用

實例

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

以上函數不屬於任何對象。但是在 JavaScript 中它始終是默認的全局對象。

在 HTML 中默認的全局對象是 HTML 頁面本身,所以函數是屬於 HTML 頁面。

在瀏覽器中的頁面對象是瀏覽器窗口(window 對象)。以上函數會自動變爲 window 對象的函數。

myFunction() 和 window.myFunction() 是一樣的:

全局對象

當函數沒有被自身的對象調用時, this 的值就會變成全局對象。

在 web 瀏覽器中全局對象是瀏覽器窗口(window 對象)。

該實例返回 this 的值是 window 對象:

實例

function myFunction() {
    return this;
}
myFunction();                // 返回 window 對象

函數作爲方法調用

在 JavaScript 中你可以將函數定義爲對象的方法。

以下實例創建了一個對象 (myObject), 對象有兩個屬性 (firstName 和 lastName), 及一個方法 (fullName):

實例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

使用構造函數調用函數

如果函數調用前使用了 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"
構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法。

作爲函數方法調用函數

在 JavaScript 中, 函數是對象。JavaScript 函數有它的屬性和方法。

call() 和 apply() 是預定義的函數方法。 兩個方法可用於調用函數,兩個方法的第一個參數必須是對象本身。

實例

function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

實例

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

兩個方法都使用了對象本身作爲第一個參數。 兩者的區別在於第二個參數: apply傳入的是一個參數數組,也就是將多個參數組合成爲一個數組傳入,而call則作爲call的參數傳入(從第二個參數開始)。

在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成爲 this 的值, 即使該參數不是一個對象。

在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代。

  通過 call() 或 apply() 方法你可以設置 this 的值, 且作爲已存在對象的新方法調用。



學習資料:javaScript菜鳥教程


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章