JavaScript中的函數(shù)

red_bricks 發(fā)布于2019-08-23 10:39 / 3462人閱讀

摘要：函數(shù)類型函數(shù)實(shí)際上是對(duì)象，因?yàn)槊總€(gè)函數(shù)都是這個(gè)構(gòu)造函數(shù)的實(shí)例，具有構(gòu)造函數(shù)定義的屬性和方法。而我們將這個(gè)函數(shù)參數(shù)拿出來，就可以更直觀的復(fù)用性更高的去編寫這個(gè)函數(shù)，達(dá)到我們想要的效果。

函數(shù)類型

函數(shù)實(shí)際上是對(duì)象，因?yàn)槊總€(gè)函數(shù)都是Function這個(gè)構(gòu)造函數(shù)的實(shí)例，具有Funtion構(gòu)造函數(shù)定義的屬性和方法。函數(shù)名實(shí)際上時(shí)指向函數(shù)對(duì)象的指針，說明這個(gè)問題，看如下代碼：

    function sum(a,b) {
        return a + b;
    }
    // 相當(dāng)于把sum的引用地址傳遞給sum2。
    // 注意：不帶圓括號(hào)的函數(shù)名是訪問函數(shù)指針，而非調(diào)用函數(shù)
    var sum2 = sum; 
    sum2(1,2) // 3
    sum = null;
    sum(2,3) // undefined // 將sum的內(nèi)存回收，即sum的引用地址變了
    sum2(2,3) //5 // 但sum2 還是指向原來的內(nèi)存地址

1. 沒有重載

理解了上面之后，重載相當(dāng)于給函數(shù)變量重新修改了引用的值，因此后面會(huì)覆蓋前面的，很容易理解了。

2.函數(shù)提升

其實(shí)和變量提升類似，就是聲明型函數(shù)和表達(dá)式定義函數(shù)的區(qū)別，很簡單

3.作為值的函數(shù)

因?yàn)楹瘮?shù)名本身是變量，所以可以作為值進(jìn)行傳遞，這里有一個(gè)很好的例子，也是一個(gè)很好的編程思想，如下：

function getSomeFunction(fn,arg) {
    return fn(arg);
} 
function add(num) {
    return num + 10;
}
function getGreeting(name) {
    return `Hello ${name}`;
}
getSomeFunction(add,5) // 15
getSomeFunction(getGreeting,"andy") // Hello andy

還可以從一個(gè)函數(shù)中返回另一個(gè)函數(shù)。例如我們?cè)谟脭?shù)組的一些排序方法或者迭代方法的時(shí)候，因?yàn)閭鬟f進(jìn)去的都是一個(gè)函數(shù)變量作為參數(shù)，所以這個(gè)參數(shù)我們可以用“外部函數(shù)返回函數(shù)”的方法進(jìn)行編寫，這樣做的好處是，返回的函數(shù)可以把我們”特定想要規(guī)定”的參數(shù)傳遞進(jìn)去進(jìn)行計(jì)算，例如

// 規(guī)定利用哪個(gè)屬性進(jìn)行排序，如果不填則代表數(shù)組從大到小排序
function sortArgFuntion(compareProperty) { //compareProperty是上文中特定想要規(guī)定的參數(shù)

    return function (val1, val2) {
        if (compareProperty === undefined) {  // 如果排序的是數(shù)組的值，則用常規(guī)的方法
            if (val1 > val2) {
                return 1;
            } else if (val1 < val2) {
                return -1;
            } else {
                return 0;
            }
        } else {    // 如果排序的是對(duì)象的屬性則用該方法
            if (val1[compareProperty] > val2[compareProperty]) {
                return 1;
            } else if (val1[compareProperty] < val2[compareProperty]) {
                return -1;
            } else {
                return 0;
            }
        }

    }
}
var data = [{
    name: "andy",
    age: 25
}, {
    name: "Nf",
    age: 29
}]
data.sort(sortArgFuntion("name"))

sort函數(shù)的參數(shù)是個(gè)函數(shù)，用于將數(shù)組進(jìn)行重排序。而我們將這個(gè)函數(shù)參數(shù)拿出來，就可以更直觀的、復(fù)用性更高的去編寫這個(gè)函數(shù)，達(dá)到我們想要的效果。同時(shí)需要仔細(xì)揣摩，理解函數(shù)返回函數(shù)的精髓和獨(dú)到之處

4.函數(shù)內(nèi)部屬性

函數(shù)內(nèi)部有兩個(gè)特殊變量

arguments

this

arguments

是類數(shù)組對(duì)象，何為類數(shù)組對(duì)象呢？可以通過序號(hào)進(jìn)行數(shù)組式的訪問（如obj[1]），并且有l(wèi)ength屬性(對(duì)象你不定義length屬性，是沒有l(wèi)ength的).類數(shù)組只有索引值和長度，沒有數(shù)組的各種方法，所以如果要類數(shù)組調(diào)用數(shù)組的方法，就需要使用Array.prototype.method.call 來實(shí)現(xiàn)

this

this是JavaScript非常容易混淆和復(fù)雜的一個(gè)知識(shí)點(diǎn)，他代表什么完全取決于調(diào)用位置，我會(huì)但列出一篇總結(jié)this。e.g:

window.color = "red";
var o = {color:"blue"};
function sayColor() {
    console.log(this.color)
}
sayColor(); // red 因?yàn)檎{(diào)用位置是全局
o.sayColor = sayColor;
o.sayColor(); // blue 因?yàn)檎{(diào)用位置是o的對(duì)象里

從上面例子中我們要知道，函數(shù)名字僅僅是一個(gè)指針，雖然執(zhí)行環(huán)境不同，全局的sayColor()和函數(shù)中的o.sayColor()指向的都是同一個(gè)函數(shù)

caller

es5新加的，他返回當(dāng)前函數(shù)(必須是函數(shù)，對(duì)象不行)的調(diào)用環(huán)境，如果調(diào)用環(huán)境是全局，則返回null。有兩種用法，一種是函數(shù)名加caller，一種是arguments.callee.caller

    function outer() {
        console.log(outer.caller); //null
        inner();
    };
    function inner() {
        console.log(inner.caller); // outer里的代碼
    }

5.函數(shù)的屬性和方法

因?yàn)楹瘮?shù)也是對(duì)象，所以也有屬性和方法；函數(shù)里面有l(wèi)ength和prototype兩個(gè)屬性，length指?jìng)魅胄螀⒌膫€(gè)數(shù)
function add(num1,num2) {} console.log(add.length) // 2

propertype(回頭好好研究一番)

對(duì)于引用類型而言，propertype是保存所有實(shí)例方法的真正所在。在創(chuàng)建自定義引用類型以及實(shí)現(xiàn)繼承，它的作用及其關(guān)鍵(到底多關(guān)鍵暫時(shí)還不太理解，尤其是繼承這個(gè)詞:)) es5中propertype不可枚舉，因此不能遍歷。

apply() 和 call()

兩個(gè)參數(shù)，第一個(gè)參數(shù)是在哪個(gè)作用域運(yùn)行，第二個(gè)參數(shù)apply是傳入的Array或者arguments對(duì)象，call是傳入每個(gè)值，其余他倆一模一樣。這是其中一個(gè)例子，用來說明apply和call的作用：

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    sayColor(); // red
    sayColor.call(this); // red 
    sayColor.call(window); // red
    sayColor.call(o); // blue

如果不用call的話我們需要這樣做：

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    o.sayColor = sayColor;
    o.sayColor(); //blue

所以對(duì)比可以一目了然，call一個(gè)最大的作用是實(shí)現(xiàn)了對(duì)象和方法的解耦

bind方法

bind方法用來構(gòu)建一個(gè)函數(shù)的實(shí)例，其this對(duì)象指向bind規(guī)定的作用域。e.g:

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue

GPU云服務(wù)器云服務(wù)器 javascript中的函數(shù) javascript中的 php中的變量函數(shù) java中的根號(hào)函數(shù)

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

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

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

登陸后可評(píng)論

0條評(píng)論

red_bricks

男|高級(jí)講師

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

TA的文章

keras和tensorflow對(duì)應(yīng)版本

閱讀 3502·2023-04-26 02:00
如何通過堡壘機(jī)訪問服務(wù)器？堡壘機(jī)無法訪問服務(wù)器怎么辦？

閱讀 3095·2021-11-22 13:54
SugarHosts：糖果主機(jī)12周年活動(dòng)/全場(chǎng)虛擬主機(jī)低至5折/可選香港、中美極速專線等/三年付每

閱讀 1707·2021-08-03 14:03
點(diǎn)擊一列顯示其index的三種方法

閱讀 719·2019-08-30 15:52
如何在沒有實(shí)際項(xiàng)目經(jīng)驗(yàn)的情況下找到工作

閱讀 3098·2019-08-29 12:30
那些很熟卻又不是很熟的知識(shí)

閱讀 2429·2019-08-26 13:35
HTML5使用canvas實(shí)現(xiàn)截圖，上傳七?？臻g，自定義KEY參數(shù)

閱讀 3375·2019-08-26 13:25
jQuery 全選和反選demo

閱讀 3011·2019-08-26 11:39

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

資訊專欄INFORMATION COLUMN

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

JavaScript中的函數(shù)

相關(guān)文章

JavaScript深入淺出

JS程序

**學(xué)習(xí)React之前你需要知道的的JavaScript基礎(chǔ)知識(shí)**

JavaScript中的面向?qū)ο螅╫bject-oriented）編程

**深入理解JavaScript，這一篇就夠了**

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

0條評(píng)論

red_bricks

男|高級(jí)講師

TA的文章

keras和tensorflow對(duì)應(yīng)版本

如何通過堡壘機(jī)訪問服務(wù)器？堡壘機(jī)無法訪問服務(wù)器怎么辦？

SugarHosts：糖果主機(jī)12周年活動(dòng)/全場(chǎng)虛擬主機(jī)低至5折/可選香港、中美極速專線等/三年付每

點(diǎn)擊一列顯示其index的三種方法

如何在沒有實(shí)際項(xiàng)目經(jīng)驗(yàn)的情況下找到工作

那些很熟卻又不是很熟的知識(shí)

HTML5使用canvas實(shí)現(xiàn)截圖，上傳七?？臻g，自定義KEY參數(shù)

jQuery 全選和反選demo

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

JavaScript中的函數(shù)

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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