JavaScript函數(shù)的4種調(diào)用方法詳解
在JavaScript中，函數(shù)是一等公民，函數(shù)在JavaScript中是一個(gè)數(shù)據(jù)類型，而非像C#或其他描述性語言那樣僅僅作為一個(gè)模塊來使用。函數(shù)有四種調(diào)用模式，分別是：函數(shù)調(diào)用形式、方法調(diào)用形式、構(gòu)造器形式、以及apply形式。這里所有的調(diào)用模式中，最主要的區(qū)別在于關(guān)鍵字 this 的意義，下面分別介紹這個(gè)幾種調(diào)用形式。
本文主要內(nèi)容：
1.分析函數(shù)的四種調(diào)用形式
2.弄清楚函數(shù)中this的意義
3.明確構(gòu)造函對(duì)象的過程
4.學(xué)會(huì)使用上下文調(diào)用函數(shù)
一、函數(shù)調(diào)用形式
函數(shù)調(diào)用形式是最常見的形式，也是最好理解的形式。所謂函數(shù)形式就是一般聲明函數(shù)后直接調(diào)用即是。例如：
// 聲明一個(gè)函數(shù)，并調(diào)用
function func() {
alert("Hello World");
}
func();
或者：
// 使用函數(shù)的Lambda表達(dá)式定義函數(shù)，然后調(diào)用
var func = function() {
alert("你好，程序員");
};
func();
這兩段代碼都會(huì)在瀏覽器中彈出一個(gè)對(duì)話框，顯示字符串中的文字，這個(gè)就是函數(shù)調(diào)用。
可以發(fā)現(xiàn)函數(shù)調(diào)用很簡單，就是平時(shí)學(xué)習(xí)的一樣，這里的關(guān)鍵是，在函數(shù)調(diào)用模式中，函數(shù)里的 this 關(guān)鍵字指全局對(duì)象，如果在瀏覽器中就是 window 對(duì)象。例如：
var func = function() {
alert(this);
};
func();
此時(shí)，會(huì)彈出對(duì)話框，打印出 [object Window]。
二、方法調(diào)用模式
函數(shù)調(diào)用模式很簡單，是最基本的調(diào)用方式。但是同樣的是函數(shù)，將其賦值給一個(gè)對(duì)象的成員以后，就不一樣了。將函數(shù)賦值給對(duì)象的成員后，那么這個(gè)就不在稱為函數(shù)，而應(yīng)該叫做方法。例如：
// 定義一個(gè)函數(shù)
var func = function() {
alert("我是一個(gè)函數(shù)么?");
};
// 將其賦值給一個(gè)對(duì)象
var o = {};
o.fn = func; // 注意這里不要加圓括號(hào)
// 調(diào)用
o.fn();
此時(shí)，o.fn 則是方法，不是函數(shù)了。實(shí)際上 fn 的方法體與 func 是一模一樣的，但是這里有個(gè)微妙的不同。看下面的代碼：
// 接上面的代碼
alert(o.fn === func);
打印結(jié)果是true，這個(gè)表明兩個(gè)函數(shù)是一樣的東西，但是修改一下函數(shù)的代碼：
// 修改函數(shù)體
var func = function() {
alert(this);
};
var o = {};
o.fn = func;
// 比較
alert(o.fn === func);
// 調(diào)用
func();
o.fn();
這里的運(yùn)行結(jié)果是，兩個(gè)函數(shù)是相同的，因此打印結(jié)果是 true。但是由于兩個(gè)函數(shù)的調(diào)用是不一樣的，func 的調(diào)用，打印的是 [object Window]，而 o.fn 的打印結(jié)果是 [object Object]。
這里便是函數(shù)調(diào)用與方法調(diào)用的區(qū)別，函數(shù)調(diào)用中，this 專指全局對(duì)象 window，而在方法中 this 專指當(dāng)前對(duì)象，即 o.fn 中的 this 指的就是對(duì)象o。
三、構(gòu)造器調(diào)用模式
同樣是函數(shù)，在單純的函數(shù)模式下，this 表示 window；在對(duì)象方法模式下，this 指的是當(dāng)前對(duì)象。除了這兩種情況，JavaScript 中函數(shù)還可以是構(gòu)造器。將函數(shù)作為構(gòu)造器來使用的語法就是在函數(shù)調(diào)用前面加上一個(gè) new 關(guān)鍵字。如代碼：
// 定義一個(gè)構(gòu)造函數(shù)
var Person = function() {
this.name = "程序員";
this.sayHello = function() {
alert("你好，這里是" + this.name);
};
};
// 調(diào)用構(gòu)造器，創(chuàng)建對(duì)象
var p = new Person();
// 使用對(duì)象
p.sayHello();
上面的案例首先創(chuàng)建一個(gè)構(gòu)造函數(shù)Person，然后使用構(gòu)造函數(shù)創(chuàng)建對(duì)象p。這里使用 new 語法。然后在使用對(duì)象調(diào)用sayHello()方法，這個(gè)使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的案例比較簡單。從案例可以看到，此時(shí) this 指的是對(duì)象本身。除了上面簡單的使用以外，函數(shù)作為構(gòu)造器還有幾個(gè)變化，分別為：
1、所有需要由對(duì)象使用的屬性，必須使用 this 引導(dǎo)；
2、函數(shù)的 return 語句意義被改寫，如果返回非對(duì)象，就返回this。
構(gòu)造器中的 this
我們需要分析創(chuàng)建對(duì)象的過程，方能知道 this 的意義。如下面代碼：
var Person = function() {
this.name = "程序員";
};
var p = new Person();
這里首先定義了函數(shù) Person，下面分析一下整個(gè)執(zhí)行：
1、程序在執(zhí)行到這一句的時(shí)候，不會(huì)執(zhí)行函數(shù)體，因此 JavaScript 的解釋器并不知道這個(gè)函數(shù)的內(nèi)容。
2、接下來執(zhí)行 new 關(guān)鍵字，創(chuàng)建對(duì)象，解釋器開辟內(nèi)存，得到對(duì)象的引用，將新對(duì)象的引用交給函數(shù)。
3、緊接著執(zhí)行函數(shù)，將傳過來的對(duì)象引用交給 this。也就是說，在構(gòu)造方法中，this 就是剛剛被 new 創(chuàng)建出來的對(duì)象。
4、然后為 this 添加成員，也就是為對(duì)象添加成員。
5、最后函數(shù)結(jié)束，返回 this，將 this 交給左邊的變量。
分析過構(gòu)造函數(shù)的執(zhí)行以后，可以得到，構(gòu)造函數(shù)中的 this 就是當(dāng)前對(duì)象。
構(gòu)造器中的 return
在構(gòu)造函數(shù)中 return 的意義發(fā)生了變化，首先如果在構(gòu)造函數(shù)中，如果返回的是一個(gè)對(duì)象，那么就保留原意。如果返回的是非對(duì)象，比如數(shù)字、布爾和字符串，那么就返回 this，如果沒有 return 語句，那么也返回 this，看下面代碼：
// 返回一個(gè)對(duì)象的 return
var ctr = function() {
this.name = "趙曉虎";
return {
name:"牛亮亮"
};
};
// 創(chuàng)建對(duì)象
var p = new ctr();
// 訪問name屬性
alert(p.name);
執(zhí)行代碼，這里打印的結(jié)果是”牛亮亮”。因?yàn)闃?gòu)造方法中返回的是一個(gè)對(duì)象，那么保留 return 的意義，返回內(nèi)容為 return 后面的對(duì)象，再看下面代碼：
// 定義返回非對(duì)象數(shù)據(jù)的構(gòu)造器
var ctr = function() {
this.name = "趙曉虎";
return "牛亮亮";
};
// 創(chuàng)建對(duì)象
var p = new ctr();
// 使用
alert(p);
alert(p.name);
代碼運(yùn)行結(jié)果是，先彈窗打印[object Object]，然后打印”趙曉虎”，因?yàn)檫@里 return 的是一個(gè)字符串，屬于基本類型，那么這里的 return 語句無效，返回的是 this 對(duì)象，因此第一個(gè)打印的是[object Object]而第二個(gè)不會(huì)打印 undefined。
四、apply調(diào)用模式
除了上述三種調(diào)用模式以外，函數(shù)作為對(duì)象還有 apply 方法與 call 方法可以使用，這便是第四種調(diào)用模式，我稱其為 apply 模式。
首先介紹 apply 模式，首先這里 apply 模式既可以像函數(shù)一樣使用，也可以像方法一樣使用，可以說是一個(gè)靈活的使用方法。首先看看語法：函數(shù)名.apply(對(duì)象, 參數(shù)數(shù)組);
這里看語法比較晦澀，還是使用案例來說明：
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、分別運(yùn)行著兩段代碼，可以發(fā)現(xiàn)第一個(gè)文件中的 name 屬性已經(jīng)加載到全局對(duì)象 window 中； 而第二個(gè)文件中的 name 屬性是在傳入的對(duì)象 o 中，即第一個(gè)相當(dāng)于函數(shù)調(diào)用，第二個(gè)相當(dāng) 于方法調(diào)用。
這里的參數(shù)是方法本身所帶的參數(shù)，但是需要用數(shù)組的形式存儲(chǔ)在，比如代碼：
// 一個(gè)數(shù)組的例子
var arr1 = [1,2,3,[4,5],[6,7,8]];
// 將其展開
var arr2 = arr1.conact.apply([], arr1);
然后介紹一下 call 模式，call 模式與 apply 模式最大的不同在于 call 中的參數(shù)不用數(shù)組，看下面代碼就清楚了：
// 定義方法
var func = function(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
// 創(chuàng)建對(duì)象
var o = {};
// 給對(duì)象添加成員
// apply 模式
var p1 = func.apply(o, ["趙曉虎", 19, "男"]);
// call 模式
var p2 = func.call(o, "趙曉虎", 19, "男");
上面的代碼，apply 模式與 call 模式的結(jié)果是一樣的。
實(shí)際上，使用 apply 模式和 call 模式，可以任意的操作控制 this 的意義，在函數(shù) js 的設(shè) 計(jì)模式中使用廣泛。簡單小結(jié)一下，js 中的函數(shù)調(diào)用有四種模式，分別是：函數(shù)式、方法式、構(gòu)造 器式和 apply 式. 而這些模式中，this 的含義分別為：在函數(shù)中 this 是全局對(duì)象 window，在方 法中 this 指當(dāng)前對(duì)象，在構(gòu)造函數(shù)中 this 是被創(chuàng)建的對(duì)象，在 apply 模式中 this 可以隨意的指定.。在 apply 模式中如果使用 null，就是函數(shù)模式，如果使用對(duì)象，就是方法模式。
五、綜合例子
下面通過一個(gè)案例結(jié)束本篇吧。案例說明：有一個(gè)div，id為dv，鼠標(biāo)移到上面去高度增大2倍，鼠標(biāo)離開恢復(fù)，下面直接上js代碼：
var dv = document.getElementById("dv");
var height = parseInt(dv.style.height || dv.offsetHeight);
var intervalId;
dv.onmouseover = function() {
// 停止已經(jīng)在執(zhí)行的動(dòng)畫
clearInterval(intervalId);
// 得到目標(biāo)高度
var toHeight = height * 2;
// 獲得當(dāng)前對(duì)象
var that = this;
// 開器計(jì)時(shí)器，緩慢變化
intervalId = setInterval(function() {
// 得到現(xiàn)在的高度
var height = parseInt(dv.style.height || dv.offsetHeight);
// 記錄每次需要變化的步長
var h = Math.ceil(Math.abs(height - toHeight) / 10);
// 判斷變化，如果步長為0就停止計(jì)時(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函數(shù)的調(diào)用以及參數(shù)傳遞
- 深入理解JavaScript函數(shù)參數(shù)(推薦)
- 超鏈接怎么正確調(diào)用javascript函數(shù)
- 改變javascript函數(shù)內(nèi)部this指針指向的三種方法
- 從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
- 用apply讓javascript函數(shù)僅執(zhí)行一次的代碼
- JavaScript函數(shù)之call、apply以及bind方法案例詳解
- JavaScript函數(shù)apply()和call()用法與異同分析
- 詳解JavaScript函數(shù)callee、call、apply的區(qū)別
- 玩轉(zhuǎn)JavaScript函數(shù)：apply/call/bind技巧
相關(guān)文章
JS時(shí)間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時(shí)間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼
這篇文章主要介紹了JS時(shí)間轉(zhuǎn)換標(biāo)準(zhǔn)格式、時(shí)間戳轉(zhuǎn)換標(biāo)準(zhǔn)格式的示例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
JavaScript通過正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證電話號(hào)碼
JavaScript判斷一個(gè)輸入量是否為電話號(hào)碼，通過正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
js使用數(shù)組判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)
判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)，在本文將為大家介紹使用數(shù)組做到這一點(diǎn)，感興趣的朋友可以參考下2013-11-11
HTML Table 空白單元格補(bǔ)全的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狧TML Table 空白單元格補(bǔ)全的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼
這篇文章主要介紹了創(chuàng)建echart多個(gè)聯(lián)動(dòng)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
在使用了母板頁面的項(xiàng)目中 使用js獲取其中的標(biāo)簽id 需要先加載到本地看看他在瀏覽時(shí)候的頁面源代碼然后確定他的id2010-04-04
比較不錯(cuò)的函數(shù)式JavaScript編程指南教程
你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語言呢？本指南將教你如何利用JavaScript的函數(shù)式特性。2008-05-05
js驗(yàn)證手機(jī)號(hào)、密碼、短信驗(yàn)證碼代碼工具類
這篇文章主要介紹了js驗(yàn)證手機(jī)號(hào)、密碼、短信驗(yàn)證碼代碼工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)
目前，常用的瀏覽器IE、Chrome、Firefox都有相應(yīng)的腳本調(diào)試功能下面我就介紹如何在瀏覽器/VS中調(diào)試我們的JS代碼,感興趣的你可不要走開啊，希望本文對(duì)你有所幫助2013-01-01
CodeMirror2 IE7/IE8 下面未知運(yùn)行時(shí)錯(cuò)誤的解決方法
最近用CodeMirror2作后臺(tái)的模板編輯器，在IE9、Firefox下面沒有問題。到了IE7、IE8下面，textarea里面的代碼就顯示不出來了。搜索了好多，終于找到原因2012-03-03