文章閱讀(三)

Ajax語法淺析

原生Ajax

• 1.獲取XMLHttpRequest對象
• 2.參數配置
• 3.發送請求
• 4.監測狀態

還有onload、onloadstart、onprogress、onabort、ontimeout、onerror、onloadend等事件。

JavaScript深刻系列、JavaScript專題系列、ES6系列、React系列

JavaScript深刻之類數組對象與arguments

• 所謂的類數組對象:擁有一個 length 屬性和若干索引屬性的對象。
• 類數組對象的讀寫、獲取長度、遍歷三個方面與數組相似，可是類數組對象不可使用數組的方法。
• 調用數組方法：能夠用Function.call間接調用。
• 類數組轉對象：Array.prototype.slice.call(arrayLike); Array.prototype.splice.call(arrayLike, 0);Array.from(arrayLike);Array.prototype.concat.apply([], arrayLike)。
• Arguments對象就是一個類數組對象。在客戶端JavaScript中，一些DOM方法(document.getElementsByTagName())也返回類數組對象。
• Arguments對象：除了類數組的索引屬性和length屬性以外，還有一個callee屬性。

arguments對象的幾個注意要點：

• arguments和對應參數的綁定：傳入的參數，實參和arguments的值會共享，當沒有傳入時，實參與arguments值不會共享。除此以外，以上是在非嚴格模式下，若是是在嚴格模式下，實參和arguments是不會共享的。
• 傳遞參數：將參數從一個函數傳遞到另外一個函數。
• 強大的ES6：使用ES6的...運算符，咱們能夠輕鬆轉成數組。

應用：參數不定長、函數柯里化、遞歸調用、函數重載。

JavaScript深刻之繼承 

1.原型鏈繼承

• 問題1：引用類型的屬性被全部實例共享
• 問題2：在建立 Child 的實例時，不能向Parent傳參

2.借用構造函數

• 優勢1：避免了引用類型的屬性被全部實例共享
• 優勢2：能夠在 Child 中向 Parent 傳參
• 缺點：方法都在構造函數中定義，每次建立實例都會建立一遍方法。

3.組合繼承

• 優勢：融合原型鏈繼承和構造函數的優勢，是 JavaScript 中最經常使用的繼承模式。

4.原型式繼承：就是 ES5 Object.create 的模擬實現，將傳入的對象做爲建立的對象的原型

• 缺點：包含引用類型的屬性值始終都會共享相應的值，這點跟原型鏈繼承同樣。

5. 寄生式繼承：建立一個僅用於封裝繼承過程的函數，該函數在內部以某種形式來作加強對象，最後返回對象。

• 缺點：跟借用構造函數模式同樣，每次建立對象都會建立一遍方法。

6. 寄生組合式繼承

• 組合繼承最大的缺點是會調用兩次父構造函數
• 這種方式的高效率體現它只調用了一次Parent構造函數，而且所以避免了在 Parent.prototype 上面建立沒必要要的、多餘的屬性。與此同時，原型鏈還能保持不變；所以，還可以正常使用 instanceof 和 isPrototypeOf。開發人員廣泛認爲寄生組合式繼承是引用類型最理想的繼承範式。

Javascript的繼承與多態

JS正則表達式入門，看這篇就夠了 

正則表達式，又稱規則表達式。（英語：Regular Expression，在代碼中常簡寫爲regex、regexp或RE），計算機科學的一個概念。正則表一般被用來檢索、替換那些符合某個模式(規則)的文本。

使用方法：

第一步：定義一個正則表達式

• 第一種經過"/正則表達式/修飾符"這種形式直接寫出來
• 第二種經過「new RegExp('正則表達式'，'修飾符)'」建立一個RegExp對象。RegExp對象還有自帶的屬性
• 這裏須要注意的是,第二種方法中因爲字符串轉義問題，"\\"表明"\"。

第二步：調用RegExp對象中的方法

• test()：檢索字符串中指定的值。返回 true 或 false
• exec()：檢索字符串中指定的值。匹配成功返回一個數組，匹配失敗返回null。
• compile()：compile() 方法用於改變 RegExp。compile() 既能夠改變檢索模式，也能夠添加或刪除第二個參數。

如何寫一個正則表達式

正則表達式均可以拆成一個或多個（取值範圍+量詞）這樣的組合。針對每一個組合咱們根據JS正則表達式的規則翻譯一遍，而後將每一個組合從新拼接一下就行了。

正則表達式拓展

除了RegExp對象提供方法以外，String對象也提供了四個方法來使用正則表達式

• match()：在字符串內檢索指定的值,匹配成功返回存放匹配結果的數組，不然返回null。這裏須要注意的一點事，若是沒有設置全局匹配g，返回的數組只存第一個成功匹配的值
• search()：在字符串內檢索指定的值,匹配成功返回第一個匹配成功的字符串片斷開始的位置，不然返回-1
• replace()：替換與正則表達式匹配的子串，並返回替換後的字符串。在不設置全局匹配g的時候，只替換第一個匹配成功的字符串片斷
• split()：把一個字符串分割成字符串數組

JavaScript深刻之new的模擬實現

new運算符建立了一個用戶自定義對象類型或者一個內置對象類型的實例，該實例具備一個constructor函數。

new以後，實例就能夠訪問到構造函數裏的屬性，也能夠訪問到原型對象prototype中的屬性。

function objectFactory() {
    var obj = new Object(),
    Constructor = [].shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj, arguments);
    return obj;
};

返回值效果實現

• 構造函數返回了一個對象，在實例person中只能訪問返回的對象中的屬性。
• 返回一個基本類型的值，則至關於沒有返回值進行處理。

因此咱們還須要判斷返回的值是否是一個對象，若是是一個對象，咱們就返回這個對象，若是沒有，咱們該返回什麼返回什麼。

JavaScript深刻之bind的模擬實現

bind()方法會建立一個新函數。當這個新函數被調用時，bind()的第一個參數將做爲它運行時的 this, 以後的一序列參數將會在傳遞的實參前傳入做爲它的參數。(來自於MDN)。

由此咱們能夠首先得出bind函數的兩個特色：返回一個函數；能夠傳入參數。

返回函數的模擬實現

關於指定this的指向，咱們可使用call或者apply實現

Function.prototype.bind2 = function (context) {
    var self = this;
    return function () {
        self.apply(context);
    }
}

傳參的模擬實現

在bind的時候，能夠傳參；執行bind返回的函數的時候，也能夠傳參。

能夠用arguments對象進行模擬。

構造函數效果的模擬實現

bind還有一個特色，就是：一個綁定函數也能使用new操做符建立對象：這種行爲就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。也就是說當bind返回的函數做爲構造函數的時候，bind時指定的this值會失效，但傳入的參數依然生效。

因此咱們能夠經過修改返回的函數的原型來實現。

構造函數效果的優化實現