函數是一段程式碼,它只定義一次,但可以被執行或呼叫任意次。在 JavaScript 裡,函數即對象,程式可以隨意操控它們。例如,可以把函數賦值給變量,或是作為參數傳遞給其他函數,也可以為它們設定屬性,甚至呼叫它們的方法。如果函數掛載在一個物件上,作為物件的屬性,就稱它為物件的方法。如果函數巢狀在其他函數中定義,這樣它們就可以存取它們被定義時所處的作用域中的任何變數。
函數定義
在 JavaScript 中,函數實際上是對象,每個函數都是 Function 構造函數的實例,因此函數名稱實際上也是一個指向函數對象的指針,不會與某個函數綁定。函數通常有以下3定義方式。例如:
// 写法一:函数声明(推荐写法) function sum (num1, num2) { return num1 + num2; } // 写法二:函数表达式(推荐写法) var sum = function(num1, num2){ return num1 + num2; }; // 写法三:Function 构造函数(不推荐写法) var sum = new Function("num1", "num2", "return num1 + num2");
由於函數名稱只是指向函數的指針,因此函數名稱與包含物件指標的其他變數沒有什麼不同。換句話說,一個函數可能會有多個名字。例如:
function sum(num1, num2){ return num1 + num2; } console.log(sum(10,10)); // 20 var anotherSum = sum; console.log(anotherSum(10,10)); // 20 sum = null; console.log(anotherSum(10,10)); // 20
沒有重載
將函數名稱想像為指針,也有助於理解為什麼 JavaScript 中沒有函數重載的概念。
function addSomeNumber(num){ return num + 100; } function addSomeNumber(num) { return num + 200; } var result = addSomeNumber(100); // 300
顯然,這個例子中宣告了兩個同名函數,而結果則是後面的函數覆蓋了前面的函數。以上程式碼其實與下面的程式碼沒有什麼不同。
var addSomeNumber = function (num){ return num + 100; }; addSomeNumber = function (num) { return num + 200; }; var result = addSomeNumber(100); // 300
透過重寫程式碼之後可以很容易明白,在建立第二個函數時,實際上覆寫了引用第一個函數的變數 addSomeNumber。
函數宣告與函數表達式
解析器在向執行環境中載入資料時,對「函數宣告」與「函數表達式」並非一視同仁。解析器會率先讀取函數聲明,並使其在執行任何程式碼之前可用(可以存取);至於函數表達式,則必須等到解析器執行到它所在的程式碼行,才會真正被解釋執行。例如:
console.log(sum(10,10)); // 20 function sum(num1, num2){ return num1 + num2; }
以上程式碼完全可以正常運作。因為在程式碼開始執行之前,解析器就已經透過一個名為函數宣告提升(function declaration hoisting)的過程,讀取並將函數宣告加入執行環境。將程式碼求值時,JavaScript 引擎在第一遍會宣告函數並將它們放到原始碼樹的頂部。所以,即使宣告函數的程式碼在呼叫它的程式碼後面,JavaScript 引擎也能把函數宣告提升到頂部。把上面的「函數宣告」改為等價的「函數表達式」,就會在執行期間導致錯誤。例如:
console.log(sum(10,10)); // Uncaught TypeError: sum is not a function var sum = function(num1, num2){ return num1 + num2; };
除了上述差異之外,「函數宣告」與「函數表達式」的語法是等價的。
作為值的函數
因為 JavaScript 中的函數名稱本身就是變量,所以函數也可以當作值來使用。也就是說,不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數,而且可以將一個函數作為另一個函數的結果傳回。來看看下面的函數。
function callSomeFunction(someFunction, someArgument){ return someFunction(someArgument); }
這個函數接受兩個參數。第一個參數應該是一個函數,第二個參數應該是要傳遞給該函數的一個值。然後,就可以像下面的範例一樣傳遞函數了。
function add10(num){ return num + 10; } var result1 = callSomeFunction(add10, 10); console.log(result1); // 20 function getGreeting(name){ return "Hello, " + name; } var result2 = callSomeFunction(getGreeting, "Nicholas"); console.log(result2); // "Hello, Nicholas"
這裡的 callSomeFunction() 函數是通用的,即無論第一個參數中傳遞進來的是什麼函數,它都會傳回執行第一個參數後的結果。要存取函數的指標而不執行函數的話,必須去掉函數名稱後面的那對圓括號。因此上面例子中傳遞給 callSomeFunction() 的是 add10 和getGreeting,而不是執行它們之後的結果。
當然,還可以從一個函數中返回另一個函數,而且這也是極為有用的一種技術。例如,假設有一個物件數組,我們想要根據某個物件屬性對數組進行排序。而傳遞給陣列 sort() 方法的比較函數要接收兩個參數,也就是要比較的值。可是,我們需要一種方式來指明按照哪個屬性來排序。要解決這個問題,可以定義一個函數,它接收一個屬性名,然後根據這個屬性名來建立一個比較函數,以下就是這個函數的定義。
function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value1 < value2){ return -1; } else if (value1 > value2){ return 1; } else { return 0; } }; }
這個函數定義看起來有點複雜,但實際上無非就是在一個函數中嵌套了另一個函數,而且內部函數前面加了一個 return 運算子。在內部函數接收 propertyName 參數後,它會使用方括號表示法來取得給定屬性的值。取得了想要的屬性值之後,定義比較函數就非常簡單了。上面這個函數可以像在下面範例中這樣使用。
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}]; data.sort(createComparisonFunction("name")); console.log(data[0].name); // Nicholas data.sort(createComparisonFunction("age")); console.log(data[0].name); // Zachary
这里,我们创建了一个包含两个对象的数组 data。其中,每个对象都包含一个 name 属性和一个 age 属性。在默认情况下,sort() 方法会调用每个对象的 toString() 方法以确定它们的次序;但得到的结果往往并不符合人类的思维习惯。因此,我们调用 createComparisonFunction("name") 方法创建了一个比较函数,以便按照每个对象的 name 属性值进行排序。而结果排在前面的第一项是 name 为 "Nicholas",age 是 29 的对象。然后,我们又使用了 createComparisonFunction("age") 返回的比较函数,这次是按照对象的age属性排序。得到的结果是 name 值为 "Zachary",age 值是 28 的对象排在了第一位。
函数的形参和实参
在函数内部,有两个特殊的对象:arguments 和 this。其中,arguments 是一个类数组对象,包含着传入函数中的所有参数。虽然arguments 的主要用途是保存函数参数,但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments对象的函数。请看下面这个非常经典的阶乘函数。
function factorial(num){ if (num <= 1) { return 1; } else { return num * factorial(num-1) } }
定义阶乘函数一般都要用到递归算法,如上面的代码所示,在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象,可以像下面这样使用arguments.callee。
function factorial(num){ if (num <=1) { return 1; } else { return num * arguments.callee(num-1) } }
在这个重写后的 factorial() 函数的函数体内,没有再引用函数名 factorial。这样,无论引用函数时使用的是什么名字,都可以保证正常完成递归调用。例如:
var trueFactorial = factorial; factorial = function(){ return 0; }; console.log(trueFactorial(5)); // 120 console.log(factorial(5)); // 0
在此,变量 trueFactorial 获得了 factorial 的值,实际上是在另一个位置上保存了一个函数的指针。然后,我们又将一个简单地返回 0 的函数赋值给 factorial 变量。如果像原来的 factorial() 那样不使用 arguments.callee,调用 trueFactorial() 就会返回 0。可是,在解除了函数体内的代码与函数名的耦合状态之后,trueFactorial() 仍然能够正常地计算阶乘;至于factorial(),它现在只是一个返回 0 的函数。
函数内部的另一个特殊对象是 this,其行为与 Java 和 C# 中的 this 大致类似。换句话说,this 引用的是函数据以执行的环境对象(当在网页的全局作用域中调用函数时,this 对象引用的就是 window)。来看下面的例子。
window.color = "red"; var o = { color: "blue" }; function sayColor(){ console.log(this.color); } sayColor(); // "red" o.sayColor = sayColor; o.sayColor(); // "blue"
上面这个函数 sayColor() 是在全局作用域中定义的,它引用了 this 对象。由于在调用函数之前,this 的值并不确定,因此this 可能会在代码执行过程中引用不同的对象。当在全局作用域中调用 sayColor() 时,this 引用的是全局对象 window;换句话说,对 this.color 求值会转换成对 window.color 求值,于是结果就返回了 "red"。而当把这个函数赋给对象 o 并调用o.sayColor() 时,this 引用的是对象 o,因此对 this.color 求值会转换成对 o.color 求值,结果就返回了 "blue"。
请大家一定要牢记,函数的名字仅仅是一个包含指针的变量而已。因此,即使是在不同的环境中执行,全局的 sayColor() 函数与o.sayColor() 指向的仍然是同一个函数。
ECMAScript 5也规范化了另一个函数对象的属性 caller。这个属性中保存着「调用当前函数的函数的引用」,如果是在全局作用域中调用当前函数,它的值为 null。例如:
function outer(){ inner(); } function inner(){ console.log(arguments.callee.caller); } outer();
以上代码会导致警告框中显示 outer() 函数的源代码。因为 outer() 调用了 inter(),所以 arguments.callee.caller 就指向outer()。
在严格模式下,访问 arguments.callee属性,或为函数的 caller 属性赋值,都会导致错误。
函数的属性和方法
JavaScript 中的函数是对象,因此函数也有属性和方法。每个函数都包含两个属性:length 和 prototype。其中,length 属性表示函数希望接收的命名参数的个数,如下面的例子所示。
function sayName(name){ console.log(name); } function sum(num1, num2){ return num1 + num2; } function sayHi(){ console.log("hi"); } console.log(sayName.length); // 1 console.log(sum.length); // 2 console.log(sayHi.length); // 0
对于 JavaScript 中的引用类型而言,prototype 是保存它们所有实例方法的真正所在。换句话说,诸如 toString() 和 valueOf()等方法实际上都保存在 prototype 名下,只不过是通过各自对象的实例访问罢了。在创建自定义引用类型以及实现继承时,prototype 属性的作用是极为重要的。在 ECMAScript 5中,prototype 属性是不可枚举的,因此使用 for-in 无法发现。
每个函数都包含两个非继承而来的方法:apply() 和 call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内 this 对象的值。首先,apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是 arguments 对象。例如:
function sum(num1, num2){ return num1 + num2; } function callSum1(num1, num2){ return sum.apply(this, arguments); // 传入 arguments 对象 } function callSum2(num1, num2){ return sum.apply(this, [num1, num2]); // 传入数组 } console.log(callSum1(10,10)); // 20 console.log(callSum2(10,10)); // 20
在上面这个例子中,callSum1() 在执行 sum() 函数时传入了 this(因为是在全局作用域中调用的,所以传入的就是 window 对象)和 arguments 对象。而 callSum2 同样也调用了 sum() 函数,但它传入的则是 this 和一个参数数组。这两个函数都会正常执行并返回正确的结果。
call() 方法与 apply() 方法的作用相同,它们的区别仅在于接收参数的方式不同。对于 call() 方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用 call() 方法时,传递给函数的参数必须逐个列举出来,如下面的例子所示。
function sum(num1, num2){ return num1 + num2; } function callSum(num1, num2){ return sum.call(this, num1, num2); } console.log(callSum(10,10)); // 20
在使用 call() 方法的情况下,callSum() 必须明确地传入每一个参数。结果与使用 apply() 没有什么不同。至于是使用 apply()还是 call(),完全取决于你采取哪种给函数传递参数的方式最方便。如果你打算直接传入 arguments 对象,或者包含函数中先接收到的也是一个数组,那么使用 apply() 肯定更方便;否则,选择 call() 可能更合适。(在不给函数传递参数的情况下,使用哪个方法都无所谓。)
事实上,传递参数并非 apply() 和 call() 真正的用武之地;它们真正强大的地方是能够扩充函数赖以运行的作用域。下面来看一个例子。
window.color = "red"; var o = { color: "blue" }; function sayColor(){ console.log(this.color); } sayColor(); // red sayColor.call(this); // red sayColor.call(window); // red sayColor.call(o); // blue
这个例子是在前面说明 this 对象的示例基础上修改而成的。这一次,sayColor() 也是作为全局函数定义的,而且当在全局作用域中调用它时,它确实会显示 "red",因为对 this.color 的求值会转换成对 window.color 的求值。而 sayColor.call(this) 和sayColor.call(window),则是两种显式地在全局作用域中调用函数的方式,结果当然都会显示 "red"。但是,当运行sayColor.call(o) 时,函数的执行环境就不一样了,因为此时函数体内的 this 对象指向了 o,于是结果显示的是 "blue"。
使用 call() 或 apply() 来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系。在前面例子的第一个版本中,我们是先将 sayColor() 函数放到了对象 o 中,然后再通过 o 来调用它的;而在这里重写的例子中,就不需要先前那个多余的步骤了。
关卡
// 挑战一,合并任意个数的字符串 var concat = function(){ // 待实现方法体 } console.log(concat('st','on','e')); // stone // 挑战二,输出指定位置的斐波那契数列 var fioacciSequece = function(count){ // 待实现方法体 } console.log(fioacciSequece(12)); // 0、1、1、2、3、5、8、13、21、34、55、89 // 挑战三,三维数组或 n 维数组去重,使用 arguments 重写 var arr = [2,3,4,[2,3,[2,3,4,2],5],3,5,[2,3,[2,3,4,2],2],4,3,6,2]; var unique = function(arr){ // 待实现方法体 } console.log(unique(arr)); // [2,3,4,5,6]

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

本文系列在2017年中期進行了最新信息和新示例。 在此JSON示例中,我們將研究如何使用JSON格式將簡單值存儲在文件中。 使用鍵值對符號,我們可以存儲任何類型的

增強您的代碼演示文稿:10個語法熒光筆針對開發人員在您的網站或博客上共享代碼段的開發人員是開發人員的常見實踐。 選擇合適的語法熒光筆可以顯著提高可讀性和視覺吸引力。 t

本文介紹了關於JavaScript和JQuery模型視圖控制器(MVC)框架的10多個教程的精選選擇,非常適合在新的一年中提高您的網絡開發技能。 這些教程涵蓋了來自Foundatio的一系列主題

利用輕鬆的網頁佈局:8 ESTISSEL插件jQuery大大簡化了網頁佈局。 本文重點介紹了簡化該過程的八個功能強大的JQuery插件,對於手動網站創建特別有用

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象,但具體取決於函數的調用方式。 沒有當前對象時,this 指代全局對象。在 Web 瀏覽器中,它由 window 表示。 調用函數時,this 保持全局對象;但調用對象構造函數或其任何方法時,this 指代對象的實例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前,這句話可


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版