讀js純粹筆記

柯藍僧人發表於2019-03-10

自我介紹

我叫陳琨,是一名即將頂崗實習的大專生,完事。

筆記主題

函式

無論你的團隊用的是三大主流框架的哪一個,寫函式應該是必不可少的事情了,廢話不多說,直接進入正題吧,函式的呼叫模式。這是js純粹的第四章把內容的部分。呼叫一個函式會暫停當前函式的執行,傳遞控制權和引數該新函式。除了生命時定義的形式引數,每個函式還接收兩個附加的引數:this和arguments。引數this在物件導向程式設計中非常重要,他的值取決於呼叫的模式。在js中有四種呼叫模式:方法呼叫模式、函式呼叫模式、構造器呼叫模式和apply呼叫模式。這些模式在如何初始化關鍵引數this上存在差異。呼叫運算子是跟在任何產生一個函式值的表示式之後的一對圓括號。圓括號內科包含零個或多個用逗號隔開的表示式。每個表示式產生一個引數值。每個引數值被賦予函式宣告時定義的形式引數名。當實際引數(arguments)的個數與形式引數的個數不匹配時,不會導致執行時錯誤。如果實際引數值過多了,超出的引數值會被忽略。如果實際引數值過少,缺失的值會被替換為undefined。對引數值不會進行型別檢查;任何型別的值都可以被傳遞=給任何引數。

方法呼叫模式

當一個函式被儲存為物件的一個屬性時,我們稱它為一個方法。當一個方法被呼叫時,this被繫結到該物件。如果呼叫表示式包含一個提取屬性的動作,那麼它就是被當做一個方法來呼叫。
var obj = {
    value: 0,
    add: function (num) {
        this.value += typeof num === 'number' ? num : 1;
    }
};
obj.add()  //1
obj.add(2) //3

複製程式碼
方法可以使用this訪問自己所屬的物件,所以它能從物件中取或對物件進行修改。this到物件的繫結發生在呼叫的時候。這個超級延遲繫結使得函式可以對this高度複用。通過this可取得他們所屬的上下文的方法稱為公共方法。

函式呼叫模式

當一個函式並非一個物件的屬性時,那麼它就是被當做一個函式來呼叫的,以此模式呼叫函式時,this被繫結到全域性物件。這是一個語言設計錯誤。應該是當內部函式被呼叫時,this應該任然繫結到外部函式的this變數。這個設計錯誤的後果就是方法不能利用內部函式來幫助它工作,因為內部函式的this被繫結了錯誤的值,所以不能共享該方法對物件的訪問權。幸運的是,有一個很容易的解決方案:如果該方法定義一個變數並給它賦值this,那麼內部函式就可以通過那個變數訪問到this,那麼內部函式就可以通過那麼變數訪問到this。按照約定,把那個變數命名為that.
var add = function (a,b) {
    return a+b;
}
obj.foo = function () {
    var that = this;
    var help = function () {
        that.value = add(that.value,that.value);
    }
    help()
}
obj.foo() // 6
複製程式碼

構造器呼叫模式

js是一門基於原型繼承的語言。這意味著物件可以直接從其他物件繼承屬性。該語言是無型別的。如果在一個函式面前帶上new來呼叫,那麼背地裡將會建立一個連線到該函式的prototype新成員的新物件,同時this會被繫結到那個新物件上。
new字首也會改變return語句的行為。我們將會在後面看到更多的相關內容。
var Quo = function (string) {
    this.status = string
}
Quo.prototype.get_status = function () {
    return this.status;
}
var myQuo = new Quo("amaing");
console.log(myQuo.get_status()) // amaing
複製程式碼
一個函式,如果建立的目的就是希望結合new字首來呼叫,那它就被稱為構造器函式,按照約定,他們儲存在以大寫格式命名的變數裡。如果呼叫構造器函式時沒有在前面加上new,可能會發生非常糟糕的事情,既沒有編譯時警告,也沒有執行時警告,所以大寫約定非常重要。

apply呼叫模式

因為js是一門函式式的物件導向程式語言,所以函式可以擁有方法。apply方法讓我們構建一個引數陣列傳遞給呼叫函式。它也允許我們選擇this的值。apply方法接收兩個引數,一個是this的值,另一個是引數陣列

var arr = [3,4];
var sum = add.apply(null,arr) //7

var statusObj = {
    status: 'zh'
}
var status = Quo.prototypr.get_status.apply(statusObj)
複製程式碼

說明

一方面為了加深印象,另一方面是為了方便上課無聊可以翻翻覆習一下。

相關文章