JS函數(shù)知識(shí)點(diǎn)梳理

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

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

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

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

函數(shù)的分類

普通函數(shù)

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

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

匿名函數(shù)

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

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

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

閉包示例代碼如下：

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

高級(jí)函數(shù)

高級(jí)函數(shù)就是可以把函數(shù)作為參數(shù)和返回值的函數(shù)。如上面的閉包。ECMAScript中也提供大量的高級(jí)函數(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");

相信，研究過(guò)vue.js等常見(jiàn)庫(kù)源碼的同學(xué)不會(huì)陌生吧。

箭頭函數(shù)

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

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對(duì)象

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

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

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

對(duì)象參數(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
}

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

可選參數(shù)

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

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

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

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

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

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

解構(gòu)參數(shù)

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

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

函數(shù)的返回值

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

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

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

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"

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

返回值為函數(shù)

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

參考文章

JS: How can you accept optional parameters?

Named and Optional Arguments in JavaScript

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

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

GPU云服務(wù)器云服務(wù)器梳理多云管理平臺(tái)調(diào)研,流程梳理 js核心知識(shí) js知識(shí)圖

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93236.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mgckid

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

關(guān)于ADC芯片的選型

閱讀 3532·2021-09-27 13:35
前端用戶體驗(yàn)優(yōu)化： JS & CSS 各類效果代碼段

閱讀 3571·2019-08-29 17:09
Vue官網(wǎng)todoMVC示例

閱讀 2450·2019-08-26 11:30
JavaScript中簡(jiǎn)單的實(shí)現(xiàn)動(dòng)畫(huà)緩存效果

閱讀 711·2019-08-26 10:32
Vue全家桶高仿網(wǎng)易云音樂(lè)mac客戶端版（不像賠十個(gè)?。。?/a>

閱讀 545·2019-08-26 10:23

利用 Canvas 繪畫(huà)一個(gè)未閉合的帶進(jìn)度條的圓環(huán)

閱讀 1206·2019-08-26 10:20
call&apply&bind的js實(shí)現(xiàn)以及應(yīng)用

閱讀 3160·2019-08-23 15:26
解決圖片顯示 Exif.js更改圖片的顯示方向

閱讀 3571·2019-08-23 14:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS函數(shù)知識(shí)點(diǎn)梳理

相關(guān)文章

**好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識(shí)梳理匯總**

**好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識(shí)梳理匯總**

**js知識(shí)梳理6:關(guān)于函數(shù)的要點(diǎn)梳理(2)(作用域鏈和閉包)**

**js知識(shí)梳理5：關(guān)于函數(shù)的要點(diǎn)梳理(1)**

**JS開(kāi)發(fā)中函數(shù)知識(shí)點(diǎn)梳理(三）**

發(fā)表評(píng)論

0條評(píng)論

mgckid

男|高級(jí)講師

TA的文章

關(guān)于ADC芯片的選型

前端用戶體驗(yàn)優(yōu)化： JS & CSS 各類效果代碼段

Vue官網(wǎng)todoMVC示例

JavaScript中簡(jiǎn)單的實(shí)現(xiàn)動(dòng)畫(huà)緩存效果

Vue全家桶高仿網(wǎng)易云音樂(lè)mac客戶端版（不像賠十個(gè)?。。?/a>

利用 Canvas 繪畫(huà)一個(gè)未閉合的帶進(jìn)度條的圓環(huán)

call&apply&bind的js實(shí)現(xiàn)以及應(yīng)用

解決圖片顯示 Exif.js更改圖片的顯示方向

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS函數(shù)知識(shí)點(diǎn)梳理

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！