當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

菜鸟教程之 JavaScript 函数(function)

發布時間：2024/7/23 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了菜鸟教程之 JavaScript 函数(function) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

From：https://www.runoob.com/js/js-function-definition.html

JavaScript?函數定義

JavaScript 使用關鍵字?function?定義函數。

函數可以 通過聲明定義，
函數也可以 是一個表達式。

函數聲明

分號是用來分隔可執行 JavaScript 語句。

由于函數聲明不是一個可執行語句，所以不以分號結束。

函數聲明的語法：

function functionName(parameters) {// 執行的代碼 }

示例：

// 函數聲明和定義 function myFunction(a, b) {return a * b; }var result = myFunction(10, 20); // 函數調用 console.log(result);

函數表達式

JavaScript 函數可以通過一個表達式定義。

函數表達式可以存儲在變量中：

var x = function (a, b) {return a * b};

在函數表達式存儲在變量后，變量也可作為一個函數使用：

var x = function (a, b) {return a * b}; var z = x(4, 3); // 以分號結尾，因為它是一個執行語句。

匿名函數

以上函數實際上是一個?匿名函數?( 函數沒有名稱 )。

函數存儲在變量中，不需要函數名稱，通常通過變量名來調用。

Function() 構造函數

在 JavaScript 中，很多時候，你需要避免使用 new 關鍵字。?

在以上實例中，我們了解到函數通過關鍵字?function?定義。

函數同樣可以通過內置的 JavaScript 函數構造器（Function()）定義。

var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3);

實際上，你不必使用構造函數。上面實例可以寫成：

var myFunction = function (a, b) {return a * b}; var x = myFunction(4, 3);

函數提升（Hoisting）

在之前的教程中我們已經了解了 "hoisting(提升)"。

提升（Hoisting）是 JavaScript 默認將當前作用域提升到前面去的的行為。
提升（Hoisting）應用在：變量的聲明 與 函數的聲明。

因此，函數可以在聲明之前調用：

myFunction(5);function myFunction(y) {return y * y; }

使用 表達式定義函數 時無法提升。

自調用函數

函數表達式 ( 即 匿名函數?)?可以 "自調用"。
自調用表達式 會 自動調用自己。
如果 函數表達式 后面緊跟 ()? 同時加上分號，則會自動調用。
聲明的函數 不能 自調用（即不能自動調用自己）。

語法：( 函數表達式，即匿名函數 ) ( )；? // 最后的分號不能少，表示是一個語句

(function () {var x = "Hello!!"; // 我將調用自己 })();

以上函數實際上是一個?匿名自我調用的函數?(沒有函數名)。

函數可作為一個值使用

JavaScript 函數作為一個值使用：

function myFunction(a, b) {return a * b; }var x = myFunction(4, 3);

JavaScript 函數可作為表達式使用：

function myFunction(a, b) {return a * b; }var x = myFunction(4, 3) * 2;

函數是對象

在 JavaScript 中使用?typeof?操作符判斷函數類型將返回 "function" 。
但是把 JavaScript 函數描述為一個對象更加準確。
JavaScript 函數有?屬性?和?方法。
arguments.length 屬性返回函數調用過程接收到的參數個數：

function myFunction(a, b) {return arguments.length; }

toString() 方法將函數作為一個字符串返回：

function myFunction(a, b) {return a * b; }var txt = myFunction.toString(); console.log(txt); /* 輸出結果: function myFunction(a, b) {return a * b; } * */

注意函數和方法的區別：

函數：不屬于對象的函數，即普通函數，叫做函數
方法：如果一個函數屬于對象，則這個函數叫做方法

箭頭函數

ES6 新增了箭頭函數。

箭頭函數表達式的語法比普通函數表達式更簡潔。

(參數1, 參數2, …, 參數N) => { 函數聲明 }(參數1, 參數2, …, 參數N) => 表達式(單一) // 相當于：(參數1, 參數2, …, 參數N) =>{ return 表達式; }

當只有一個參數時，圓括號是可選的：

(單一參數) => {函數聲明} 單一參數 => {函數聲明}

沒有參數的函數應該寫成一對圓括號：

() => {函數聲明}

示例：

// ES5 var x = function(x, y) {return x * y; }// ES6 const x = (x, y) => x * y;

有的箭頭函數都沒有自己的?this。不適合定義一個?對象的方法。

當我們使用箭頭函數的時候，箭頭函數會默認幫我們綁定外層 this 的值，所以在箭頭函數中 this 的值和外層的 this 是一樣的。

箭頭函數是不能提升的，所以需要在使用之前定義。

使用?const?比使用?var?更安全，因為 函數表達式始終是一個常量。

如果函數部分只是一個語句，則可以省略 return 關鍵字和大括號 {}，這樣做是一個比較好的習慣:

const x = (x, y) => { return x * y }; console.log(x(5, 5));

JavaScript?函數參數

JavaScript 函數對參數的值沒有進行任何的檢查。

函數顯式參數（形參?）：在函數定義時列出。
函數隱式參數（實參）：在函數調用時傳遞給函數真正的值。

函數顯式參數(Parameters)與隱式參數(Arguments)

在先前的教程中，我們已經學習了函數的顯式參數:

function funcName(parameter1, parameter2, parameter3) {// 要執行的代碼…… }

參數規則

形參：JavaScript 函數定義顯式參數 ( 形參 )?時 不指定數據類型。（即不指定?形參的數據類型，啥類型都可以?）
實參：JavaScript 函數對隱式參數（實參） 不進行類型檢測。（即?不檢測?實參?的數據類型，想傳遞什么類型就傳遞什么類型）
參數個數：JavaScript 函數對隱式參數（實參）的個數不進行檢測。（即不檢查傳遞的?實參個數，想傳遞多少個實參都可以。??）

默認參數

ES5中，如果函數在調用時未提供隱式參數，參數會默認設置為：?undefined

有時這是可以接受的，但是建議最好為參數設置一個默認值：

function myFunction(x, y) {if (y === undefined) {y = 0;} }

或者，更簡單的方式：（?如果 y 已經定義， y || 返回 y，?因為 y 是 true，?否則返回 0，?因為 undefined 為 false。）

function myFunction(x, y) {y = y || 0; }

如果函數調用時設置了過多的參數，參數將無法被引用，因為無法找到對應的參數名。只能使用 arguments 對象來調用。

ES6 函數可以自帶參數

ES6 支持函數帶有默認參數，就判斷 undefined 和 || 的操作：

function myFunction(x, y = 10) {// y is 10 if not passed or undefinedreturn x + y; }myFunction(0, 2) // 輸出 2 myFunction(5); // 輸出 15, y 參數的默認值

arguments 對象

JavaScript 函數有個內置的對象 arguments 對象。argument 對象包含了函數調用的參數數組。通過這種方式你可以很方便的找到最大的一個參數的值：

x = findMax(1, 123, 500, 115, 44, 88);function findMax() {var i, max = arguments[0];if (arguments.length < 2) return max;for (i = 0; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max; }x = findMax(1, 123, 500, 115, 44, 88); console.log(x)

或者創建一個函數用來統計所有數值的和：

x = sumAll(1, 123, 500, 115, 44, 88);function sumAll() {var i, sum = 0;for (i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum; } console.log(x)

參數的值傳遞

調用函數時，傳遞給函數的參數叫做實參，即?隱式參數

JavaScript 隱式參數通過值來傳遞：函數僅僅只是獲取值。

如果函數修改參數的值，不會修改顯式參數的初始值（在函數外定義）。

隱式參數的改變在函數外是不可見的。

參數的?對象傳遞

在JavaScript中，可以引用對象的值。

因此我們在函數內部修改對象的屬性就會修改其初始的值。

修改對象屬性可作用于函數外部（全局變量）。

修改對象屬性在函數外是可見的。

示例：

var person = {'name': 'king','age': 100,'sex': '男' } console.log("111111111111111111111111111") console.log(person) function myFunction(argPerson) {argPerson.name = '皇帝';argPerson.age = 123;console.log("22222222222222222222222222222")console.log(argPerson); } myFunction(person); console.log("33333333333333333333333333333") console.log(person);

JavaScript?函數調用

函數調用就是執行函數中的代碼。

JavaScript 函數有 4 種調用方式。每種方式的不同在于?this?的初始化。

this?關鍵字

一般而言，在 Javascript 中，this 指向函數執行時的當前對象。

作為一個函數調用

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

以上函數不屬于任何對象。但是在 JavaScript 中它始終是默認的全局對象。
在 HTML 中默認的全局對象是 HTML 頁面本身，所以函數是屬于 HTML 頁面。
在瀏覽器中的頁面對象是瀏覽器窗口(window 對象)。以上函數會自動變為 window 對象的函數。?

下面代碼中?myFunction() 和 window.myFunction() 是一樣的：

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

上面代碼中是調用 JavaScript 函數常用的方法，但不是良好的編程習慣。全局變量，方法或函數容易造成命名沖突的bug。

全局對象

當函數沒有被自身的對象調用時?this?的值就會變成全局對象。在 web 瀏覽器中全局對象是瀏覽器窗口（window 對象）。

該實例返回?this?的值是 window 對象:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>在 HTML 中 <b>this</b> 的值, 在全局函數是一個 window 對象。</p> <p id="demo"></p> <script> function myFunction() {return this; } document.getElementById("demo").innerHTML = myFunction(); </script></body> </html>

函數作為全局對象調用，會使 this 的值成為全局對象。使用 window 對象作為一個變量容易造成程序崩潰。

函數作為方法調用

在 JavaScript 中你可以將函數定義為對象的方法。

以下實例創建了一個對象 (myObject), 對象有兩個屬性 (firstName?和?lastName), 及一個方法 (fullName):

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

fullName?方法是一個函數。函數屬于對象。?myObject?是函數的所有者。

this?對象，擁有 JavaScript 代碼。實例中?this?的值為?myObject?對象。

測試以下！修改?fullName?方法并返回?this?值:

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

函數作為對象方法調用，會使得?this?的值成為對象本身。

使用構造函數調用函數

如果函數調用前使用了?new?關鍵字, 則是調用了構造函數。

這看起來就像創建了新的函數，但實際上 JavaScript 函數是重新創建的對象：

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

構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法。

構造函數中?this?關鍵字沒有任何的值。
this?的值在函數調用實例化對象(new object)時創建。

作為函數方法調用函數

在 JavaScript 中, 函數是對象。JavaScript 函數有它的屬性和方法。

call()?和?apply()?是預定義的函數方法。兩個方法可用于調用函數，兩個方法的第一個參數必須是對象本身。

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

兩個方法都使用了對象本身作為第一個參數。兩者的區別在于第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。

在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成為?this?的值，即使該參數不是一個對象。

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

通過 call() 或 apply() 方法你可以設置?this?的值, 且作為已存在對象的新方法調用。

call() 和 apply()?用法總結

一般來說，this 總是指向調用某個方法的對象，但是使用 call() 和 apply()方法時，就會改變 this 的指向。

先看明白下面：例 1

var name = '小王', age = 17; var obj = {name: '小張',objAge:this.age,myFun:function () {console.log(this.name + "年齡" + this.age);} }var obj_age = obj.objAge; console.log(obj_age); obj.myFun();

例 2

var tempStr = "掃地僧"; function showStr(){console.log(this.tempStr); } showStr();

比較一下這兩者 this 的差別，第一個打印里面的 this 指向 obj，第二個全局聲明的 shows() 函數 this 是 window ；

1，call()、apply()、bind() 都是用來重定義 this 這個對象的！

注意：bind 方法后面多了個 () 外，結果返回都一致！bind 返回的是一個新的函數，你必須調用它才會被執行。

2，對比 call 、bind 、 apply 傳參情況下

call 、bind 、 apply 這三個函數的參數：

第一個參數：都是 this 的指向對象，
第二個參數差別就來了：
? ? call 的參數是直接放進去的，參數之間全都用逗號分隔。?obj.myFun.call(db,'成都', ... ,'string' )。
? ? apply 的所有參數都必須放在一個數組里面。?obj.myFun.apply(db, ['成都', ..., 'string' ])。
? ? bind 除了返回是函數以外，它的參數和 call 一樣。

當然，三者的參數不限定是 string 類型，允許是各種類型，包括函數、 object 等等！

JS 中的 call() 方法和 apply() 方法用法總結：https://blog.csdn.net/ganyingxie123456/article/details/70855586

筆記：

this 是 JavaScript 語言的一個關鍵字。

它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。比如：

function test() {this.x = 1; }

隨著函數使用場合的不同，this 的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對象。

作為函數方法調用函數時，此函數執行了相當于 java 中靜態函數的功能。（?嘗試一下）

可以用的頻率較高的函數作這樣的設置，為對象執行相關操作。

JavaScript 的閉包

JavaScript 變量可以是 局部變量 或 全局變量。

私有變量 可以用到閉包。

局部變量

在函數內聲明的變量作用域是局部的（函數內）：

var globalVar; // 全局變量// 這里不能使用 carName 變量function myFunction() {var carName = "Volvo"; // 函數內的局部變量// 這里可以使用 carName 變量 }// 這里不能使用 carName 變量

函數內

使用 var 聲明的變量 只能在函數內容訪問，即 局部變量
如果 不使用 var 則是 全局變量，即便它在函數內定義。

局部變量?只能在定義它的函數內部使用。

全局變量 和 局部變量 即便名稱相同，它們也是兩個不同的變量。修改其中一個，不會影響另一個的值。

全局變量

函數可以訪問由函數內部定義的變量，如：

function myFunction() {var a = 4;return a * a; }

函數也可以訪問函數外部定義的變量，如：

var a = 4; function myFunction() {return a * a; }

后面一個實例中，?a?是一個?全局?變量。

在web頁面中全局變量屬于 window 對象。

全局變量可應用于頁面上的所有腳本。

在第一個實例中，?a?是一個?局部?變量。

變量生命周期

全局變量的作用域是全局性的，即在整個JavaScript程序中，全局變量處處都在。

而在函數內部聲明的變量，只在函數內部起作用。這些變量是局部變量，作用域是局部性的；函數的參數也是局部性的，只在函數內部起作用。

計數器困境

設想下如果你想統計一些數值，且該計數器在所有函數中都是可用的。

你可以使用全局變量，函數設置計數器遞增：

var counter = 0;function add() {return counter += 1; }add(); add(); add();// 計數器現在為 3

計數器數值在執行 add() 函數時發生變化。

但問題來了，頁面上的任何腳本都能改變計數器，即便沒有調用 add() 函數。

如果我在函數內聲明計數器，如果沒有調用函數將無法修改計數器的值：

function add() {var counter = 0;return counter += 1; }add(); add(); add();// 本意是想輸出 3, 但事與愿違，輸出的都是 1 !

以上代碼將無法正確輸出，每次我調用 add() 函數，計數器都會設置為 1。

JavaScript 內嵌函數可以解決該問題。

JavaScript 內嵌函數

所有函數都能訪問全局變量。??

實際上，在 JavaScript 中，所有函數都能訪問它們上一層的作用域。

JavaScript 支持嵌套函數。嵌套函數可以訪問上一層的函數變量。

該實例中，內嵌函數?plus()?可以訪問父函數的?counter?變量：

function add() {var counter = 0;function plus() {counter += 1;}plus(); return counter; }

如果我們能在外部訪問?plus()?函數，這樣就能解決計數器的困境。

我們同樣需要確保?counter = 0?只執行一次。

我們需要閉包。

JavaScript 閉包

還記得函數自我調用嗎？該函數會做什么？

var add = (function () {var counter = 0;return function () {return counter += 1;} })();add(); add(); add();// 計數器為 3

實例解析

變量?add?指定了函數自我調用的返回字值。

自我調用函數只執行一次。設置計數器為 0。并返回函數表達式。

add變量可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層作用域的計數器。

這個叫作 JavaScript?閉包。它使得函數擁有私有變量變成可能。

計數器受匿名函數的作用域保護，只能通過 add 方法修改。

閉包是一種保護私有變量的機制，在函數執行時形成私有的作用域，保護里面的私有變量不受外界干擾。

直觀的說：就是形成一個不銷毀的棧環境。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的菜鸟教程之 JavaScript 函数(function)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：命令行下 pdb 调试 Python 程
下一篇： SpringBoot 自带工具类~断言