JS的五種函式呼叫方式

查小小飛發表於2019-12-02

這不是茴字的五種寫法!

圓括號呼叫

不需要多說,百分之九十的日常呼叫就是這樣的。

JS的五種函式呼叫方式

IIFE(立即呼叫函式表示式)

我們可以定義一個匿名函式,然後立即呼叫這個函式,這樣做有什麼用呢?這個匿名函式擁有獨立的詞法作用域。這不僅避免了外界訪問此 IIFE中的變數,而且又不會汙染全域性作用域。

JS的五種函式呼叫方式

Function.prototype.call() 呼叫

函式也是物件,他有一個方法,call() 方法,可以使用這個方法呼叫這個函式。

語法:function.call(thisArg, arg1, arg2, ...)

  • 第一個引數是this值,如果你不知道this,可以看我之前寫的文章
  • 後面的引數是 傳給函式的實參

這種函式呼叫可以讓你自己明確指定傳入的this

JS的五種函式呼叫方式

Function.prototype.apply() 呼叫

語法:func.apply(thisArg, [argsArray])

  • 第一個引數是this值
  • 後面的引數以陣列的形式傳遞,是函式的實參

這其實和call方法沒有什麼不同,只是在語法上有點差異。

JS的五種函式呼叫方式

new 運算子

在用建構函式的時候,你一定很熟悉這種用法。

JS的五種函式呼叫方式

實際上,你也可以對普通的函式使用new去呼叫,就像這樣:

JS的五種函式呼叫方式

當你new呼叫一個函式的時候,實際上有以下步驟:

  • 建立一個空的簡單JavaScript物件(即{});
  • 連結該物件(即設定該物件的建構函式)到另一個物件 ;
  • 將步驟1新建立的物件作為this的上下文 ;
  • 如果該函式沒有返回物件,則返回this

通常通過new例項化一個物件。

總結

這並不是為總結而總結,更不是茴字的多種寫法,是我對JS函式在學習過程種的一點思考和總結,要搞清楚每一種背後的原理和使用場景。喜歡的話請點個贊吧,畢竟得到認可才是最大的動力,感謝。

相關文章