JS函數知識點梳理

mgckid 發布于2019-08-22 15:10 / 3198人閱讀

摘要：函數的分類普通函數有函數名，參數，返回值，同名覆蓋。示例代碼如下解構參數默認值為對象字面量默認值為對象本身函數的返回值函數的返回值為基本數據類型，如字符串，數字，，，。示例代碼如下函數的返回值為對象。

要想學好JavaScript除了基本的JavaScript知識點外，作為JavaScript的第一等公民——函數，我們要深入的了解。函數的多變來源于參數的靈活多變和返回值的多變。如果參數是一般的數據類型或一般對象，這樣的函數就是普通函數；如果函數的參數是函數，這就是我們所要知道的高級函數；如果創建的函數調用另外一部分（變量和參數已經預置），這樣的函數就是偏函數。

此外，還有一點就是可選參數（optional parameter）的使用。

函數的分類

普通函數

有函數名，參數，返回值，同名覆蓋。示例代碼如下：

function add(a, b) {
    return a + b;
}

匿名函數

沒有函數名，可以把函數賦值給變量和函數，或者作為回調函數使用。非常特殊的就是立即執行函數和閉包。

立即執行函數示例代碼如下：

(function(){
    console.log(1)
})()

閉包示例代碼如下：

var func = (function() {
    var i = 1;
    return function() {
        console.log(i);
    }
})()

高級函數

高級函數就是可以把函數作為參數和返回值的函數。如上面的閉包。ECMAScript中也提供大量的高級函數如forEach(), every(), some(), reduce()等等。

偏函數

function isType(type) {
    return function(obj) {
        return toString.call(obj) === "[object " + type + "]"
    }
}

var isString = isType("String");
var isFunction = isType("Function");

相信，研究過vue.js等常見庫源碼的同學不會陌生吧。

箭頭函數

箭頭函數不綁定自己的this，arguments，super。所以它不適合做方法函數，構造函數，也不適合用call,apply改變this。但它的特點就是更短，和解決匿名函數中this指向全局作用域的問題

window.name = "window";
var robot = {
    name: "qq",
    print: function() {
        setTimeout(function() {
            console.log(this.name);
        }, 300)
    } 
};
// 修改1，用bind修改this指向
var robot = {
    name: "qq",
    print: function() {
        setTimeout(function() {
            console.log(this.name);
        }.bind(this), 300)
    } 
};
// 修改2，使用箭頭函數
var robot = {
    name: "qq",
    print: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 300)
    } 
};

想了解更多箭頭函數可以看MDN

函數的參數

傳入明確的參數

function add(a, b) {

    reutrn a + b;
}

使用arguments對象

function add() {
    var argv = Array.prototype.slice.apply(arguments);
    return argv.length > 0 ? argv.reduce(function(acc, v) { return acc+=v}): "";
}

省略參數，參數默認值

function sub(a, b) {
    a = a || 0;
    b = b || 0;
    return a - b;
}

對象參數

var option = {
    width: 10,
    height: 10
}

function area(opt) {
    this.width = opt.width || 1;
    this.height = opt.height || 1;
    return this.width * this.height
}

對象參數比較常見，常出現在jQuery插件，vue插件等中。

可選參數

ES5實現可選參數，我們需要使用arguments。使用指定范圍的可選參數我們一般使用發對象參數，寫過jQuery等插件的應該印象深刻。

ES6中的函數參數

在ES6中，參數默認值，省略參數操作使用比較簡便。示例代碼如下：

var area = (width=1, height=1) => width*height

在ES6中，使用可選參數。示例代碼如下：

var add = (...nums) => {
    var numArr = [].concat(nums)
    return numArr.reduce((acc, v) => acc += v)
}

解構參數

myFunc = function({x = 5,y = 8,z = 13} = {x:1,y:2,z:3}) {
    console.log(x,y,z);
};

myFunc(); //1 2 3  (默認值為對象字面量)
myFunc({}); //5 8 13   (默認值為對象本身)

函數的返回值

函數的返回值為基本數據類型，如字符串，數字，Boolean，null，undefined。示例代碼如下：

function add(a, b) {
    return a + b
}

函數的返回值為對象。示例代碼如下：

function Robot(name) {
    this.name = name
}

Robot.prototype.init = function() {
    return {
        say: function () {
            console.log("My name is " + this.name)
        }.bind(this),
        dance:  function(danceName) {
            console.log("My dance name is " + danceName)
        }
    };
}

var robotA = new Robot("A");
robotA.init().say(); // "My name is A"
var robotB = new Robot("B");
robotB.init().say(); // "My name is B"

不管是寫原生還是jQuery插件，亦或其他插件，這種情況都不少見。更深入的了解可以參考jQuery源碼。

返回值為函數

這個我們最為熟悉的莫過于閉包。具體可參考
老生常談之閉包

參考文章

JS: How can you accept optional parameters?

Named and Optional Arguments in JavaScript

How to use optional arguments in functions (with optional callback)

后續可能還會繼續修改，也歡迎各位批評指正。有問題或者有其他想法的可以在我的GitHub上pr。

云服務器 GPU云服務器梳理多云管理平臺調研,流程梳理 js核心知識 js知識圖

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

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

好程序員Web前端培訓入門之JS基礎知識梳理匯總

摘要：好程序員前端培訓入門之基礎知識梳理匯總，前端工程師是當前各大企業都比較稀缺的人才，薪資待遇和就業前景都很不錯。作用域鏈的前端，始終是當前執行代碼所在環境的變量對象。　　好程序員Web前端培訓入門之JS基礎知識梳理匯總，Web前端工程師是當前各大企業都比較稀缺的人才，薪資待遇和就業前景都很不錯。不論是專業還是非專業，有基礎亦或是無基礎，都想通過學習Web前端實現高薪就業。不過，學習要一...

int64 2019-08-23 16:29 評論0 收藏0
好程序員Web前端培訓入門之JS基礎知識梳理匯總

摘要：好程序員前端培訓入門之基礎知識梳理匯總，前端工程師是當前各大企業都比較稀缺的人才，薪資待遇和就業前景都很不錯。作用域鏈的前端，始終是當前執行代碼所在環境的變量對象。　　好程序員Web前端培訓入門之JS基礎知識梳理匯總，Web前端工程師是當前各大企業都比較稀缺的人才，薪資待遇和就業前景都很不錯。不論是專業還是非專業，有基礎亦或是無基礎，都想通過學習Web前端實現高薪就業。不過，學習要一...

kviccn 2019-08-02 16:09 評論0 收藏0
js知識梳理6:關于函數的要點梳理(2)(作用域鏈和閉包)

摘要：在此例中，在匿名函數被返回后，它的作用域鏈初始化為包含函數的活動對象和全局變量對象。函數在執行完畢后，其活動對象也不會被銷毀，因為匿名函數的作用域鏈仍然在引用這個活動對象，結果就是只是的執行環境的作用域鏈會被銷毀，其活動對象會留在內存中。寫在前面注：這個系列是本人對js知識的一些梳理，其中不少內容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，...

aristark 2019-08-26 12:16 評論0 收藏0
js知識梳理5：關于函數的要點梳理(1)

摘要：構造函數調用會使用新創建的對象作為調用上下文。函數的參數相關可選形參當傳入的實參比函數聲明時指定的形參數量要少，剩下的形參都將設置為值實參多則會自動省略。它們的第一個實參是要調用函數的母對象，它是調用上下文，函數體內通過引用它。寫在前面注：這個系列是本人對js知識的一些梳理，其中不少內容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，感謝它們的...

付倫 2019-08-26 12:16 評論0 收藏0
JS開發中函數知識點梳理(三）

摘要：函數表達式的分類匿名函數表達式具名函數表達式自調用函數表達式函數表達式的用法使用來接偶函數名和函數體的耦合狀態。修改函數表達式代碼如下閉包我們知道，函數表達式是將匿名函數賦值給一個變量，作為變量的值，所以，匿名函數也可以作為的返回值。這篇文章要介紹的內容是函數表達，因為我個人比較喜歡使用函數表達式定義函數，所以就對它做了一些研究和整理。其實，說到函數表達式，就不得不說到定義函數的另一...

williamwen1986 2019-08-26 11:51 評論0 收藏0