- 相關(guān)推薦
JavaScript的課堂講解
本文主要內容：
1.分析函數的四種調用形式
2.弄清楚函數中this的意義
3.明確構造函對象的過(guò)程
4.學(xué)會(huì )使用上下文調用函數
一、函數調用形式
函數調用形式是最常見(jiàn)的形式，也是最好理解的形式。所謂函數形式就是一般聲明函數后直接調用即是。例如：
復制代碼 代碼如下:
// 聲明一個(gè)函數，并調用
function func() {
alert("Hello World");
}
func();
或者：
復制代碼 代碼如下:
// 使用函數的Lambda表達式定義函數，然后調用
var func = function() {
alert("你好，程序員");
};
func();
這兩段代碼都會(huì )在瀏覽器中彈出一個(gè)對話(huà)框，顯示字符串中的文字，這個(gè)就是函數調用。
可以發(fā)現函數調用很簡(jiǎn)單，就是平時(shí)學(xué)習的一樣，這里的關(guān)鍵是，在函數調用模式中，函數里的 this 關(guān)鍵字指全局對象，如果在瀏覽器中就是 window 對象。例如：
復制代碼 代碼如下:
var func = function() {
alert(this);
};
func();
此時(shí)，會(huì )彈出對話(huà)框，打印出 [object Window]。
二、方法調用模式
函數調用模式很簡(jiǎn)單，是最基本的調用方式。但是同樣的是函數，將其賦值給一個(gè)對象的成員以后，就不一樣了。將函數賦值給對象的成員后，那么這個(gè)就不在稱(chēng)為函數，而應該叫做方法。例如：
復制代碼 代碼如下:
// 定義一個(gè)函數
var func = function() {
alert("我是一個(gè)函數么?");
};
// 將其賦值給一個(gè)對象
var o = {};
o.fn = func; // 注意這里不要加圓括號
// 調用
o.fn();
此時(shí)，o.fn 則是方法，不是函數了。實(shí)際上 fn 的方法體與 func 是一模一樣的，但是這里有個(gè)微妙的不同�？聪旅娴拇a：
復制代碼 代碼如下:
// 接上面的代碼
alert(o.fn === func);
打印結果是true，這個(gè)表明兩個(gè)函數是一樣的東西，但是修改一下函數的代碼：
// 修改函數體
var func = function() {
alert(this);
};
var o = {};
o.fn = func;
// 比較
alert(o.fn === func);
// 調用
func();
o.fn();
這里的運行結果是，兩個(gè)函數是相同的，因此打印結果是 true。但是由于兩個(gè)函數的調用是不一樣的，func 的調用，打印的是 [object Window]，而 o.fn 的打印結果是 [object Object]。
這里便是函數調用與方法調用的區別，函數調用中，this 專(zhuān)指全局對象 window，而在方法中 this 專(zhuān)指當前對象，即 o.fn 中的 this 指的就是對象o。
三、構造器調用模式
同樣是函數，在單純的函數模式下，this 表示 window；在對象方法模式下，this 指的是當前對象。除了這兩種情況，JavaScript 中函數還可以是構造器。將函數作為構造器來(lái)使用的語(yǔ)法就是在函數調用前面加上一個(gè) new 關(guān)鍵字。如代碼：
復制代碼 代碼如下:
// 定義一個(gè)構造函數
var Person = function() {
this.name = "程序員";
this.sayHello = function() {
alert("你好，這里是" + this.name);
};
};
// 調用構造器，創(chuàng )建對象
var p = new Person();
// 使用對象
p.sayHello();
上面的案例首先創(chuàng )建一個(gè)構造函數Person，然后使用構造函數創(chuàng )建對象p。這里使用 new 語(yǔ)法。然后在使用對象調用sayHello()方法，這個(gè)使用構造函數創(chuàng )建對象的案例比較簡(jiǎn)單。從案例可以看到，此時(shí) this 指的是對象本身。除了上面簡(jiǎn)單的使用以外，函數作為構造器還有幾個(gè)變化，分別為：
1、所有需要由對象使用的屬性，必須使用 this 引導；
2、函數的 return 語(yǔ)句意義被改寫(xiě)，如果返回非對象，就返回this。
構造器中的 this
我們需要分析創(chuàng )建對象的過(guò)程，方能知道 this 的意義。如下面代碼：
復制代碼 代碼如下:
var Person = function() {
this.name = "程序員";
};
var p = new Person();
這里首先定義了函數 Person，下面分析一下整個(gè)執行：
1、程序在執行到這一句的時(shí)候，不會(huì )執行函數體，因此 JavaScript 的解釋器并不知道這個(gè)函數的內容。
2、接下來(lái)執行 new 關(guān)鍵字，創(chuàng )建對象，解釋器開(kāi)辟內存，得到對象的引用，將新對象的引用交給函數。
3、緊接著(zhù)執行函數，將傳過(guò)來(lái)的對象引用交給 this。也就是說(shuō)，在構造方法中，this 就是剛剛被 new 創(chuàng )建出來(lái)的對象。
4、然后為 this 添加成員，也就是為對象添加成員。
5、最后函數結束，返回 this，將 this 交給左邊的變量。
分析過(guò)構造函數的執行以后，可以得到，構造函數中的 this 就是當前對象。
構造器中的 return
在構造函數中 return 的意義發(fā)生了變化，首先如果在構造函數中，如果返回的是一個(gè)對象，那么就保留原意。如果返回的是非對象，比如數字、布爾和字符串，那么就返回 this，如果沒(méi)有 return 語(yǔ)句，那么也返回 this，看下面代碼：
復制代碼 代碼如下:
// 返回一個(gè)對象的 return
var ctr = function() {
this.name = "趙曉虎";
return {
name:"牛亮亮"
};
};
// 創(chuàng )建對象
var p = new ctr();
// 訪(fǎng)問(wèn)name屬性
alert(p.name);
執行代碼，這里打印的結果是”牛亮亮”。因為構造方法中返回的是一個(gè)對象，那么保留 return 的意義，返回內容為 return 后面的對象，再看下面代碼：
復制代碼 代碼如下:
// 定義返回非對象數據的構造器
var ctr = function() {
this.name = "趙曉虎";
return "牛亮亮";
};
// 創(chuàng )建對象
var p = new ctr();
// 使用
alert(p);
alert(p.name);
代碼運行結果是，先彈窗打印[object Object]，然后打印”趙曉虎”，因為這里 return 的是一個(gè)字符串，屬于基本類(lèi)型，那么這里的 return 語(yǔ)句無(wú)效，返回的是 this 對象，因此第一個(gè)打印的是[object Object]而第二個(gè)不會(huì )打印 undefined。
四、apply調用模式
除了上述三種調用模式以外，函數作為對象還有 apply 方法與 call 方法可以使用，這便是第四種調用模式，我稱(chēng)其為 apply 模式。
首先介紹 apply 模式，首先這里 apply 模式既可以像函數一樣使用，也可以像方法一樣使用，可以說(shuō)是一個(gè)靈活的使用方法。首先看看語(yǔ)法：函數名.apply(對象, 參數數組);
這里看語(yǔ)法比較晦澀，還是使用案例來(lái)說(shuō)明：
1、新建兩個(gè) js 文件，分別為”js1.js”與”js2.js”;
2、添加代碼
復制代碼 代碼如下:
// js1.js 文件中
var func1 = function() {
this.name = "程序員";
};
func1.apply(null);
alert(name);
// js2.js 文件
var func2 = function() {
this.name = "程序員";
};
var o = {};
func2.apply(o);
alert(o.name);
3、分別運行著(zhù)兩段代碼，可以發(fā)現第一個(gè)文件中的 name 屬性已經(jīng)加載到全局對象 window 中； 而第二個(gè)文件中的 name 屬性是在傳入的對象 o 中，即第一個(gè)相當于函數調用，第二個(gè)相當 于方法調用。
這里的參數是方法本身所帶的參數，但是需要用數組的形式存儲在，比如代碼：
復制代碼 代碼如下:
// 一個(gè)數組的例子
var arr1 = [1,2,3,[4,5],[6,7,8]];
// 將其展開(kāi)
var arr2 = arr1.conact.apply([], arr1);
然后介紹一下 call 模式，call 模式與 apply 模式最大的不同在于 call 中的參數不用數組，看下面代碼就清楚了：
// 定義方法
var func = function(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
// 創(chuàng )建對象
var o = {};
// 給對象添加成員
// apply 模式
var p1 = func.apply(o, ["趙曉虎", 19, "男"]);
// call 模式
var p2 = func.call(o, "趙曉虎", 19, "男");
上面的代碼，apply 模式與 call 模式的結果是一樣的。
實(shí)際上，使用 apply 模式和 call 模式，可以任意的操作控制 this 的意義，在函數 js 的設 計模式中使用廣泛。簡(jiǎn)單小結一下，js 中的函數調用有四種模式，分別是：函數式、方法式、構造 器式和 apply 式. 而這些模式中，this 的含義分別為：在函數中 this 是全局對象 window，在方 法中 this 指當前對象，在構造函數中 this 是被創(chuàng )建的對象，在 apply 模式中 this 可以隨意的指定.。在 apply 模式中如果使用 null，就是函數模式，如果使用對象，就是方法模式。
五、綜合例子
下面通過(guò)一個(gè)案例結束本篇吧。案例說(shuō)明：有一個(gè)div，id為dv，鼠標移到上面去高度增大2倍，鼠標離開(kāi)恢復，下面直接上js代碼：
復制代碼 代碼如下:
var dv = document.getElementById("dv");
var height = parseInt(dv.style.height || dv.offsetHeight);
var intervalId;
dv.onmouseover = function() {
// 停止已經(jīng)在執行的動(dòng)畫(huà)
clearInterval(intervalId);
// 得到目標高度
var toHeight = height * 2;
// 獲得當前對象
var that = this;
// 開(kāi)器計時(shí)器，緩慢變化
intervalId = setInterval(function() {
// 得到現在的高度
var height = parseInt(dv.style.height || dv.offsetHeight);
// 記錄每次需要變化的步長(cháng)
var h = Math.ceil(Math.abs(height - toHeight) / 10);
// 判斷變化，如果步長(cháng)為0就停止計時(shí)器
if( h > 0 ) {
// 這里為什么要用that呢？思考一下吧
that.style.height = (height + h) + "px";
} else {
clearInterval(intervalId);
}
}, 20);
};
dv.onmouseout = function() {
// 原理和之前一樣
clearInterval(intervalId);
var toHeight = height;
var that = this;
intervalId = setInterval(function() {
var height = parseInt(dv.style.height || dv.offsetHeight);
var h = Math.ceil(Math.abs(height - toHeight) / 10);
if( h > 0 ) {
that.style.height = (height - h) + "px";
} else {
clearInterval(intervalId);
}
}, 20);
};
【JavaScript的課堂講解】相關(guān)文章：
對javascript的理解03-29
JavaScript 基礎教學(xué)04-01
JavaScript學(xué)習筆記03-30
常用的JavaScript模式03-10
Javascript的this用法簡(jiǎn)述03-25
JavaScript常用方法匯總03-08
javascript編程異常處理的方法03-31
javascript克隆對象深度介紹03-31