javascript-Function類型整理

1.函數聲明和函數表達式

先來看看什麼樣的是函數聲明：

 

<script>
function() {
    alert("hello, world.");
};

function foo() {
    alert("hello, world.");
};
</script>

再來看看什麼樣的是函數表達式：

<script>
var foo = function() {
    alert("hello, world.");
};
</script>

下面這個就是先聲明然後執行了這個函數：

<script>
(function() {
    alert("hello, world.");
})();
</script>

 

函數聲明和函數表達式的區別：

函數聲明，解析器會率先讀取函數聲明，並使其在執行任何代碼之前可用；對於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解釋執行。

console.log(typeof(fn)); // function
    fn('abc'); // abc


    console.log(typeof(fnx)); // undefined

    if(fnx)
        fnx('abc');  // will not execute
    else
        console.log('fnx is undefined'); // fnx is undefined

    // 函數語句
    function fn(str)
    {
        console.log(str);
    };

    // 表達式定義
    var fnx=function(str)
    {
        console.log(str+ ' from fnx');
    };

 

2. 函數內部屬性

1）arguments,類數組對象，保存着傳入函數的參數。這個對象有個callee的屬性，它是一個指針，指向擁有這個arguments對象的函數。

//遞歸計算
var sum = function(n){
  if (n <= 0)                        
  return 1;
  else
    return n ＋arguments.callee(n - 1)
}

 

2）this,this引用的是函數據以操作的對象。

 

window.color = "red";
var 0 = {color : "blue"};
function sayColor(){
     alert(this.color);
}
sayColor();  //"red"
o.sayColor=sayColor;
o.sayColor(); // "blue"

 

3) caller,這個屬性保存着調用當前函數的函數引用，如果在全局作用域中調用當前函數，它的值爲null。

function callerDemo() {
    if ( arguments.caller) { 
        var a= callerDemo.caller.toString();
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 
handleCaller(); 
function calleeDemo() { 
    alert(arguments.callee); 
} 
calleeDemo(); 

 

3. 函數的屬性

1）length：函數希望接收的命名函數個數

2）prototype

 

4.函數方法

apply()和call()。

他們的作用是在特定的作用域中調用函數，apply()接收兩個參數，一個是函數運行的作用域(this)，另一個是參數數組，它可以是Array的實例也可以是arguments對象。
call()方法第一個參數與apply()方法相同，但傳遞給函數的參數必須列舉出來

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
　　console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //huo .call(this); //Hello diz song glad to meet you!
HelloName.call(myObject);  //Hello my Object glad to meet you!

 

function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30 

我們發現apply()和call()的真正用武之地是能夠擴充函數賴以運行的作用域，如果我們想用傳統的方法實現，請見下面的代碼：

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you! 

bind()方法會創建一個函數實例，其this值會被綁定到傳給bind()函數的值

window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue 

sayColor()調用bind()方法，並傳入o對象，返回了OSayColor()函數，在OSayColor()中，this的值就爲o對象。