前端基礎（三）函式

在最新的es規範中，宣告函式有4中方法：

-函式宣告

-函式表示式

-建構函式function

-生成器函式

語法：

function name([param[, param2 [...]]])

name:函式名稱

param:需要傳遞給函式的引數的名稱。有最大引數數量限制，不同引擎限制不同。

statements:包含函式體的語句

函式的最基本用法，注意會有宣告提公升機制。

語法：

var name = function(param [,param [...]])
或let name = function(param [,param [...]])

用法同函式宣告，使用let時，是塊級作用域。

如下**,我們就能看出函式宣告與函式表示式的差異：

testfun(); //testfun
function testfun () 
console.log(typeof testfun1); //undefined
var testfun1 = function () ;

以第乙個是函式申明提公升，所以我們可以在宣告之前使用函式。第二個是var變數宣告提公升，在宣告之前它的值是undefined，所以無法直接使用。

語法：

new function([arg1 [ ,arg2 [,arg3 [...]]] ,] functionbody);

引數：arg1, arg2, ... argn

函式使用的引數列表

functionbody

乙個包含函式定義的語句字串

js中，所有的函式都是function建構函式的例項。object內建物件實質也是乙個函式，所以，object也是繼承自function的。而且，function本身也是乙個函式，因此，它自己也繼承自己。

function.prototype === function.__proto__;	//true

使用這種方法建立函式有以下三點缺點：

1.使用function建立的函式只有在執行到 new function（）語句時，才會解析函式。上面兩種方式建立的函式，是與js**一起解析的。所以，使用function函式建立的函式效率更低。

2.函式都是在全域性作用域中建立的，無法使用建立時的上下文作用域。

let msg = 'testfun3 global';
function testfun3 () 
testfun3(); //testfun3 global

3.**書寫在字串中，不利於維護。

所以，盡量不要使用該方式定義函式。

語法：

function* name([param[, param[, ... param]]])

引數同 1

定義乙個生成器函式。

基礎用法：

function * generator (i) 
let gen1 = generator(0);
console.log(gen1.next()); //
console.log(gen1.next()); //
console.log(gen1.next()); //
console.log(gen1.next(100)); //
console.log(gen1.next()); //

呼叫next函式時，傳入的值是賦予上乙個yield的返回值。

有瀏覽器相容性問題，ie所有版本都不支援該用法。

###直接呼叫

語法：

funname([arg1 [,arg2 , [arg3 [...]]]]);

最常用方式，不予贅述。

語法：

引數：thisarg

可選引數，將引數作為函式執行的this值使用。

如果處於非嚴格模式下，傳值為null或者undefined時，就將全域性物件繫結到函式的this上。如果傳值為原始值（數字、字串、布林），則會將this指向原始值的包裝物件（number、string、boolean）

argsarray

可選引數，傳入乙個陣列或者類陣列的值，作為函式的引數列表。

let obj = 
};function success (callback) 
success(obj.print);

fun.call(thisarg, arg1, arg2, ...)

new constructor[([args])]

引數：constructor

乙個類或者函式。

args

類或者函式的引數列表，new constructor 等同於 new constructor().

當使用new foo(...)來呼叫乙個函式時，其實發生了如下三件事。

①建立乙個繼承自foo.prototype的新物件。

②呼叫foo函式，並將新建的物件作為this繫結到當前函式的執行上下文中。

③如果函式有返回值，就返回該值；否則，直接返回第一步建立的物件。

舉個栗子：

function foo (name) 
var foo1 = new foo('tom');
var foo2 = object.create(foo.prototype);
foo.call(foo2, 'tom');
console.log(foo1 instanceof foo); //true
console.log(foo2 instanceof foo); //true

語法：obj.foo([args])

或

var pfoo = obj.foo;
pfoo([args]);

這種方式就是物件的屬性值為函式的時候，我們呼叫函式的情況。

用法基本和直接呼叫一致，其實通過第一種方式呼叫，實質就是在全域性物件上宣告了乙個函式變數，然後通過全域性物件來呼叫這個函式，所以他們的表象和使用方法類似。

但是這裡，我們需要注意一點，就是我們通過物件屬性呼叫和宣告乙個變數來獲取函式值而後呼叫有使用上的區別。

舉個栗子：

var obj = 
};obj.foo('tom'); //obj
var pfoo = obj.foo;
pfoo(); //window

如上栗子，直接呼叫，this指向的是 obj 物件，但如果通過變數賦值後，this指向的是當前函式呼叫語句的上下文環境，這裡我是瀏覽器環境，並且在頂層作用域中執行，所以this指向的是window物件。

函式定義有函式宣告、函式表示式、function建構函式、function*四種方式。前面兩種最常用，但是要注意this的指向問題（由於函式宣告的作用域問題，我建議盡量使用函式表示式）。function建構函式官方推薦不要使用，funtion*生成器函式是es2015出現的新特性，使用時需要注意相容性。

原文發布時間為：2023年06月19日

開源中國

前端基礎（三）函式

web前端基礎總結（三）

前端基礎問題小總結（三）

前端學習 html基礎學習三

前端基礎（三） 函式

web前端基礎總結（三）

前端基礎問題小總結（三）

前端學習 html基礎學習三

相關推薦

前端基礎（三）函式