JS函數(shù)知識點梳理

mgckid 發(fā)布于2019-08-22 15:10 / 3251人閱讀

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

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

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

函數(shù)的分類

普通函數(shù)

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

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

匿名函數(shù)

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

立即執(zhí)行函數(shù)示例代碼如下：

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

閉包示例代碼如下：

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

高級函數(shù)

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

偏函數(shù)

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

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

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

箭頭函數(shù)

箭頭函數(shù)不綁定自己的this，arguments，super。所以它不適合做方法函數(shù)，構造函數(shù)，也不適合用call,apply改變this。但它的特點就是更短，和解決匿名函數(shù)中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，使用箭頭函數(shù)
var robot = {
    name: "qq",
    print: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 300)
    } 
};

想了解更多箭頭函數(shù)可以看MDN

函數(shù)的參數(shù)

傳入明確的參數(shù)

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}): "";
}

省略參數(shù)，參數(shù)默認值

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

對象參數(shù)

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

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

對象參數(shù)比較常見，常出現(xiàn)在jQuery插件，vue插件等中。

可選參數(shù)

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

ES6中的函數(shù)參數(shù)

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

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

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

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

解構參數(shù)

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   (默認值為對象本身)

函數(shù)的返回值

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

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

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

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源碼。

返回值為函數(shù)

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

參考文章

JS: How can you accept optional parameters?

Named and Optional Arguments in JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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