本文主要內容：
1.分析函式的四種呼叫形式
2.弄清楚函式中this的意義
3.明確構造函物件的過程
4.學會使用上下文呼叫函式
一、函式呼叫形式
函式呼叫形式是最常見的形式，也是最好理解的形式。所謂函式形式就是一般宣告函式後直接呼叫即是。例如：
複製程式碼 程式碼如下:
// 宣告一個函式，並呼叫
function func() {
alert("Hello World");
}
func();
或者：
複製程式碼 程式碼如下:
// 使用函式的Lambda表示式定義函式，然後呼叫
var func = function() {
alert("你好，程式設計師");
};
func();
這兩段程式碼都會在瀏覽器中彈出一個對話方塊，顯示字串中的文字，這個就是函式呼叫。
可以發現函式呼叫很簡單，就是平時學習的一樣，這裡的關鍵是，在函式呼叫模式中，函式裡的 this 關鍵字指全域性物件，如果在瀏覽器中就是 window 物件。例如：
複製程式碼 程式碼如下:
var func = function() {
alert(this);
};
func();
此時，會彈出對話方塊，打印出 [object Window]。
二、方法呼叫模式
函式呼叫模式很簡單，是最基本的呼叫方式。但是同樣的是函式，將其賦值給一個物件的成員以後，就不一樣了。將函式賦值給物件的成員後，那麼這個就不在稱為函式，而應該叫做方法。例如：
複製程式碼 程式碼如下:
// 定義一個函式
var func = function() {
alert("我是一個函式麼?");
};
// 將其賦值給一個物件
var o = {};
= func; // 注意這裡不要加圓括號
// 呼叫
();
此時， 則是方法，不是函數了。實際上 fn 的方法體與 func 是一模一樣的，但是這裡有個微妙的不同。看下面的程式碼：
複製程式碼 程式碼如下:
// 接上面的程式碼
alert( === func);
列印結果是true，這個表明兩個函式是一樣的東西，但是修改一下函式的程式碼：
// 修改函式體
var func = function() {
alert(this);
};
var o = {};
= func;
// 比較
alert( === func);
// 呼叫
func();
();
這裡的執行結果是，兩個函式是相同的，因此列印結果是 true。但是由於兩個函式的呼叫是不一樣的，func 的呼叫，列印的是 [object Window]，而 的`列印結果是 [object Object]。
這裡便是函式呼叫與方法呼叫的區別，函式呼叫中，this 專指全域性物件 window，而在方法中 this 專指當前物件，即 中的 this 指的就是物件o。
三、構造器呼叫模式
同樣是函式，在單純的函式模式下，this 表示 window；在物件方法模式下，this 指的是當前物件。除了這兩種情況，JavaScript 中函式還可以是構造器。將函式作為構造器來使用的語法就是在函式呼叫前面加上一個 new 關鍵字。如程式碼：
複製程式碼 程式碼如下:
// 定義一個建構函式
var Person = function() {
= "程式設計師";
ello = function() {
alert("你好，這裡是" + );
};
};
// 呼叫構造器，建立物件
var p = new Person();
// 使用物件
ello();
上面的案例首先建立一個建構函式Person，然後使用建構函式建立物件p。這裡使用 new 語法。然後在使用物件呼叫sayHello()方法，這個使用建構函式建立物件的案例比較簡單。從案例可以看到，此時 this 指的是物件本身。除了上面簡單的使用以外，函式作為構造器還有幾個變化，分別為：
1、所有需要由物件使用的屬性，必須使用 this 引導；
2、函式的 return 語句意義被改寫，如果返回非物件，就返回this。
構造器中的 this
我們需要分析建立物件的過程，方能知道 this 的意義。如下面程式碼：
複製程式碼 程式碼如下:
var Person = function() {
= "程式設計師";
};
var p = new Person();
這裡首先定義了函式 Person，下面分析一下整個執行：
1、程式在執行到這一句的時候，不會執行函式體，因此 JavaScript 的直譯器並不知道這個函式的內容。
2、接下來執行 new 關鍵字，建立物件，直譯器開闢記憶體，得到物件的引用，將新物件的引用交給函式。
3、緊接著執行函式，將傳過來的物件引用交給 this。也就是說，在構造方法中，this 就是剛剛被 new 創建出來的物件。
4、然後為 this 新增成員，也就是為物件新增成員。
5、最後函式結束，返回 this，將 this 交給左邊的變數。
分析過建構函式的執行以後，可以得到，建構函式中的 this 就是當前物件。
構造器中的 return
在建構函式中 return 的意義發生了變化，首先如果在建構函式中，如果返回的是一個物件，那麼就保留原意。如果返回的是非物件，比如數字、布林和字串，那麼就返回 this，如果沒有 return 語句，那麼也返回 this，看下面程式碼：
複製程式碼 程式碼如下:
// 返回一個物件的 return
var ctr = function() {
= "趙曉虎";
return {
name:"牛亮亮"
};
};
// 建立物件
var p = new ctr();
// 訪問name屬性
alert();
執行程式碼，這裡列印的結果是”牛亮亮”。因為構造方法中返回的是一個物件，那麼保留 return 的意義，返回內容為 return 後面的物件，再看下面程式碼：
複製程式碼 程式碼如下:
// 定義返回非物件資料的構造器
var ctr = function() {
= "趙曉虎";
return "牛亮亮";
};
// 建立物件
var p = new ctr();
// 使用
alert(p);
alert();
程式碼執行結果是，先彈窗列印[object Object]，然後列印”趙曉虎”，因為這裡 return 的是一個字串，屬於基本型別，那麼這裡的 return 語句無效，返回的是 this 物件，因此第一個列印的是[object Object]而第二個不會列印 undefined。
四、apply呼叫模式
除了上述三種呼叫模式以外，函式作為物件還有 apply 方法與 call 方法可以使用，這便是第四種呼叫模式，我稱其為 apply 模式。
首先介紹 apply 模式，首先這裡 apply 模式既可以像函式一樣使用，也可以像方法一樣使用，可以說是一個靈活的使用方法。首先看看語法：函式名y(物件, 引數陣列);
這裡看語法比較晦澀，還是使用案例來說明：
1、新建兩個 js 檔案，分別為””與””;
2、新增程式碼
複製程式碼 程式碼如下:
// 檔案中
var func1 = function() {
= "程式設計師";
};
y(null);
alert(name);
// 檔案
var func2 = function() {
= "程式設計師";
};
var o = {};
y(o);
alert();
3、分別執行著兩段程式碼，可以發現第一個檔案中的 name 屬性已經載入到全域性物件 window 中； 而第二個檔案中的 name 屬性是在傳入的物件 o 中，即第一個相當於函式呼叫，第二個相當 於方法呼叫。
這裡的引數是方法本身所帶的引數，但是需要用陣列的形式儲存在，比如程式碼：
複製程式碼 程式碼如下:
// 一個數組的例子
var arr1 = [1,2,3,[4,5],[6,7,8]];
// 將其展開
var arr2 = y([], arr1);
然後介紹一下 call 模式，call 模式與 apply 模式最大的不同在於 call 中的引數不用陣列，看下面程式碼就清楚了：
// 定義方法
var func = function(name, age, sex) {
= name;
= age;
= sex;
};
// 建立物件
var o = {};
// 給物件新增成員
// apply 模式
var p1 = y(o, ["趙曉虎", 19, "男"]);
// call 模式
var p2 = (o, "趙曉虎", 19, "男");
上面的程式碼，apply 模式與 call 模式的結果是一樣的。
實際上，使用 apply 模式和 call 模式，可以任意的操作控制 this 的意義，在函式 js 的設 計模式中使用廣泛。簡單小結一下，js 中的函式呼叫有四種模式，分別是：函式式、方法式、構造 器式和 apply 式. 而這些模式中，this 的含義分別為：在函式中 this 是全域性物件 window，在方 法中 this 指當前物件，在建構函式中 this 是被建立的物件，在 apply 模式中 this 可以隨意的指定.。在 apply 模式中如果使用 null，就是函式模式，如果使用物件，就是方法模式。
五、綜合例子
下面通過一個案例結束本篇吧。案例說明：有一個div，id為dv，滑鼠移到上面去高度增大2倍，滑鼠離開恢復，下面直接上js程式碼：
複製程式碼 程式碼如下:
var dv = lementById("dv");
var height = parseInt(ht || etHeight);
var intervalId;
useover = function() {
// 停止已經在執行的動畫
clearInterval(intervalId);
// 得到目標高度
var toHeight = height * 2;
// 獲得當前物件
var that = this;
// 開器計時器，緩慢變化
intervalId = setInterval(function() {
// 得到現在的高度
var height = parseInt(ht || etHeight);
// 記錄每次需要變化的步長
var h = ((height - toHeight) / 10);
// 判斷變化，如果步長為0就停止計時器
if( h > 0 ) {
// 這裡為什麼要用that呢？思考一下吧
ht = (height + h) + "px";
} else {
clearInterval(intervalId);
}
}, 20);
};
useout = function() {
// 原理和之前一樣
clearInterval(intervalId);
var toHeight = height;
var that = this;
intervalId = setInterval(function() {
var height = parseInt(ht || etHeight);
var h = ((height - toHeight) / 10);
if( h > 0 ) {
ht = (height - h) + "px";
} else {
clearInterval(intervalId);
}
}, 20);
};
