摘要：什么是函數引用的原話函數是一組可以隨時隨地運行的語句。函數是由這樣的方式進行聲明的關鍵字函數名一組參數，以及置于括號中的待執行代碼。

什么是函數？

引用 W3School 的原話:

函數是一組可以隨時隨地運行的語句。
函數是 ECMAScript 的核心。
函數是由這樣的方式進行聲明的：關鍵字 function、函數名、一組參數，以及置于括號中的待執行代碼。
函數的基本語法是這樣的：
function functionName(arg0, arg1, ... argN) {
  statements
}

聲明函數的幾種方式

調用函數的幾種方式

重載函數的實現

函數的獨立性

聲明函數

//聲明函數的4種方法

//方法一 直接聲明
function speak(word){
    console.log(word)
}

//方法二 指定一個匿名函數 將其賦給一個變量,后面可以直接通過該變量調用該函數
var speak2 = function (word) {
    console.log(word);
};//定義匿名函數需要注意最后需要加分號

//方法三 使用 Function對象 生成一個函數實例 
var speak3 = new Function("word","console.log(word);");

//方法四 使用 Function函數 返回函數實例
var speak4 = Function("word","console.log(word);");

調用函數基本方法

speak("hello world for global !");

this.speak("hello world for this !");

window.speak("hello world for window !");

調用函數的高級方法

speak.call(null,"hello world with call !");//null 代表是用全局對象 window 調用

speak.apply(null,["hello world with apply !"]);

輸出結果:

這里方法一大家不言而喻,簡單明了,直接就是聲明了一個函數,需要指出的是,默認寫的函數在不依附其他對象的情況下均為全局函數,即成為 window 對象的成員,可以直接使用 window(Window 對象的實例,Window 對象實現了核心 JavaScript 所定義的所有全局屬性和方法)調用,或者通過 this 調用,在這里JS 頂層代碼中 this 指向的就是 window

每當我們使用方法一聲明了一個函數的時候,實際是生成了一個 Function 對象的實例.即每個函數其實質都是一個 Function 對象實例.

注意:
JS 解析器每解析到一個函數的時候,都會在堆內存內劃分出一塊空間來存儲創建該 Function 實例

方法二:
首先 JS 解析器解析到一個函數的時候,在堆內存內劃分出一塊空間來存儲創建該 Function 實例,接著在當前棧內存
創建一個叫 speak2 的變量,這個變量有個值,這個值是一個地址,指向的是堆內存中的那個 Function 實例.實際上這就是大名鼎鼎的引用.

方法三:
與方法一和方法二不同的是,前兩個方法都是聲明好讓解析器去解析,讓解析器生成 Function 實例(就是上面聲明的函數,解析器調用 Function 構造器來生成實例,這些步驟是我們看不到的),方法三是我們手動調用 Function 構造器生成 Function 實例(步驟掌握在自己的手里)

方法四:
與方法三不同的地方就是沒有 new,在這里 new 與沒 new 的區別就是當有 new 的時候 Function 函數充當一個構造器,new 后返回的就是實例化后得到的對象(此時Function 內部的 this指向的就是當前生成的對象),不使用 new 的話就是把 Function 函數看做一個普通函數直接調用,直接調用 Function 函數讓其在內部(我們看不到)new 一個實例返回,本質是一樣的.

call方法與 apply 方法
查看EcmaScript.js

可以看到 call 方法與 apply 方法的區別:

他們的第一個參數指的是調用該方法對象

call 方法的第二個參數是可變數組參數,即可以傳入多個參數,非傳入一個數組.傳入的多個參數對應的是被調用方法的各參數.

apply 方法的第二個參數是一個數組對象,即可以直接傳入一個數組對象,數組對象的每項對應的是被調用的方法的各參數.

實現重載函數
在 JS 中,并不像其他強類型語言一樣可以聲明重載函數,若在原先聲明的函數后再聲明一個不同參數數量的函數(JS是弱語言, 聲明的函數不需要指明參數類型),解析器會用后面聲明的函數覆蓋前面聲明的函數.那我們該如何實現呢.

arguments 對象
在每個函數都有一個arguments 屬性,同樣查看 EcmaScript.js

當生成一個函數實例后,解析器會賦給arguments 屬性一個Arguments對象實例,這個實例是什么,再看 EcmaScript.js

可以得知其為一個對象同時為數組對象的子類,故可以將其當初數組對象使用.
函數實例中的 arguments對象(可以算是一個數組)的數組項內容便是我們在調用函數時進行傳遞的參數.只要我們有傳參,這個屬性就有數組項,否則數組長度為0,故我們可以通過arguments.length 來查看其得到的形參的數量.

有了上面的基礎便可實現重載函數
這里引用 W3School 的例子

function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 5);
  } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}

doAdd(10);        //輸出 "15"
doAdd(40, 20);    //輸出 "60"

函數的獨立性
我們都知道,每當我們聲明了一個函數,其實際為一個 Function 實例,那它獨立在哪呢,如何體現呢
看一下代碼:

function Dog(name,age){
    this.name = name;
    this.age = age;
    this.showName = function () {
        console.log(this.name);
    }
}

function Cat(name,age){
    this.name = name;
    this.age = age;
    this.showName = function () {
        console.log(this.name);
    }
}

var dog = new Dog("wangwang",2);
var cat = new Cat("miaomiao",3);

dog.showName();
cat.showName();
dog.showName.call(cat);

輸出結果為:

解釋:
每當我們在函數內使用 this 的時候,無非這幾種情況:
1.作為構造器生成的實例對象
2.作為調用當前方法的對象
3.在 JS 頂層代碼可以使用 this 代表 window 調用全局函數等

故當我們使用 call 方法調用某個對象的方法時,雖然從代碼語義上看,這個所屬方法是屬于該對象的(showName 屬于 Dog 或 Cat),但是由于函數有用其特殊的獨立性即有以上幾個關于 this 的特點,導致最終的結果是不同的.
當我們直接調用 dog 的 showName 方法時,showName 方法內的 this 指向的是該dog 對象(Dog 實例).

我們知道調用 call 方法時需要傳入的第一個參數即為調用當前函數亦或方法的對象,此時被調用的方法的 this 指向的實際為傳入的第一個參數.即當我們通過 call 調通 dog 的 showName 方法時,傳入的第一個參數是 cat 對象,代表 dog 的 showName 方法的 this 此時指向的不是 dog 是 cat.最后輸出的當然是 cat 的內容

最后指出:在對函數進行傳參時,若傳的是 JS 的基本類型,則為值傳遞,否則為引用傳遞.