JavaScript引用類型——“Function類型”的注意要點(diǎn)

fantix 發(fā)布于2019-08-21 10:48 / 3274人閱讀

摘要：類型每個(gè)函數(shù)都是類型的實(shí)例。如以上代碼可行，是因?yàn)樵诖a開(kāi)始值錢(qián)，解析器就已經(jīng)通過(guò)一個(gè)名為函數(shù)聲明提升的過(guò)程，讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中去。也可同時(shí)使用函數(shù)聲明和函數(shù)表達(dá)式，但在瀏覽器中會(huì)出錯(cuò)。

Function 類型

每個(gè)函數(shù)都是Function 類型的實(shí)例。函數(shù)名實(shí)際上就是一個(gè)指向函數(shù)對(duì)象的指針，不會(huì)與某個(gè)函數(shù)綁定。

函數(shù)聲明方式創(chuàng)建Function，語(yǔ)法如下：

function sum(x,y){
    return x + y;
}

函數(shù)表達(dá)式定義Function，用var 如下：

var sum = function(x,y){
    return x + y;
};

第二種方法不要忘記在結(jié)尾加上分號(hào)

另外還可以使用Function 構(gòu)造函數(shù)。如：

var sum = new function("x","y","return x + y");

非常不推薦使用這種形式。

如何證明函數(shù)名僅僅是指向函數(shù)的指針呢：

var sum = function(x,y){
    return x + y;
};
console.log(sum(1,2)); //3

var anotherSum = sum;
console.log(anotherSum(1,1)); //2

sum = null;
console.log(anotherSum(10,10)); //20

沒(méi)有重載

同名的后面的函數(shù)將會(huì)覆蓋前面的函數(shù)。如：

function add(num){
    return num + 100;
}
function add(num){
    return num + 200;
}
console.log(add(100)); //300

用另外一種寫(xiě)法就可以很清楚的看出原因。如：

var add = function(num){
    return num + 100;
}
add = function(num){
    return num + 200;
}
console.log(add(100)); //300

函數(shù)的聲明與函數(shù)表達(dá)式(以及函數(shù)聲明提升)

解析器會(huì)率先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼之前可用（可訪問(wèn)）；至于函數(shù)表達(dá)式，則必須等到解析器執(zhí)行到它所在的代碼行，才會(huì)真正被解釋執(zhí)行。如：

console.log(sum(1,1)); //2
function sum(x,y){
    return x + y;
}

以上代碼可行，是因?yàn)樵诖a開(kāi)始值錢(qián)，解析器就已經(jīng)通過(guò)一個(gè)名為函數(shù)聲明提升（function declaration hoisting）的過(guò)程，讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中去。即使聲明函數(shù)的代碼在調(diào)用它的代碼后面，JavaScript 引擎也能把函數(shù)聲明提升到頂部。

但是，如果把函數(shù)聲明改成函數(shù)表達(dá)式，則會(huì)導(dǎo)致錯(cuò)誤。如：

console.log(sum(1,1)); 
var sum = function(x,y){
    return x + y;
}; //TypeError: undefined is not a function (evaluating "sum(1,1)")

失敗的原因就在于函數(shù)位于初始化語(yǔ)句中，而不是一個(gè)函數(shù)聲明。

也可同時(shí)使用函數(shù)聲明和函數(shù)表達(dá)式，但在safari 瀏覽器中會(huì)出錯(cuò)。

作為值的函數(shù)

函數(shù)也可以作為值來(lái)使用，也就是可以將一個(gè)函數(shù)作為另一個(gè)函數(shù)的結(jié)果返回。如

function callFunction(someFunction,someArgument){
    console.log(someFunction(someArgument));
}
function addNum(x){
    return x + 100;
}
callFunction(addNum,100); //200

要訪問(wèn)函數(shù)的指針而不執(zhí)行函數(shù)的話，必須去掉函數(shù)名后面的括號(hào)。

function compare(func,x,y){
    var num1 = func(x);
    var num2 = func(y);
    var array = [num1,num2];
    
    var result = array.sort(sortFunc);
    console.log(result.toString());
    document.write(result.join(" then "));
    
    
    function sortFunc(value1,value2){
        if (value1 > value2){
            return 1;
        }else if(value2 > value1){
            return -1;
        }else{
            return 0;
        }
    }
}

function add10(num){
        return num + 10;
    }

compare(add10,10000,999100); //10010 then 999110

函數(shù)內(nèi)部屬性

這里主要說(shuō)一下callee屬性、this屬性以及caller屬性。

callee屬性的功能就是消除函數(shù)名的耦合問(wèn)題。如：

function min(num){
    if(num == 1){
        return 1;
    }else if(num < 1){
        return 0;
    }else{
        return min(num - 1);
    }
}

var result = min(100);
document.write(result);

上面這個(gè)min()函數(shù)如果改了函數(shù)名，函數(shù)里面也相應(yīng)的需要修改函數(shù)名。但添加了callee屬性，就不需要修改。如：

function mins(num){
    if(num == 1){
        return 1;
    }else if(num < 1){
        return 0;
    }else{
        return arguments.callee(num - 1);
    }
}

var result = mins(100);
document.write(result);

著就解決了耦合現(xiàn)象所帶來(lái)的問(wèn)題。

this這個(gè)特殊對(duì)象的作用與Java 和C# 中的this 類似。this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象——或者this值。如：

window.color = "red";
var obj = {color: "yellow"};

function show(){
    document.write(this.color);
}

show(); //red

obj.show = show;
obj.show(); //yellow

caller用來(lái)調(diào)用當(dāng)前函數(shù)的函數(shù)的引用（源代碼）。如：

function sum(x,y){
    plus(x,y);
}

function plus(x,y){
    console.log(x + y);
    document.write("" + plus.caller + "");
}

sum(10,20);

如：

(
    function a(){
        document.write("function a");
        b();
        function b(){
            document.write("function b");
            alert(arguments.callee.caller);
        }
    }
)()

用arguments.callee 可能在某些瀏覽器中會(huì)導(dǎo)致錯(cuò)誤：

function sum(x,y){
    plus(x,y);
}

function plus(x,y){
    console.log(x + y);
    document.write("" + arguments.callee.caller + "");
}

sum(10,20);

函數(shù)屬性和方法

每個(gè)函數(shù)都包含兩個(gè)屬性length和prototype。

length屬性中，將返回參數(shù)的個(gè)數(shù)。如：

function colors(color1,color2){
    var array = [color1,color2];
    document.write(array.join("/"))
}
colors("red","blue");
document.write(" " + colors.length + "個(gè)參數(shù)"); //red/blue 2個(gè)參數(shù)

又如：

function toStr(){
        var result = "";
        for (var i = 0; i < arguments.length; i ++){
            result += arguments[i].toString() + " ";
        }
        document.write(result);
        document.write(" " + arguments.length + "個(gè)參數(shù)" + "
");
        document.write(" " + arguments.callee.length + "個(gè)函數(shù)期望參數(shù)");
}
toStr(321,32,43243,432,3213);
    
/*
321 32 43243 432 3213 5個(gè)參數(shù)
0個(gè)函數(shù)期望參數(shù)    
*/

prototype屬性。這個(gè)屬性是保存它們所有實(shí)例方法的真正所在。在創(chuàng)建自定義引用類型以及實(shí)現(xiàn)繼承時(shí)，這個(gè)屬性是非常重要的（以后再多帶帶討論）。另外，在ECMAScript 5 中，這個(gè)屬性不可枚舉（不能用for-in）。主要的兩個(gè)非繼承方法有apply()和call()；這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)。

apply()方法接收兩個(gè)參數(shù)：一個(gè)是在其中運(yùn)行函數(shù)的作用域，另一個(gè)是參數(shù)數(shù)組。第二個(gè)參數(shù)可以是Array 的實(shí)例，也可以是arguments 對(duì)象。如：

function sum(x,y){
    document.write(x.toString() + y.toString());
}

function plus(){
    return sum.apply(this,arguments);
}

plus(321,"fff");

下面這個(gè)則是Array 的實(shí)例：

function sum(x,y){
    document.write(x.toString() + y.toString());
}

function plus(a,b){
    return sum.apply(this,[a,b]);
}

plus(321,"fff");

call()方法與前者的作用相同，區(qū)別在于接收參數(shù)的方式不同。第二個(gè)參數(shù)必須一個(gè)個(gè)列舉出來(lái)。如下：

function sum(x,y){
    document.write(x.toString() + y.toString());
}

function plus(a,b){
    return sum.call(this,a,b);
}

plus(321,"fff");

上面例子中plus(a,b) 不能寫(xiě)成plus();call(this,a,b)不能寫(xiě)成call(this,arguments)和call(this,[a,b])。

高能！！！

事實(shí)上，apply()和call()真正有價(jià)值的用途是擴(kuò)充函數(shù)的作用域。如：

var child = {
    name: "Oliver",
    age: 18
}
var adult = {
    name: "Troy",
    age: 24
}

function showName(){
    document.write(this.name);
}

showName.call(adult); //Troy
showName.call(child); //Oliver

使用上面這兩個(gè)方法來(lái)擴(kuò)充作用域的最大好處就是對(duì)象不需要與方法又任何耦合關(guān)系。

ECMAScript 5 還定義了一個(gè)方法：bind()。this 的值會(huì)被綁定到傳給bind()函數(shù)的值。如：

var child = {
    name: "Oliver",
    age: 18
}
var adult = {
    name: "Troy",
    age: 24
}

function showName(){
    document.write(this.name);
}

var newFunc = showName.bind(child);
newFunc(); //Oliver