重讀JavaScript高級程序設計

時間 2020-06-29

標籤重讀 javascript 高級程序設計欄目 JavaScript 简体版

原文原文鏈接

不斷更新中～～～前端

第三章基本概念

　　一、變量聲明但未初始化值是undefined，而未聲明的變量只能執行typeof操做，而且未初始化和未聲明用typeof都一樣返回undefinedjava

　　二、Number()、parseInt()和parseFloat()的區別：node

　　　　（1）Number()能夠用於任何數據類型，parseInt()和parseFloat()專門用於把字符串轉成數值正則表達式

　　　　（2）Number()轉換空字符返回0，parseInt()和parseFloat()則轉換爲NaN數組

　　　　（3）Number()只有在字符串爲純數值時才能轉換爲數值，parseInt()和parseFloat()只有遇到非數字字符時才中止轉換瀏覽器

　　　　（4）parseInt()解析八進制字符串，ECMAScript3和5存在分歧，ECAMScript3會將八進制轉換爲十進制，ECMAScript5則會認爲前導的0無效，直接獲得十進制數值。因此爲了消除以上困惑，parseInt()提供了第二個參數（轉換時使用的基數，即多少進制），如parseInt('070', 8) //按八進制解析服務器

　　　　（5）parseFloat()始終都會忽略前導的0，parseFloat()只解析十進制，解析十六進制字符串時會返回0，若是字符串包含的是可解析爲整數的數，parseFloat()會返回整數，如parseFloat('1234abc') //1234　　parseFloat('3.125e7') //31250000閉包

　　三、把一個值轉換爲字符串的方法有toString()和String()，null和undefined沒有toString()方法，String()能夠將任意數據類型轉換爲字符串，還能夠用 + ""的方法轉換字符串app

　　四、若是不給構造函數傳遞參數，則能夠省略括號 var o = new Object //有效但不推薦函數

　　五、對非數值應用一元加（+）或一元減（-）操做符時會調用Number()轉型函數對值進行轉換

　　六、能夠用'!!'來模擬Boolean()函數轉換布爾值

　　七、switch語句中case的值不必定是常量，能夠是變量或表達式

　　八、函數不介意傳進多少參數，由於js中的參數在內部是用一個數組表示的，函數接受到的始終是這個數組，不關心數組中有哪些參數。在函數體內能夠用arguments對象來訪問這個參數數組。js函數的一個重要特色：命名的參數只提供便利，但不是必須的。arguments對象能夠與命名參數一塊兒使用，而且它的值與命名參數的值保持同步（但它們的內存空間是獨立的），若是隻傳入一個參數，那麼arguments[1]設置的值不會反映到命名參數中，由於argumens對象的長度是由傳入的參數個數決定的，而不是命名參數的個數決定的。沒有傳遞值的命名參數被賦予undefined

第四章變量、做用域和內存問題

　　一、當某個函數被調用時，會建立一個執行環境(execution context)及相應的做用域鏈。而後，使用 arguments 和其餘命名參數的值來初始化函數的活動對象(activation object)。但在做用域鏈中，外部函數的活動對象始終處於第二位，外部函數的外部函數的活動對象處於第三位，......直至做爲做用域鏈終點的全局執行環境。

　　　後臺的每一個執行環境都有一個表示變量的對象——變量對象。全局環境的變量對象始終存在，而像函數這樣的局部環境的變量對象，則只在函數執行的過程當中存在。

　　　在建立 compare()函數 10 時，會建立一個預先包含全局變量對象的做用域鏈，這個做用域鏈被保存在內部的[[Scope]]屬性中。當調用 compare()函數時，會爲函數建立一個執行環境，而後經過複製函數的[[Scope]]屬性中的對象構建起執行環境的做用域鏈。此後，又有一個活動對象(在此做爲變量對象使用)被建立並被推入執行環境做用域鏈的前端。

　　　顯然，做用域鏈本質上是一個指向變量對象的指針列表，它只引用但不實際包含變量對象。

　　　不管何時在函數中訪問一個變量時，就會從做用域鏈中搜索具備相應名字的變量。通常來說，當函數執行完畢後，局部活動對象就會被銷燬，內存中僅保存全局做用域(全局執行環境的變量對象)。可是，閉包的狀況又有所不一樣

　　二、把函數外部的值複製給函數內部的參數，就和把值從一個變量複製到另外一個變量同樣，基本類型值的傳遞如同基本類型變量的複製同樣，引用類型值的傳遞如同引用類型變量的複製同樣。就是基本類型傳遞值的是值自己，引用類型傳遞的值是地址（指針）

　　三、複製保存着對象的某個變量（引用類型）時，操做的是對象的引用。但在爲對象添加屬性時，操做的是實際的對象（內存空間）

　　四、typeof用於檢測基本數據類型，instanceof檢測引用數據類型

第五章引用類型

　　一、使用對象字面量時，數值屬性名會自動轉換爲字符串。

　　二、若是設置某個值的索引超過了數組現有項數，則會在數組後面添加一項。數組的length屬性不是隻讀的，經過設置length能夠從數組的末尾移除項或向數組中添加新項。當把一個值放在超出當前數組大小的位置上時，數組就會從新計算其長度值，即長度值等於最後一項的索引加1

　　三、檢測數組的方法：instanceof或Array.isArray()（IE9+）

　　四、數組轉換成字符串的方法：toString()、toLocaleString()和join()，若是數組中的某一項是null或undefined，轉換後是空字符串

　　五、數組有5個迭代方法：every()、filter()、forEach()、map()和some()。every()和some()都用於查詢數組中的項是否知足某個條件，every()是數組裏每一項都知足條件，這個方法才返回true，some()是隻要有一項知足條件，就會返回true。forEach()沒有返回值和for迭代同樣，filter()返回知足條件的數組，map()返回對每一項進行操做後的數組

　　六、數組的歸併方法：reduce()和reduceRight()，reduce()是從數組第一項逐個遍歷到最後，reduceRight()是從數組最後一項逐個向前遍歷

　　七、Date()構造函數接受的參數爲表示該日期的毫秒數，js提供了兩個方法Date.parse()和Date.UTC()，簡化這一過程。Date.now()返回調用這個方法時的日期和時間的毫秒數（IE9+），使用+Date()也能達到一樣目的。經常使用的日期格式化方法：toDateString()、 toLocaleDateString()、 toTimeString()和toLocaleTimeString()

　　八、ECMAScript5中規定，使用正則表達式字面量就像直接調用RegExp構造函數同樣，每次都建立新的RegExp實例

　　九、RegExp實例方法：

　　　　（1）exec()：返回一個數組，數組第一項是匹配的字符串，第二項是第一個捕獲組匹配的字符串，第三項是第二個捕獲組匹配的字符串等。exec只會返回一個匹配項。不設置全局標誌的狀況下，屢次調用exec始終返回第一個匹配項的信息；而設置全局標誌的狀況下，每次調用exec都會在字符串中繼續查找新匹配項

　　　　（2）test()：返回true或false

　　十、函數是對象，函數名是指針

　　十一、函數聲明和函數表達式的區別只在於函數聲明會進行函數聲明提高

　　十二、函數內部屬性：arguments對象和this對象。arguments對象有一個callee屬性，該屬性是一個指針，指向擁有這個arguments對象的函數。用arguments.callee能夠解決遞歸函數緊密耦合的問題

　　1三、函數的屬性和方法：

　　　　（1）兩個屬性：length和prototype，length屬性表示函數的命名參數的個數

　　　　（2）三個方法：apply()和call()，用途都是在特定的做用域中調用函數，apply()的第二個參數能夠是一個數組，也能夠是arguments。ECMAScript還定義了一個方法：bind()，這個方法會建立一個函數的實例，其this值會被綁定到傳給bind函數的值（var objectSayColor = sayColor.bind(o), objectSayColor()）

　　1四、基本包裝類型（特殊的引用類型）：Boolean、Number和String。

　　　　每當讀取一個基本類型值的時候，後臺就會建立一個基本包裝類型的對象，從而讓咱們可以調用一些方法來操做這些數據。

　　　　引用類型和基本包裝類型的主要區別是對象的生存期，自動建立的基本包裝類型的對象，則只存在於一行代碼執行的瞬間，而後當即被銷燬，這意味着咱們不能在運行時爲基本類型值添加屬性和方法。

　　　　對基本包裝類型的實例調用typeof會返回「object」。

　　　　可使用Object構造函數返回相應基本包裝類型的實例，如var obj = new Object('some str')。

　　　　用new調用基本包裝類型的構造函數，與直接調用同名的轉型函數是不同的

　　　　Number類型提供了將數值格式化爲字符串的方法：toFix()方法會按照指定的小數位返回數值的字符串表示，toExponential()方法返回以指數表示法（也稱e表示法）表示的數值的字符串形式，toPrecision()方法能夠返回數值最合適的格式

　　　　String類型：

　　　　（1）字符方法：charAt()和charCodeAt()。

　　　　（2）字符串操做方法：concat()接受任意多個參數，拼接字符串，slice()、substr()和substring()。slice()方法會將傳入的負值與字符串的長度相加，substr()方法將負的第一個參數加上字符串的長度，而將負的第二個參數轉換爲 0。最後，substring()方法會把全部負值參數都轉換爲 0。

　　　　（3）字符串位置方法：indexof()和lastIndexOf()。trim()刪除前置和後綴的全部空格並返回結果，還有trimLeft()和trimRight()。

　　　　（4）字符串大小寫轉換方法：toLowerCase()、toLocaleLowerCase()、toUpperCase()和 toLocaleUpperCase()

　　　　（5）字符串的模式匹配方法：match()、search()、replace()和split()，match()返回一個數組，search()返回字符串中第一個匹配項的索引，若是沒有找到匹配項則返回-1，split()第一個參數能夠是字符串也能夠是RegExp對象，有第二個可選的參數，用於指定數組的大小，以便確保返回的數組不會超過既定大小

　　　　（6）fromCharCode()，靜態方法，接受一或多個字符編碼，而後將它們轉換成一個字符串

　　1五、Global對象，不屬於其餘對象的屬性和方法，都是它的屬性和方法，如isNaN()、parseInt()。其餘方法：

　　　　（1）URI編碼方法（encodeURI()和encodeURIComponent()），有效的URI不能包含某些字符如空格，主要區別是encodeURI()不會對自己屬於 URI 的特殊字符進行編碼，例如冒號、正斜槓、問號和井字號;而 encodeURIComponent()則會對它發現的任何非標準字符進行編碼，因此encodeURI()主要用於整個URI，encodeURIComponent()主要用於URI的某一段。decodeURI()只能對encodeURI()替換的字符進行解碼，而decodeURIComponent()能夠解碼任意特殊字符的編碼

　　　　（2）eval()方法

　　　　（3）Global對象的屬性如undefined、NaN、Object、Function等

　　　　（4）window對象

第六章面向對象的程序設計

　　一、使用new操做符調用構造函數會經歷如下4個步驟：

　　　　（1）建立一個新對象

　　　　（2）將構造函數的做用域賦給新對象（所以this就指向了這個新對象）

　　　　（3）執行構造函數中的代碼（爲這個新對象添加屬性）

　　　　（4）返回新對象

　　二、每一個對象都有一個constructor（構造函數）屬性指向這個對象的構造函數

　　三、構造函數也是函數，函數能夠經過new操做符看成構造函數使用、做爲普通函數調用、在另外一個對象的做用域中調用

　　四、每一個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，這個對象的用途是包含實例所共享的屬性和方法

　　五、建立了自定義的構造函數以後，其原型對象默認只會取得constructor屬性，至於其餘方法都是從Object繼承而來。當用構造函數建立了一個新實例後，該實例的內部將包含一個指針（內部屬性[[Prototype]]）(能夠經過_proto_屬性代替內部屬性，由於內部屬性沒法訪問)，指向構造函數的原型對象

　　六、訪問實例對象的屬性或方法會執行兩次搜索，第一次是在實例自己中搜索，第二次是在原型上搜索，這也是多個實例對象共享原型所保存的屬性和方法的基本原理

　　七、delete用來刪除實例屬性

　　八、hasOwnProperty()能夠檢測一個屬性是存在實例中，仍是存在原型中，若是存在實例中返回true，不然返回false

　　九、in操做符能夠單獨使用或在for in循環中使用，單獨使用是在對象可以訪問給定屬性時返回true，不管屬性是實例屬性仍是原型屬性。in和hasOwnProperty()結合能夠肯定一個屬性是實例屬性仍是原型屬性

　　十、for in返回的是可以經過對象訪問的，可枚舉的屬性，既包括實例屬性也包括原型屬性；Object.keys()返回一個數組，包含全部可枚舉的實例屬性；Object.getOwnPropertyNames()返回全部實例屬性，不管是否能夠枚舉

　　十一、可使用對象字面量的方式重寫原型對象，但此時constructor屬性再也不指向當前構造函數，而指向Object構造函數，但能夠特地設置constructor的值爲當前構造函數，但這樣會致使constructor屬性變爲可枚舉的，因此能夠經過Object.defineProperty()重設constructor

　　十二、原型的動態性：實例儘管是在原型添加新方法以前建立的，可是實例仍然能夠訪問這個新方法，由於實例與原型的鏈接只是一個指針，而不是一個副本，因此仍然能訪問到新方法（跟訪問引用類型相似）。但若是原型是用對象字面量的方式重寫，實例又是在其以前建立，這時實例就找不到該方法了，由於調用構造函數會爲實例添加一個指向最初的原型的指針，而把原型修改成另一個對象就等於切斷了構造函數與最初原型之間的聯繫

　　1三、組合使用構造函數模式和原型模式的好處是：每一個實例有本身的一份實例屬性副本（假如屬性定義在原型中，該屬性又是引用類型，那麼會致使修改該屬性會使別的實例上的該屬性也被修改），方法又能夠共享，節約內存，同時還支持向構造函數傳遞參數

　　1四、繼承：

　　　　（1）原型鏈繼承：SubType.prototype = new SuperType() 原理：重寫原型對象，值爲父類的實例，這時SubType.protype成爲父類的實例，也就包含了父類的實例屬性和實例方法，而且也包含了一個指針（[[Prototype]]）指向父類的原型，所以也能夠訪問父類的原型屬性和原型方法。此時子類實例的constructor屬性指向父類，由於子類原型指向了父類原型，父類原型的constructor指向的是父類。經過實現原型鏈也擴大了原型搜索機制。

　　　　　　全部引用類型都默認繼承自Object，全部函數的默認原型都是Object的實例，所以默認原型都會包含一個內部指針，指向Object.prototype，這也正是全部自定義類型都會繼承toString()、valueOf()等默認方法的根本緣由

　　　　　　肯定原型和實例的關係：instanceof和isPrototypeOf()

　　　　　　經過原型鏈實現繼承時，不能使用對象字面量建立原型方法，由於這樣作會重寫原型鏈

　　　　　　原型鏈的問題：使用原型鏈繼承可能會繼承到父類的引用類型的實例屬性，這樣就可能會對別的子類實例產生影響，因此不多單獨用到原型鏈繼承

　　　　（2）借用構造函數繼承：在子類構造函數內部調用父類構造函數SuperType.call(this)，問題是沒法函數複用，因此也不多單獨使用借用構造函數

　　　　（3）組合繼承：用借用構造函數繼承實例屬性，用原型鏈繼承原型屬性和方法，最經常使用

第7章函數表達式

　　一、閉包是指有權訪問另外一個函數做用域中的變量的函數。閉包會將包含函數（外部函數）的活動對象添加到它的做用域鏈中，閉包被返回後，它的做用域鏈被初始化爲包含函數的活動對象和全局變量對象，當包含函數返回後，其執行環境的做用域鏈會被銷燬，但它的活動對象仍然會留存在內存中，直到閉包被銷燬後，包含函數的活動對象纔會被銷燬。

　　二、閉包的應用

　　　　function closure() {
            var arr = new Array();
            for (var i = 0; i < 10; i++) {
                arr[i] = function() {
                    return i;
                }
            }
            return arr;
        }

        function closure2() {
            var arr = new Array();
            for (var i = 0; i < 10; i++) {
                arr[i] = function(num) {
                    return function() {
                        return num;
                    }
                }(i)
            }
            return arr;
        }

　　三、每一個函數在被調用時都會自動取得兩個特殊的變量：this和arguments。內部函數在搜索這兩個變量時，只會搜索到其活動對象爲止，所以不可能訪問外部函數的這兩個變量。因此要想訪問做用域中的this和arguments對象，必須把對該對象的引用保存到閉包可以訪問的變量中

　　四、模仿塊級做用域：建立匿名函數自調用，由於變量是值的另外一種表現形式，因此用實際的值替換變量沒有問題，可是function(){}()這麼作會出錯，由於JavaScript 將 function 關鍵字看成一個函數聲明的開始，而函數聲明後面不能跟圓括號。然而，函數表達式的後面能夠跟圓括號。要將函數聲明轉換成函數表達式，只要給它加上一對圓括號便可(function() {})()

第8章 BOM

　　一、javaScript 是一個單線程序的解釋器，所以必定時間內只能執行一段代碼。爲了控制要執行的代碼，就有一個 JavaScript 任務隊列。這些任務會按照將它們添加到隊列的順序執行。setTimeout()的第二個參數告訴 JavaScript 再過多長時間把當前任務添加到隊列中。若是隊列是空的，那麼添加的代碼會當即執行;若是隊列不是空的，那麼它就要等前面的代碼執行完了之後再執行。

　　二、調用 setTimeout()以後，該方法會返回一個數值 ID，表示超時調用。這個超時調用 ID 是計劃執行代碼的惟一標識符，能夠經過它來取消超時調用。要取消還沒有執行的超時調用計劃，能夠調用 clearTimeout()方法並將相應的超時調用 ID 做爲參數傳遞給它

第10章 DOM

　　一、Array.prototype.slice.call(nodeList, 0)能夠將僞數組轉化爲數組，在IE中能夠用push方法枚舉到新數組中

　　二、Node類型：nodeType、nodeName、nodeValue；節點關係：childNodes、parentNode、firstChild、lastChild、previousSiblings、nextSiblings；節點操做：appendChild()、insertBefore()、replaceChild()、removeChild()；其餘方法：cloneNode([true])

　　三、Document類型：document.documentElement、document.body、document.title

第13章事件

　　一、js與HTML之間的交互是經過事件實現的。事件流是指從頁面中接受事件的順序。IE的事件流叫事件冒泡，Netscape提出的叫事件捕獲。DOM事件流包括事件捕獲階段、處於目標階段和事件冒泡階段

　　二、事件是用戶或瀏覽器自身執行的某種動做，如click、load都是事件的名字，而響應某個事件的函數叫事件處理程序，事件處理程序以「on」開頭

　　三、爲事件指定處理程序的方式有：

　　　（1）HTML事件處理程序（<input type="button" onclick="alert('click')"）

　　　（2）DOM0級事件處理程序（btn.onclick = function() { alert('click') }）,使用該方式指定的事件處理程序被認爲是元素的方法，所以，這時事件處理程序是在元素的做用域中運行，因此this指向當前元素。刪除事件處理程序：btn.onclick = null

　　　（3）DOM2級事件處理程序（btn.addEventListener('click', function() { alert('click') }, false)），第三個參數是true表示在捕獲階段調用事件處理程序，false表示在冒泡階段調用事件處理程序。好處是能夠爲一個事件添加多個事件處理程序。刪除事件處理程序：removeEventListener()參數必須和添加處理程序時的相同，這意味着添加的匿名函數沒法沒法移除，解決方法是用函數名代替匿名函數

　　最好是將事件處理程序添加到事件冒泡階段，這樣兼容性最好

　　　（4）IE事件處理程序（btn.attachEvent('onclick', function() { alert('click') })），該方式指定的事件處理程序會在全局做用域中運行，所以this等於window。該方式添加的多個事件處理程序執行順序是從後往前。刪除事件處理程序：btn.detachEvent()，參數要和attachEvent相同　　

　　四、在事件處理程序內部，this的值和currentTarget相等，而target指的是事件的實際目標

　　五、添加大量事件處理程序會致使性能問題。解決方案是事件委託，原理是事件冒泡，只指定一個事件處理程序，能夠管理某一類型的全部事件。因爲從文檔中移除帶有事件處理程序的元素時（removeChild、replaceChild或innerHTML），事件處理程序還保留在內存中，因此手動移除事件處理程序，事件委託也能夠解決這個問題，若是事先知道未來要刪除某個帶處理程序的元素，那麼就能夠把處理程序放到較高層次的元素

第14章表單腳本

　　一、表單類型（HTMLFormElement）的屬性和方法：action、method、name、reset()、submit()

　　二、提交表單：<input type="submit" />、<button type="submit"></button>、<input type="image" src="graph.gif"/>，以這種方式提交表單，瀏覽器會在請求發送給服務器以前觸發submit事件（onsubmit），這樣能夠有機會驗證表單數據，決定是否提交，阻止這個事件的默認行爲就能夠取消表單提交。還能夠用form.submit()提交表單，這種方式提交表單不會觸發submit事件

　　三、重置表單：<input type="reset"> 、<button type="reset">，用戶點擊重置按鈕時會觸發reset事件（onreset），阻止這個事件的默認行爲能夠取消表單重置。還能夠用form.reset()重置表單，與submit()不一樣，這種方式同樣會觸發重置事件

　　四、表單字段（元素）：每一個表單都有一個elements屬性，該屬性是表單中全部表單元素（字段）的集合。form.elements[0]取得表單的第一個字段，form.elements['color']取得名爲color的字段、form.elements.length取得表單中字段的數量

　　五、共有的表單字段屬性、方法和事件：

　　　　屬性：disabled、form(指向當前字段所屬表單)、name、readOnly、tabIndex、type和value（當前字段被提交給服務器的值），除了form屬性以外能夠經過js動態修改其餘屬性（field.disabled = true）

　　　　方法：focus()和blur()，HTML5新增屬性autofocus。默認狀況下，只有表單字段能夠得到焦點，對於其餘元素，若是將其tabIndex屬性設置爲-1，而後再調用focus()方法，也可讓這些元素獲取焦點

　　　　事件：blur、focus、change。當用戶改變了當前字段的焦點，或者調用focus()或blur()時，都會觸發focus或blur事件。對於<input>和<textarea>元素，當他們從獲取焦點到失去焦點且value發生改變的時候，纔會觸發change事件，對於<select>元素，當選擇了不一樣的選項就會觸發change事件

　　六、<input>元素的maxlength屬性能夠指定文本框能夠接受的最大字符數，<input>和<textarea>都支持select()方法，這個方法用於選擇文本框的全部文本，調用select()方法會觸發select事件

　　七、取得選擇的文本：

　　　　（1）HTML5提供了兩個屬性：selectionStart和selectionEnd。(IE9+)能夠用substring(input.selectionStart, input.selectionEnd)取得在文本框選擇的文本。

　　　　（2）setSelectionRange()能夠選擇部分文本，接受兩個參數：要選擇的第一個字符的索引和要選擇的最後的一個字符以後的字符的索引（IE9+）。要看到選擇的文本，必須調用該方法以前或以後將焦點設置到文本框

　　八、過濾輸入：

　　　　（1）屏蔽字符：向文本框中插入字符是keypress事件，所以禁用此事件的默認行爲就能夠了

　　　　（2）操做剪貼板

　　九、HTML5約束驗證API（有兼容性問題）

　　　　（1）必填字段（required）

　　　　（2）其餘輸入類型（type="email" type="url"）

　　　　（3）數值範圍（<input type="number" min="10" max="100" step="5"/>）

　　　　（4）輸入模式（<input type="text" pattern="/d+"）模式的開頭和結尾不用加^和$(假定已經有了)