首頁 > web前端 > js教程 > 主體

JavaScript函數怎麼用?JavaScript函數的屬性和方法的介紹

不言
發布: 2018-08-03 17:19:30
原創
1629 人瀏覽過

JavaScript函數是什麼? JavaScript中的函式其實是對象,因為每個函式都是Function這個建構子的實例,具有Funtion建構子定義的屬性和方法。下面我們就來具體看看JavaScript函數的屬性和方法的介紹。

函數名稱其實是指向函數物件的指針,看如下程式碼:

    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規定的作用域。

例如:

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue
登入後複製
相關文章建議:

javascript函數


Javascript 普通函數與建構函數的差異


JavaScript中函數宣告、呼叫詳解

以上是JavaScript函數怎麼用?JavaScript函數的屬性和方法的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板