JavaScript中的函數

red_bricks 發布于2019-08-23 10:39 / 3458人閱讀

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

函數類型

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

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

1. 沒有重載

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

2.函數提升

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

3.作為值的函數

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

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

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

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

    return function (val1, val2) {
        if (compareProperty === undefined) {  // 如果排序的是數組的值，則用常規的方法
            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函數的參數是個函數，用于將數組進行重排序。而我們將這個函數參數拿出來，就可以更直觀的、復用性更高的去編寫這個函數，達到我們想要的效果。同時需要仔細揣摩，理解函數返回函數的精髓和獨到之處

4.函數內部屬性

函數內部有兩個特殊變量

arguments

this

arguments

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

this

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

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

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

caller

es5新加的，他返回當前函數(必須是函數，對象不行)的調用環境，如果調用環境是全局，則返回null。有兩種用法，一種是函數名加caller，一種是arguments.callee.caller

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

5.函數的屬性和方法

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

propertype(回頭好好研究一番)

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

apply() 和 call()

兩個參數，第一個參數是在哪個作用域運行，第二個參數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一個最大的作用是實現了對象和方法的解耦

bind方法

bind方法用來構建一個函數的實例，其this對象指向bind規定的作用域。e.g:

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

云服務器 GPU云服務器 javascript中的函數 javascript中的 php中的變量函數 java中的根號函數

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

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

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
深入理解JavaScript，這一篇就夠了

摘要：也就是說，所有的函數和構造函數都是由生成，包括本身。如果只考慮構造函數和及其關聯的原型對象，在不解決懸念的情況下，圖形是這樣的可以看到，每一個構造函數和它關聯的原型對象構成一個環，而且每一個構造函數的屬性無所指。前言　　JavaScript 是我接觸到的第二門編程語言，第一門是 C 語言。然后才是 C++、Java 還有其它一些什么。所以我對 JavaScript 是非常有感情的，畢...

villainhr 2019-08-26 17:04 評論0 收藏0