詳解JavaScript函數模式

wwolf 發布于2019-08-21 10:20 / 2908人閱讀

摘要：函數表達式又名匿名函數為變量賦的值是函數定義本身。在語言里任何匿名函數都是屬于對象。這種情況下，就叫做回調函數。如上面代碼示例展示了文檔單擊事件時以冒泡模式傳遞給回調函數的特別適用于事件驅動編程，因為回調模式支持程序以異步方式運行。

JavaScript設計模式的作用是提高代碼的重用性，可讀性，使代碼更容易的維護和擴展

在javascript中，函數是一類對象，這表示他可以作為參數傳遞給其他函數；此外，函數還可以提供作用域。

js函數基礎部分：JavaScript學習總結（四）function函數部分

創建函數的語法 命名函數表達式

//命名函數表達式
var add = function add(a,b){
    return a+b;
};

var foo = function bar() {
    console.log(foo === bar);
};
foo();//true

可見，他們引用的是同一函數，但這只在函數體內有效。

var foo = function bar() {};
console.log(foo === bar);//ReferenceError: bar is not defined

但是，你不能通過調用bar()來調用該函數。

var foo = (function bar() {
    console.log(foo === bar);
})();//false

函數表達式

//又名匿名函數
var add = function(a,b){
    return a+b;
};

為變量 add 賦的值是函數定義本身。這樣，add 就成了一個函數，可以在任何地方調用。

函數的聲明

function foo(){
    //code here
}  //這里可以不需要分號

在尾隨的分號中，函數表達式應總是使用分號，而函數的聲明中并不需要分號結尾。

聲明式函數與函數表達式的區別在于：在JS的預編譯期，聲明式函數將會先被提取出來，然后才按順序執行js代碼：

console.log(f1);//[Function: f1]
console.log(f2);//undefined，Javascript并非完全的按順序解釋執行，而是在解釋之前會對Javascript進行一次“預編譯”，在預編譯的過程中，會把定義式的函數優先執行

function f1(){
    console.log("I am f1");
}
var f2 = function (){
    console.log("I am f2");
};

由于聲明函數都會在全局作用域構造時候完成，因此聲明函數都是window對象的屬性，這就說明為什么我們不管在哪里聲明函數，聲明函數最終都是屬于window對象的原因了。

在javascript語言里任何匿名函數都是屬于window對象。在定義匿名函數時候它會返回自己的內存地址，如果此時有個變量接收了這個內存地址，那么匿名函數就能在程序里被使用了，因為匿名函數也是在全局執行環境構造時候定義和賦值，所以匿名函數的this指向也是window對象

var f2 = function (){
    console.log("I am f2");
};
console.log(f2());//I am f2

(function(){
   console.log(this === window);//true
})();

函數聲明與表達式 函數的提升（hoisting）

函數聲明的行為并不等同于命名函數表達式，其區別在于提升（hoisting）行為，看下面例子：

對于所有變量，無論在函數體的何處進行聲明，都會在內部被提升到函數頂部。而對于函數通用適用，其原因在于函數只是分配給變量的對象。

提升，顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在后面的東西（變量或函數）提升到前面中定義。從上面的例子可以看出，在函數hoist內部中的foo和bar移動到了頂部，從而覆蓋了全局foo和bar函數。局部函數bar和foo的區別在于，foo被提升到了頂部且能正常運行，而bar()的定義并沒有得到提升，僅有它的聲明被提升，所以，當執行bar()的時候顯示結果為undefined而不是作為函數來使用。

即時函數模式

函數也是對象，因此它們可以作為返回值。使用自執行函數的好處是直接聲明一個匿名函數，立即使用，省得定義一個用一次就不用的函數，而且免了命名沖突的問題，js中沒有命名空間的概念，因此很容易發生函數名字沖突，一旦命名沖突以最后聲明的為準。

模式一：

模式二：自執行函數變量的指向

模式三：嵌套函數

模式四：自執行函數把它的返回值賦給變量

    var abc = (function () {
            var a = 1;
            return function () {
                return ++a;
            }
        })();//自執行函數把return后面的函數返回給變量
   alert(abc());//如果是alert(abc)就會彈出return語句后面的代碼；如果是abc(),則會執行return后面的函數

模式五：函數內部執行自身，遞歸

// 這是一個自執行的函數，函數內部執行自身，遞歸
function abc() { abc(); }

回調模式

回調函數：當你將一個函數write()作為一個參數傳遞給另一個函數call()時，那么在某一時刻call()可能會執行（或者調用）write()。這種情況下，write()就叫做回調函數（callback function）。

異步事件監聽器

回調模式有許多用途，比如，當附加一個事件監聽器到頁面上的一個元素時，實際上是提供了一個回調函數的指針，該函數將會在事件發生時被調用。如：

document.addEventListener("click",console.log,false);

上面代碼示例展示了文檔單擊事件時以冒泡模式傳遞給回調函數console.log()的

javascript特別適用于事件驅動編程，因為回調模式支持程序以異步方式運行。

超時

使用回調模式的另一個例子是，當使用瀏覽器的window對象所提供的超時方法：setTimeout()和setInterval()，如：

庫中的回調模式

當設計一個js庫時，回調函數將派上用場，一個庫的代碼應盡可能地使用可復用的代碼，而回調可以幫助實現這種通用化。當我們設計一個龐大的js庫時，事實上，用戶并不會需要其中的大部分功能，而我們可以專注于核心功能并提供“掛鉤形式”的回調函數，這將使我們更容易地構建、擴展，以及自定義庫方法

Curry化

Curry化技術是一種通過把多個參數填充到函數體中，實現將函數轉換為一個新的經過簡化的（使之接受的參數更少）函數的技術。———【精通JavaScript】

簡單來說，Curry化就是一個轉換過程，即我們執行函數轉換的過程。如下例子：

當第一次調用add()時，它為返回的內部函數創建了一個閉包。該閉包將原始的x和y值存儲到私有變量oldx和oldy中。

現在，我們將可使用任意函數curry的通用方法，如：

何時使用Curry化

當發現正在調用同一個函數時，并且傳遞的參數絕大多數都是相同的，那么該函數可能是用于Curry化的一個很好的候選參數

云服務器 GPU云服務器過濾器模式詳解時間函數詳解 hash函數詳解 javascript詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85358.html

【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
Javascript正則表達式詳解（一）

摘要：定義在中，定義一個正則表達式有兩種方式，一種是直接量，另一種是使用構造函數。元字符在正則表達式的模式中，有一些字符是有特殊含義的，被稱為元字符，如果要匹配元字符，則必須對其進行轉義。正則表達式詳解二簡介先來一段介紹：正則表達式，又稱正規表示法、常規表示法（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE），計算機科學的一個概念。...

zeyu 2019-08-19 14:49 評論0 收藏0
詳解js面向對象編程

摘要：看下面一個例子優點使用構造器函數的好處在于，它可以在創建對象時接收一些參數。按照慣例，構造函數的函數名應始終以一個大寫字母開頭，以區分普通函數。返回該對象的源代碼。使您有能力向對象添加屬性和方法。基本概念 ECMA關于對象的定義是：無序屬性的集合，其屬性可以包含基本值、對象或者函數。對象的每個屬性或方法都有一個名字，而每個名字都映射到一個值。類在現實生活中，相似的對象之間往往都有...

lolomaco 2019-08-21 12:30 評論0 收藏0
JavaScript繼承方式詳解

摘要：可以通過構造函數和原型的方式模擬實現類的功能。原型式繼承與類式繼承類式繼承是在子類型構造函數的內部調用超類型的構造函數。寄生式繼承這種繼承方式是把原型式工廠模式結合起來，目的是為了封裝創建的過程。 js繼承的概念 js里常用的如下兩種繼承方式：原型鏈繼承（對象間的繼承）類式繼承（構造函數間的繼承）由于js不像java那樣是真正面向對象的語言，js是基于對象的，它沒有類的概念。...

Yangyang 2019-08-21 10:23 評論0 收藏0