JavaScript 函數(shù)調(diào)用

JavaScript 函數(shù)有 4 種調(diào)用方式。

每種方式的不同方式在于 this 的初始化。

this 關(guān)鍵字

一般而言，在Javascript中，this指向函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象。

	注意 this 是保留關(guān)鍵字，你不能修改 this 的值。

調(diào)用 JavaScript 函數(shù)

我們知道如何創(chuàng)建函數(shù)。

函數(shù)中的代碼在函數(shù)被調(diào)用后執(zhí)行。

作為一個(gè)函數(shù)調(diào)用

實(shí)例

function myFunction(a, b) {

return a * b;

}

myFunction(10, 2); // myFunction(10, 2) 返回 20

以上函數(shù)不屬于任何對(duì)象。但是在 JavaScript 中它始終是默認(rèn)的全局對(duì)象。

在 HTML 中默認(rèn)的全局對(duì)象是 HTML 頁(yè)面本身，所以函數(shù)是屬于 HTML 頁(yè)面。

在瀏覽器中的頁(yè)面對(duì)象是瀏覽器窗口(window 對(duì)象)。以上函數(shù)會(huì)自動(dòng)變?yōu)?window 對(duì)象的函數(shù)。

myFunction() 和 window.myFunction() 是一樣的：

實(shí)例

function myFunction(a, b) {

return a * b;

}

window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20

	這是調(diào)用 JavaScript 函數(shù)常用的方法，但不是良好的編程習(xí)慣全局變量，方法或函數(shù)容易造成命名沖突的bug。

全局對(duì)象

當(dāng)函數(shù)沒(méi)有被自身的對(duì)象調(diào)用時(shí)， this 的值就會(huì)變成全局對(duì)象。

在 web 瀏覽器中全局對(duì)象是瀏覽器窗口（window 對(duì)象）。

該實(shí)例返回 this 的值是 window 對(duì)象:

實(shí)例

function myFunction() {

return this;

}

myFunction(); // 返回 window 對(duì)象

	函數(shù)作為全局對(duì)象調(diào)用，會(huì)使 this 的值成為全局對(duì)象。使用 window 對(duì)象作為一個(gè)變量容易造成程序崩潰。

函數(shù)作為方法調(diào)用

在 JavaScript 中你可以將函數(shù)定義為對(duì)象的方法。

以下實(shí)例創(chuàng)建了一個(gè)對(duì)象 (myObject), 對(duì)象有兩個(gè)屬性 (firstName 和 lastName), 及一個(gè)方法 (fullName):

實(shí)例

var myObject = {

firstName:"John",

lastName: "Doe",

fullName: function () {

return this.firstName + " " + this.lastName;

}

myObject.fullName(); // 返回 "John Doe"

fullName 方法是一個(gè)函數(shù)。函數(shù)屬于對(duì)象。 myObject 是函數(shù)的所有者。

this對(duì)象，擁有 JavaScript 代碼。實(shí)例中 this 的值為 myObject 對(duì)象。

測(cè)試以下！修改 fullName 方法并返回 this 值:

實(shí)例

var myObject = {

firstName:"John",

lastName: "Doe",

fullName: function () {

return this;

}

myObject.fullName(); // 返回 [object Object] (所有者對(duì)象)

	函數(shù)作為對(duì)象方法調(diào)用，會(huì)使得 this 的值成為對(duì)象本身。

使用構(gòu)造函數(shù)調(diào)用函數(shù)

如果函數(shù)調(diào)用前使用了 new 關(guān)鍵字, 則是調(diào)用了構(gòu)造函數(shù)。

這看起來(lái)就像創(chuàng)建了新的函數(shù)，但實(shí)際上 JavaScript 函數(shù)是重新創(chuàng)建的對(duì)象：

實(shí)例

// 構(gòu)造函數(shù):

function myFunction(arg1, arg2) {

this.firstName = arg1;

this.lastName = arg2;

}

// Thiscreates a new object

var x = new myFunction("John","Doe");

x.firstName; // 返回 "John"

構(gòu)造函數(shù)的調(diào)用會(huì)創(chuàng)建一個(gè)新的對(duì)象。新對(duì)象會(huì)繼承構(gòu)造函數(shù)的屬性和方法。

	構(gòu)造函數(shù)中 this 關(guān)鍵字沒(méi)有任何的值。this 的值在函數(shù)調(diào)用時(shí)實(shí)例化對(duì)象(new object)時(shí)創(chuàng)建。

作為函數(shù)方法調(diào)用函數(shù)

在 JavaScript 中, 函數(shù)是對(duì)象。JavaScript 函數(shù)有它的屬性和方法。

call() 和 apply() 是預(yù)定義的函數(shù)方法。兩個(gè)方法可用于調(diào)用函數(shù)，兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。

實(shí)例

function myFunction(a, b) {

return a * b;

}

myFunction.call(myObject, 10, 2); // 返回 20

實(shí)例

function myFunction(a, b) {

return a * b;

}

myArray = [10,2];

myFunction.apply(myObject, myArray); // 返回 20

兩個(gè)方法都使用了對(duì)象本身作為第一個(gè)參數(shù)。兩者的區(qū)別在于第二個(gè)參數(shù)： apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個(gè)參數(shù)開(kāi)始）。

在 JavaScript 嚴(yán)格模式(strict mode)下, 在調(diào)用函數(shù)時(shí)第一個(gè)參數(shù)會(huì)成為 this 的值，即使該參數(shù)不是一個(gè)對(duì)象。

在 JavaScript 非嚴(yán)格模式(non-strict mode)下, 如果第一個(gè)參數(shù)的值是 null 或 undefined, 它將使用全局對(duì)象替代。

	通過(guò) call() 或 apply() 方法你可以設(shè)置 this 的值, 且作為已存在對(duì)象的新方法調(diào)用。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

文實(shí)例講述了JavaScript函數(shù)的4種調(diào)用方法。分享給大家供大家參考，具體如下：

JavaScript 函數(shù)有 4 種調(diào)用方式：

作為一個(gè)函數(shù)調(diào)用
函數(shù)作為方法調(diào)用
使用構(gòu)造函數(shù)調(diào)用函數(shù)
作為函數(shù)方法調(diào)用函數(shù)

分述如下：

每種方式的不同方式在于 this 的初始化。

作為一個(gè)函數(shù)調(diào)用

function myFunction(a, b) {
 return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20

以上函數(shù)不屬于任何對(duì)象。但是在 JavaScript 中它始終是默認(rèn)的全局對(duì)象。

在 HTML 中默認(rèn)的全局對(duì)象是 HTML 頁(yè)面本身，所以函數(shù)是屬于 HTML 頁(yè)面。

在瀏覽器中的頁(yè)面對(duì)象是瀏覽器窗口(window 對(duì)象)。以上函數(shù)會(huì)自動(dòng)變?yōu)?window 對(duì)象的函數(shù)。

myFunction() 和 window.myFunction() 是一樣的：

function myFunction(a, b) {
 return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20

當(dāng)函數(shù)沒(méi)有被自身的對(duì)象調(diào)用時(shí)， this 的值就會(huì)變成全局對(duì)象。

在 web 瀏覽器中全局對(duì)象是瀏覽器窗口（window 對(duì)象）。

該實(shí)例返回 this 的值是 window 對(duì)象:

function myFunction() {
 return this;
}
myFunction(); // 返回 window 對(duì)象

函數(shù)作為全局對(duì)象調(diào)用，會(huì)使 this 的值成為全局對(duì)象。

使用 window 對(duì)象作為一個(gè)變量容易造成程序崩潰。

函數(shù)作為方法調(diào)用

var myObject = {
 firstName:"John",
 lastName: "Doe",
 fullName: function () {
 return this.firstName + " " + this.lastName;
 }
}
myObject.fullName(); // 返回 "John Doe"

fullName 方法是一個(gè)函數(shù)。函數(shù)屬于對(duì)象。 myObject 是函數(shù)的所有者。

this對(duì)象，擁有 JavaScript 代碼。實(shí)例中 this 的值為 myObject 對(duì)象。

測(cè)試以下！修改 fullName 方法并返回 this 值:

var myObject = {
 firstName:"John",
 lastName: "Doe",
 fullName: function () {
 return this;
 }
}
myObject.fullName(); // 返回 [object Object] (所有者對(duì)象)

函數(shù)作為對(duì)象方法調(diào)用，會(huì)使得 this 的值成為對(duì)象本身。

使用構(gòu)造函數(shù)調(diào)用函數(shù)

如果函數(shù)調(diào)用前使用了 new 關(guān)鍵字, 則是調(diào)用了構(gòu)造函數(shù)。

這看起來(lái)就像創(chuàng)建了新的函數(shù)，但實(shí)際上 JavaScript 函數(shù)是重新創(chuàng)建的對(duì)象：

// 構(gòu)造函數(shù):
function myFunction(arg1, arg2) {
 this.firstName = arg1;
 this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"

構(gòu)造函數(shù)的調(diào)用會(huì)創(chuàng)建一個(gè)新的對(duì)象。新對(duì)象會(huì)繼承構(gòu)造函數(shù)的屬性和方法。

構(gòu)造函數(shù)中 this 關(guān)鍵字沒(méi)有任何的值。

this 的值在函數(shù)調(diào)用時(shí)實(shí)例化對(duì)象(new object)時(shí)創(chuàng)建。

作為函數(shù)方法調(diào)用函數(shù)

在 JavaScript 中, 函數(shù)是對(duì)象。JavaScript 函數(shù)有它的屬性和方法。

call() 和 apply() 是預(yù)定義的函數(shù)方法。兩個(gè)方法可用于調(diào)用函數(shù)，兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。

function myFunction(a, b) {
 return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
function myFunction(a, b) {
 return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20

在 JavaScript 嚴(yán)格模式(strict mode)下, 在調(diào)用函數(shù)時(shí)第一個(gè)參數(shù)會(huì)成為 this 的值，即使該參數(shù)不是一個(gè)對(duì)象。

在 JavaScript 非嚴(yán)格模式(non-strict mode)下, 如果第一個(gè)參數(shù)的值是 null 或 undefined, 它將使用全局對(duì)象替代。

最后

以下是總結(jié)出來(lái)最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學(xué)習(xí)資料。

【領(lǐng)取方式】

關(guān)注頭條前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶(hù)可私信關(guān)鍵詞【前端】即可獲取全棧工程師路線和學(xué)習(xí)資料！

:常規(guī)寫(xiě)法

//函數(shù)的寫(xiě)法

function run{

alert("常規(guī)寫(xiě)法") //這里是你函數(shù)的內(nèi)容

}

//調(diào)用

run()

2:匿名函數(shù)寫(xiě)法

var run = function(){

alert("這是一種聲明函數(shù)的寫(xiě)法,左邊是一個(gè)變量,右邊是一個(gè)函數(shù)的表達(dá)式,

　　意思就是把一個(gè)匿名函數(shù)的表達(dá)式賦值給了一個(gè)變量myrun,只是聲明了一個(gè)變量指向了一個(gè)函數(shù)對(duì)象")//這里是你函數(shù)的內(nèi)容

}

run()

3:將方法作為一個(gè)對(duì)象

//作為對(duì)象方法,函數(shù)寫(xiě)法,這里創(chuàng)建了兩個(gè)函數(shù)外面用{}包裹起來(lái)

var Text = {

run1 : function(){

alert("這個(gè)必須放在一個(gè)對(duì)象內(nèi)部,放在外邊會(huì)出錯(cuò)")//這里是函數(shù)內(nèi)容

run2 : function(){

alert("這個(gè)必須放在一個(gè)對(duì)象內(nèi)部,放在外邊會(huì)出錯(cuò)")//這里是函數(shù)內(nèi)容

}

Text.run1()//調(diào)用第一個(gè)函數(shù)

Text.run2()//調(diào)用第二個(gè)函數(shù)

4:構(gòu)造函數(shù)中給對(duì)象添加方法

javascript中的每個(gè)對(duì)象都有prototype屬性，Javascript中對(duì)象的prototype屬性的解釋是：返回對(duì)象類(lèi)型原型的引用。

// 給對(duì)象添加方法

var funName = function(){};

funName.prototype.way = function(){

alert('這是在funName函數(shù)上的原始對(duì)象上加了一個(gè)way方法，構(gòu)造函數(shù)中用到');

}

// 調(diào)用

var funname = new text();// 創(chuàng)建對(duì)象

funname.way();//調(diào)用對(duì)象屬性

5:自執(zhí)行函數(shù)

js自執(zhí)行函數(shù)查到了幾種不同寫(xiě)法

//方法1：最前最后加括號(hào)

(

function(){alert(1);}()

);

/*這是jslint推薦的寫(xiě)法，好處是，能提醒閱讀代碼的人，這段代碼是一個(gè)整體。

例如，在有語(yǔ)法高亮匹配功能的編輯器里，光標(biāo)在第一個(gè)左括號(hào)后時(shí)，最后一個(gè)右括號(hào)也會(huì)高亮，看代碼的人一眼就可以看到這個(gè)整體。 */

//方法2：function外面加括號(hào)

(function(){alert(1);})();

//這種做法比方法1少了一個(gè)代碼整體性的好處。

//方法3：function前面加運(yùn)算符，常見(jiàn)的是!與void 。

!function(){alert(1);}();

void function(){alert(2);}();

在線咨詢(xún)

上一篇：JavaScript 也可以搞定嵌入式開(kāi)發(fā)？ - 硬創(chuàng)公開(kāi)課
下一篇：JQuery中html()與text()方法的區(qū)別

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript 函數(shù)調(diào)用

最后

【領(lǐng)取方式】

關(guān)注頭條 前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶(hù)可私信關(guān)鍵詞 【前端】即可獲取全棧工程師路線和學(xué)習(xí)資料！

:常規(guī)寫(xiě)法

2:匿名函數(shù)寫(xiě)法

3:將方法作為一個(gè)對(duì)象

4:構(gòu)造函數(shù)中給對(duì)象添加方法

5:自執(zhí)行函數(shù)

您的項(xiàng)目需求

關(guān)注頭條前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶(hù)可私信關(guān)鍵詞【前端】即可獲取全棧工程師路線和學(xué)習(xí)資料！