JavaScript中的函數(shù)

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

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

函數(shù)類型

函數(shù)實際上是對象，因為每個函數(shù)都是Function這個構(gòu)造函數(shù)的實例，具有Funtion構(gòu)造函數(shù)定義的屬性和方法。函數(shù)名實際上時指向函數(shù)對象的指針，說明這個問題，看如下代碼：

    function sum(a,b) {
        return a + b;
    }
    // 相當于把sum的引用地址傳遞給sum2。
    // 注意：不帶圓括號的函數(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. 沒有重載

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

2.函數(shù)提升

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

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

因為函數(shù)名本身是變量，所以可以作為值進行傳遞，這里有一個很好的例子，也是一個很好的編程思想，如下：

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

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

// 規(guī)定利用哪個屬性進行排序，如果不填則代表數(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 {    // 如果排序的是對象的屬性則用該方法
            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ù)是個函數(shù)，用于將數(shù)組進行重排序。而我們將這個函數(shù)參數(shù)拿出來，就可以更直觀的、復用性更高的去編寫這個函數(shù)，達到我們想要的效果。同時需要仔細揣摩，理解函數(shù)返回函數(shù)的精髓和獨到之處

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

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

arguments

this

arguments

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

this

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

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

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

caller

es5新加的，他返回當前函數(shù)(必須是函數(shù)，對象不行)的調(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ù)的屬性和方法

因為函數(shù)也是對象，所以也有屬性和方法；函數(shù)里面有l(wèi)ength和prototype兩個屬性，length指傳入形參的個數(shù)
function add(num1,num2) {} console.log(add.length) // 2

propertype(回頭好好研究一番)

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

apply() 和 call()

兩個參數(shù)，第一個參數(shù)是在哪個作用域運行，第二個參數(shù)apply是傳入的Array或者arguments對象，call是傳入每個值，其余他倆一模一樣。這是其中一個例子，用來說明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

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

bind方法

bind方法用來構(gòu)建一個函數(shù)的實例，其this對象指向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云服務器云服務器 javascript中的函數(shù) javascript中的 php中的變量函數(shù) java中的根號函數(shù)

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96558.html

發(fā)表評論

登陸后可評論

0條評論

red_bricks

男|高級講師

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

TA的文章

keras和tensorflow對應版本

閱讀 3798·2023-04-26 02:00
如何通過堡壘機訪問服務器？堡壘機無法訪問服務器怎么辦？

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

閱讀 1776·2021-08-03 14:03
點擊一列顯示其index的三種方法

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

閱讀 3186·2019-08-29 12:30
那些很熟卻又不是很熟的知識

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

JavaScript中的函數(shù)

相關(guān)文章

JavaScript深入淺出

JS程序

**學習React之前你需要知道的的JavaScript基礎知識**

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

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

發(fā)表評論

0條評論

red_bricks

男|高級講師

TA的文章

keras和tensorflow對應版本

如何通過堡壘機訪問服務器？堡壘機無法訪問服務器怎么辦？

SugarHosts：糖果主機12周年活動/全場虛擬主機低至5折/可選香港、中美極速專線等/三年付每

點擊一列顯示其index的三種方法

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

那些很熟卻又不是很熟的知識

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

jQuery 全選和反選demo

最新活動

資訊專欄INFORMATION COLUMN

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

JavaScript中的函數(shù)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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