JS中function的基礎知識

時間 2020-05-30

標籤 function 基礎知識欄目 JavaScript 简体版

原文原文鏈接

1、什麼是函數

一、實質與意義

函數實際上就是一種方法；意義在於封裝

二、應用：

把實現某一個功能的代碼封裝在一塊兒，後期想實現這個功能，只須要執行函數便可，不須要從新編寫這些代碼了

三、目的：

減小頁面中冗餘代碼，提升代碼重複利用率，「低耦合，高內聚」

2、函數的兩個重要部分

思惟導圖javascript

一、建立函數

-1).語法：

function 函數名(形參){ 函數體 }

-2).建立過程：

第一步：
- 建立值：
  - 一、開闢一個堆內存
  - 二、把函數體中的代碼看成字符串儲存在堆中
  - 三、把堆地址放到棧中

第二步：
- 建立變量
第三步：
- 讓變量和地址關聯

注意:只建立函數，其實就是建立了一個存儲一堆字符串的堆而已，並無實際做用 java

二、執行函數

-1).語法：

函數名（實參）

-2).目的

把建立的函數執行（把函數體中的代碼執行）

-3).依賴條件

棧內存
供代碼執行的上下文

已知頁面加載時瀏覽器已經建立了ECStack執行環境棧,因此咱們在執行函數時，只須要建立一個新的執行上下文就能夠了。數組

-4).執行過程：

每一次函數執行時，都會按照下面的順序進行；瀏覽器

第一步：
- 建立一個全新的執行上下文，把執行上下文壓縮到棧內存中去執行（進棧執行）
第二步：
- 在這個上下文中，也存在一個AO（變量對象），用來存儲當前上下文代碼執行中所建立的變量
  - 這些變量是「私有變量」
  - 除當前上下文中可使用這些變量的值，上下文之外的環境不能直接使用私有變量的值
......先講解基礎知識，因此咱們中間省略了一些細化的步驟，後續會一點一點完善；
第三步：
- 代碼執行
第四步：
- 當上下文中的代碼都執行完後，若是該上下文中的信息沒有被外界佔用的狀況，則執行完出棧（釋放掉）以減小棧內存中的空間；

函數運行機制圖例：bash

3、參數的形式

思惟導圖函數

一、形參

定義：
- 建立函數的時候，咱們並不清楚須要處理的數據是什麼，只有當函數執行的時候，咱們纔會知道，此時咱們須要定義相應的入口，這個入口在JS函數中被稱爲形參；
做用：
- 「用來存儲執行函數時，傳遞進來的信息」
- 因此形參是變量

二、實參

定義：
- 函數執行的時候，傳遞進來的值會賦值給形參變量，傳遞的具體值在JS函數中被稱爲實參；
做用：
- 「實參就是具體傳遞的值」

function sum(x, y) {
	let total = x + y;
	console.log(total);
}
sum(1 === 1 ? 'OK' : 'NO'); //=>也須要把三元表達式運算的結果做爲實參傳遞給形參

let age = 20;
sum(age); //=> x=20 實參永遠都應該是值，此處雖然寫的AGE，可是他會把AGE變量的值拿到，而後傳遞給形參x，而不是把AGE自己傳遞過去 =>sum(20) 
複製代碼

形參是建立函數時候設定的變量，實參是執行函數時候給形參傳遞的具體值 ui

形參與實參的對應關係

一、設定形參變量，可是執行的時候沒有傳遞對應的值，則形參默認值是undefined
二、形參只有兩個，實參有三個時，第三個實參並無對應的形參接收（可是傳遞給函數了）

三、arguments

定義：
- 函數內置的實參集合
- 無論咱們時候設置形參，或者是否傳遞了實參，arguments 始終都會存在（ES6箭頭函數中沒有arguments）
- 只能出如今函數體中
形式：
- arguments 是一個類數組集合
- 相似數組，但不是數組，和元素集合 HTMLCollection 相似
原理:
- 根據索引記錄了每個傳遞進來的實參信息 (和是否認義形參變量沒有關係)
- arguments中包含了全部傳遞進來的實參信息
- length 屬性表明傳遞實參的個數
栗子🌰：任意數求和：無論傳遞幾個實參值進來，咱們都能求出對應的和

//=================任意數求和：無論傳遞幾個實參值進來，咱們都能求出對應的和
// 有一個具體的問題：基於形參變量來接收求和的數字已經不現實了，由於咱們也不知道要傳遞多少個值，也就沒法肯定要定義多少個形參變量了
function sum() {
	// 循環ARGUMENTS中的每一項（每個傳遞進來的實參），都累加給TOTAL，最後就能求出和了
	let total = 0;
	for (let i = 0; i < arguments.length; i++) {
		// 把傳遞進來的實參信息都轉換爲數字：排除掉非有效數字或者字符串
		let item = Number(arguments[i]);
		if (!isNaN(item)) {
			// 有效數字
			total += item;
		}
	}
	console.log(total);
}
sum(); //=>0
sum(10); //=>10
sum(10, 20); //=>30
sum(10, 20, 30, 40); //=>100
sum(10, 20, 'AA'); //=>30 過濾掉非有效的數字
sum(10, '20'); //=>30 若是是字符串，不能是字符串拼接，還應該是數學相加
複製代碼

四、ES6中的剩餘運算符

語法：
- ...args（args爲隨便起的變量名）
定義：
- 把傳遞進來的實參信息，都以數組的形式保存到args變量中
使用：
- 若是不想在剩餘參數中收集全部參數，則能夠組合常規參數和剩餘參數。
- 一個常規參數，獲取一個參數的值。而後剩下的參數 ...args 接收剩餘的參數。
上面的🌰用剩餘運算符實現：

function sum(...args) {
	// ...args：ES6中的剩餘運算符，把傳遞進來的實參信息，都已數組的形式保存到ARGS變量中
	let total = 0;
	for (let i = 0; i < args.length; i++) {
		let item = Number(args[i]);
		if (!isNaN(item)) {
			total += item;
		}
	}
	console.log(total);
}
sum(10, 20, 30, 40);
複製代碼

剩餘參數和 arguments對象的區別

一、剩餘參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的全部實參。
二、arguments對象不是一個真正的數組，而剩餘參數是真正的 Array實例

4、返回值 return

思惟導圖spa

上面說了，函數中的變量爲私有變量，除當前上下文中可使用這些變量的值，上下文之外的環境不能直接使用私有變量的值

定義：
- 那麼，若是，外面想用當前上下文中的一些私有信息，則須要函數提供對應的出口，把信息提供給外面使用，而這個出口在JS函數中被稱爲「返回值 return」
做用：
- 一、基於 return 把變量的值暴露給外面使用
  - 在外邊建立一個變量，用來接收函數執行返回的值（也就是 return 後面的值）
- 二、告知函數體中下面代碼不在執行

return 後面放的必定是變量 code

例如:
- console.log（sum）:
  - 這裏輸出的是 sum 函數自己;
  - sum = 函數
- console,log (sum());
  - 表明讓函數執行
  - 這裏輸出的是函數的返回值
  - 若是函數中沒有寫return，默認的返回值是undefined

5、函數的表達形式

思惟導圖cdn

一、實名函數

有函數名的

二、匿名函數

-1).函數表達式

把一個函數看成值賦值給變量
事件綁定

document.body.onclick = function () {
	// 此處就是匿名函數
};
let fn = function () {
	// 也是匿名函數 fn表明這個函數 和 function fn相似
};
複製代碼

-2).自執行函數
- 函數建立完就當即執行了
- 建立函數時，function包一個小括號或前面加特殊字符是爲了符合語法規範
  - (function（n）{...})(實參):
  - + function（n）{...}(實參)
  - - function（n）{...}(實參)
  - ~ function（n）{...}(實參)
  - ! function（n）{...}(實參)

三、箭頭函數

本次不詳細講解

語法：
- let func = (x,y) => {...};

//==============箭頭函數（ES6中新定義的建立函數的方式）
let func = (x, y) => {
	// x和y是形參變量
	// 大括號中仍是函數體
};
func(10, 20);


//=>箭頭函數能夠簡化函數編寫的方式：若是函數體中只有一句RETURN，則能夠忽略大括號和RETURN 
let sum = (x, y) => x + y;

function sum(x, y) {
	return x + y;
}

function func(x) {
	return function (y) {
		return x + y;
	}
}
let func = x => y => x + y;
複製代碼