Javascript權威指南——讀書筆記

1、JavaScript核心語法

一、字符串中接受RegExp參數的方法

（1）text.search(pattern)返回首次匹配成功的位置

（2）text.match(pattern)返回匹配組成的數組

（3）text.replace(pattern, '#')返回新字符串

（4）text.split(pattern)

二、字符串不是對象爲何會有屬性？

只要引用了字符串的屬性，JavaScript就會將字符串值經過String()構造函數建立臨時對象（包裝對象），這個對象繼承了字符串的方法，並被用來處理屬性的引用。一旦屬性引用結束，這個新建立的對象就會銷燬。數字和布爾值同理。

字符串、數字和布爾值都是隻讀的，不等同於對象，其包裝對象只是一種實現細節，能夠經過String()、Number()、Boolean()顯示建立包裝對象

三、類型轉換：

（1）顯示類型轉換最簡單的方法是使用Boolean()、Number()、String()或Object()函數，還可使用toString()，注意：null和undefined沒有toString()方法。

（2）還能夠經過運算符進行類型轉換，x + '' //等價於String(x)　　+x //等價於Number(x)，也能夠寫成x-0　　!!x //等價於Boolean(x)

（3）Number類定義的toString()方法能夠接收轉換基數做爲可選參數，n.toString(2) //轉換爲2進制　　n.toString(8) //轉換爲8進制　　n.toString(16) //轉換爲16進制

（4）處理財務或科學數據的時候，在作數字到字符串的轉換過程當中，你指望本身控制輸出中小數點位置和有效數字位數，或者決定是否須要指數計數法，可能會用到toFixed()、toExponential()和toPrecision()函數

（5）用Number()將字符串轉換爲數字時，字符串不能出現非數字字符，但parseInt()和parseFloat()能夠處理這種狀況，parseInt()可接收第二個參數，這個參數指定數字轉換的基數

（6）對象轉爲原始值（字符串或數字），全部的對象繼承了兩個轉換方法：toString()和valueOf()

　　a.對象轉爲字符串過程：a.1 若是對象具備toString()方法，則調用這個方法，返回一個原始值　　a.2 若是對象沒有toString()方法或者這個方法並不返回一個原始值，則調用valueOf()方法，若是返回的是原始值，則將返回的原始值轉換爲字符串（若是自己不是字符串的話）　　a.3 不然，JavaScript沒法從toString()或valueOf()得到一個原始值，所以這時它將拋出一個類型錯誤異常　　ex：自定義的普通對象（{}）沒有toString()和valueOf()方法，調用這兩個方法將會拋出類型錯誤異常

　　b.對象轉爲數字過程：b.1 若是對象具備valueOf()方法，而且返回的是原始值，則將返回的原始值轉爲數字（若是自己不是數字的話）　　b.2 不然，若是對象具備toString()方法，返回一個原始值，並將其轉換爲數字返回　　b.3 不然，JavaScript拋出一個類型錯誤異常　　ex：[] == 0 // true 空數組首先調用valueOf()方法，但返回的不是原始值而是空數組這個對象自己，因此繼續調用toString()方法，返回一個原始值空字符串，空字符串轉換爲數字0，結果爲true

四、表達式

　　表達式是JavaScript中的一個短語，JavaScript解釋器會將其計算出一個結果，常量和變量名都是簡單的一種表達式，複雜表達式由簡單表達式組成，經常使用方法是使用運算符（arr[1]、fn(1)都屬於複雜表達式）

（1）原始表達式：表達式的最小單位，再也不包含其餘表達式，原始表達式包含常量或直接量、變量和關鍵字

（2）數組和對象的初始化表達式：數組直接量或對象直接量，它們不是原始表達式，由於它們所包含的成員都是子表達式（[[1,2,3], [4,5,6]], {a: {b: 1}}）

（3）函數定義表達式：函數直接量，function (x) {return x*x}

（4）屬性訪問表達式：兩種語法，expression.identifier和expression[expression]，使用屬性訪問表達式的時候，'.'和'[]'前面的表達式會首先計算，若是結果是null或undefined，則會拋出類型異常錯誤，若是結果不是對象（或數組），JavaScript會將其轉換爲對象。若是命名的屬性不存在，表達式的值就是undefined

（5）調用表達式：是一種調用函數或方法的語法表示，fn(0)、Math.max(1, 2)、a.sort()

（6）對象建立表達式：建立一個對象並調用一個函數（構造函數）初始化新對象的屬性，new Object()，不須要傳參的話圓括號能夠省略，new Object

五、運算符

（1）一元運算符、賦值和三元運算符都具備從右至左的結合性

（2）運算符的反作用：賦值運算符會有反作用（若是給一個變量或屬性賦值，那麼使用這個變量或屬性的表達式的值都會受到影響），'++'和'--'類型，由於它們包含隱形的賦值，delete運算符一樣具備反作用，刪除一個屬性就像給這個屬性賦值undefined。ex: var a = 1; b = (a++) + a // 3 這裏初學者可能會計算成2，a++產生的反作用影響了後面的a

（3）JavaScript中全部的數字都是浮點型的，除法運算的結果也是浮點型，'%'運算的結果符號和第一個操做數的符號一致（-5 % 2 = -1）

（4）'+'號的轉換規則優先考慮字符串鏈接（一個操做數是字符串，另外一個操做數將會轉爲字符串），若是兩個操做數都不是字符串的話，則進行算數加法運算。當加號和字符串和數字一塊兒使用時，須要考慮加法的結合性對運算順序的影響，ex：1 + 2 + 'bind' // '3bind'　　1 + (2 + 'bind') // '12bind'

（5）'=='類型轉換：

　　對象轉換原始值規則：對象經過toString()或valueOf()轉換爲原始值，JavaScript的核心內置類首先嚐試使用valueOf()，再嘗試使用toString()，除了日期類，日期類只使用toString()轉換。那些不是JavaScript語言核心中的對象則經過各自的實現中定義的方法轉換爲原始值（{}=>Object()=>Object().toString()=>'[object Object]'）

　　'1' == true // true (true => 1, '1' => 1)

（6）加號運算符和比較運算符

　　加號運算符更偏心字符串，若是其中一個操做數是字符串的話，則進行字符串鏈接；比較運算符更偏心數字，只有在兩個操做數都是字符串的狀況下，才進行字符串鏈接。

　　'1' + 2 // '12'　　'11' < 2 // false

（7）in運算符

　　in運算符但願左操做數是一個字符串或能夠轉換成字符串，右操做數是一個對象

　　var object = {x: 1, y: 2}　　'x' in object // true　　'toString' in object // true（對象繼承了toString()方法）

　　var arr = [7, 8, 9]　　'0' in arr // true　　1 in arr // true（數字轉換爲字符串）　　3 in arr // false（沒有索引爲3的元素）

（8）instanceOf運算符

　　instanceOf運算符但願左操做數是一個對象，右操做數是類（類是經過初始化它們的構造函數來定義的）。若是左操做數不是對象，將返回false；右操做數不是函數，則拋出類型錯誤異常。instanceOf的原理是原型鏈，經過原型鏈查找對象是否存在

　　var d = new Date()　　d instanceOf Date // true　　d instanceOf Object // true

（9）'&&'和'||'

　　常見用途：a. 有條件地執行代碼 (a==b) && stop　　b. 提供默認值 function fn(p) {p = p || {}}

（10）delete運算符

　　var arr = [1,2,3]　　delete arr[2]　　2 in a // false　　arr.length // 3（delete不會改變數組長度，[1, 2, empty]）

（11）逗號運算符

　　逗號運算符是二元運算符，經常使用場景是在for循環中

　　for (var i = 0, j = 10; i < j; i++, j--) {console.log(i + j)}

六、語句

　　表達式是計算出一個值，語句是用來執行以使某件事發生。JavaScript程序是一系列可執行語句的集合

（1）表達式語句

　　具備反作用的表達式（賦值或函數調用）。++、--、delete、alert()

（2）複合語句和空語句

　　複合語句：　　　　　　　　　　空語句：for (i = 0; i < a.length; a[i++] = 0) ;　　使用空語句最好加上註釋說明：for (i = 0; i < a.length; a[i++] = 0) /* empty */ ;

　　{

　　　var i = 1;

　　　console.log(i)　

　　}

（3）聲明語句（var和function）

　　聲明語句用來建立變量或函數。函數定義表達式，使用var，只有變量聲明提早了，變量的初始化代碼仍在原來的位置；而函數聲明，函數名稱和函數體均提早，能夠在函數聲明以前調用它

（4）條件語句

　　若是在函數中使用switch語句，能夠用return代替break來停止switch語句。case關鍵字後能夠跟任意表達式。對每一個case的匹配操做是'==='比較。

（5）循環

　　JavaScript有四種循環語句：while、do/while、for、for/in。

　　for循環中三個表達式均可以省略，可是兩個分號必不可少。若是省略text表達式，則是死循環。死循環的兩種寫法：while(true)、for(;;)

　　for (variable in object)用來更方便地遍歷對象屬性成員，若是object表達式爲null或undefined，JavaScript解釋器會跳過循環並執行後續的代碼，若是表達式是一個原始值，這個原始值將會轉換爲與之對應的包裝對象

（6）跳轉

　　標籤語句：identifier: statement

　　mainloop: while(token !== null) {

　　　　continue mainloop

　　}

　　當但願用break跳出非就近的循環體或switch語句時，能夠用到帶標籤的break語句，跳出標籤指定的語句

　　注意：對於一條帶標籤的函數定義語句來講，不能從函數內部經過標籤跳轉到函數外部

　　包含continue的while和for的表現行爲不一樣，for會首先執行increment表達式再執行test表達式，而while直接執行test表達式

（7）throw語句

　　在JavaScript中，當產生運行時錯誤或使用throw語句時就會顯示拋出異常。使用try/catch/finally能夠捕獲異常

　　throw expression;

　　JavaScript拋出異常時一般採用Error類型和其子類型：if (x < 0) {throw new Error('x不能是負數')}，當拋出異常時，會當即中止當前正在執行的邏輯，並跳轉至就近的異常處理程序，若是拋出異常的代碼塊沒有一條相關聯的catch從句，解釋器會向更高層的代碼塊尋找，若是沒有找到任何異常處理程序，JavaScript將把異常看成程序錯誤來處理，並報告給用戶

　　try從句定義了須要處理異常的代碼塊，當try從句某處發生了異常時，調用catch代碼塊內的邏輯，無論try中是否發生異常，finally代碼塊內的邏輯總會執行；無論try中是否有break、continue或return語句，finally中代碼始終會執行，利用這點能夠作到while循環模擬包含continue的for循環，但當循環體body中有break時狀況又不一樣了，因此使用while來徹底模擬for是不可能的

　　try{}　　catch(e){}　　finally{}

（8）with語句

　　with語句用於臨時擴展做用域鏈。

　　with(object)

　　statement

　　這條語句將object添加到做用域鏈的頭部，而後執行statement，最後把做用域鏈恢復到原始狀態

　　應用場景：在對象嵌套層次很深的時候會使用with語句簡化代碼編寫

　　document.forms[0].address.value

　　with(document.forms[0]) {

　　　　name.value = ''

　　　　address.value = ''

　　}　　

　　不用with的等價代碼能夠這樣寫：var f = document.forms[0]　　f.address.value = ''

　　只有在查找標識符的時候纔會用到做用域鏈，建立新變量的時候不會用它

　　with(0) x=1;　　若是對象o沒有x屬性，那麼這段代碼和不使用with的代碼x=1是同樣的

　　儘量避免使用with語句，由於with語句運行起來比較慢

七、對象

　　對象的屬性名是字符串。對象分爲：內置對象（數組、函數、日期、正則表達式）、宿主對象（HTMLElement）、自定義對象。屬性分爲：自有屬性和繼承屬性。屬性有3個屬性特性：可寫（是否能夠設置該屬性的值）、可枚舉（是否能夠經過for/in循環返回該屬性）、可配置（是否能夠刪除或修改該屬性）。對象有3個對象特性：對象的原型、對象的類、對象的擴展標記（指明瞭是否能夠向該對象添加屬性）

（1）建立對象

　　能夠經過對象直接量、關鍵字new和Object.create()建立

　　var o  = {}　　var o = new Object()

　　Object.create()第一個參數是這個對象的原型，第二個可選參數用以對對象的屬性進一步描述。var o1 = Object.create({x: 1, y: 2}) // o1繼承了x和y屬性　　var o2 = Object.create(null) // o2不繼承任何屬性和方法（包括toString()等）　　var o3 = Object.create(Object.prototype)

（2）刪除屬性

　　delete只能刪除自有屬性，不能刪除繼承屬性。delete只是斷開屬性和宿主對象的聯繫。a = {p: {x: 1}};b = a.p;delete a.p; 執行以後b.x的值依然是1，已刪除的屬性的引用仍然存在，可能會形成內存泄漏。

（3）檢測屬性

　　in：若是對象的自有屬性或繼承屬性中包含這個屬性，返回true

　　對象的hasOwnProperty()方法：檢測給定的名字是不是對象的自有屬性，是則返回true

　　對象的propertyIsEnumerable()方法：檢測給定的名字是自有屬性且這個屬性的可枚舉性爲true時，返回true

（5）枚舉屬性

　　for/in：遍歷對象中全部可枚舉的屬性，包括自有屬性和繼承屬性

　　Object.keys()：返回一個數組，這個數組由對象中的可枚舉的自有屬性組成

　　Object.getOwnPropertyNames(): 返回一個數組，這個數組由對象中的全部自有屬性組成（既包括可枚舉，也包括不可枚舉）

（6）屬性getter和setter

　　屬性值爲getter和setter的屬性叫存取器屬性

　　var o = {

　　　　data_prop: value, // 普通的數據屬性

　　　　get accessor_prop() {/*函數體*/},

　　　　set accessor_prop(value) {/*函數體*/}　　//accessor_prop就是存取器屬性，同時具備getter和setter方法，是讀/寫屬性

　　}

（7）屬性的特性

　　es5提供了查詢和設置這些特性的API。這些API對庫的開發者很是重要。由於能夠經過這些API給原型對象添加方法，並設置爲不可枚舉，這讓它們看起來更像內置方法；能夠經過API給對象定義不能修改或刪除的屬性，藉此鎖定這個對象。

　　屬性描述符對象：數據屬性的描述符對象的屬性有value、writable、enumerable、configurable；存取器屬性的描述符對象的屬性有get、set、enumerable、configurable

　　獲取對象上某個屬性的描述符：Object.getOwnPropertyDescriptors({x: 1}, 'x') // {x: {value: 1, writable: true, enumerable: true, configurable: true}}　　對於繼承和不存在的屬性返回undefined

　　設置屬性的特性或者讓新建屬性具備某種特性：var o = {};Object.defineProperty(o, 'x', {value: 1, writable: true, enumerable: false, configurable: true})　　//添加一個不可枚舉的屬性x

　　Object.defineProperty(o, 'x', {writable: false}) //讓屬性x變爲只讀

　　Object.defineProperty(o, 'x', {get function() {return 0;}}) // o.x => 0 將數據屬性修改成存取器屬性

　　若是要同時建立或修改多個屬性：Object.defineProperties({}, {x: {value: 1, writable: true, enumerable: true, configurable: true}, y: {value: 1, writable: true, enumerable: true, configurable: true}})

（8）對象的三個屬性

　　原型屬性：對象的原型屬性是用來繼承屬性的。isPrototypeOf()方法用來檢測一個對象是不是另外一個對象的原型（或處於原型鏈中）var p = {x: 1};var o = Object.create(p);p.isPrototypeOf(o) // true

　　類屬性：對象的類屬性是一個字符串，用以表示對象的類型信息。默認的toString()方法能夠返回類屬性信息。[object class]

　　可擴展性：對象的可擴展性表示是否能夠給對象添加新屬性。可擴展屬性的目的是將對象鎖定，以免外界干擾。

　　　　Object.isExtensible()判斷該對象是不是可擴展的。Object.preventExtensions()將對象轉換爲不可擴展的，一旦對象轉爲不可擴展的，就沒法再將其轉爲可擴展的，該方法隻影響對象自己的可擴展性，若是給不可擴展的對象的原型添加屬性，這個不可擴展的對象一樣會繼承這些屬性。

　　　　Object.seal()既能夠將對象設爲不可擴展的，還能夠將對象的自有屬性設爲不可配置的，也就是說不能添加新屬性、已有的屬性也不能刪除或配置，不過已有的可寫屬性依然可配置。對於已經封閉（sealed）起來的對象是不能解封的，可使用Object.isSealed()來檢測對象是否封閉。

　　　　Object.freeze()將更嚴格地鎖定對象，除了將對象設置爲不可擴展和將其屬性設爲不可配置以外，還能夠將它自有的全部數據屬性設置爲只讀（若是對象的存取器屬性具備setter方法，存取器屬性將不受影響，仍能夠給屬性賦值調用它們），可使用Object.isFrozen()來檢測對象是否凍結。

（9）序列化對象

　　對象序列化是指將對象的狀態轉換爲字符串，也能夠將字符串還原爲對象。JSON.stringify()和JSON.parse()，接受第二個可選參數

　　JSON語法是JavaScript的子集，但它並不能表達JavaScript裏的全部值。

　　NaN、Infinity、-Infinity的序列化結果是null。日期對象的序列化結果是ISO格式的日期字符串，但JSON.parse()依然保留它的字符串形態，而不會將它還原爲原始日期對象。函數、undefined、RegExp、Error對象不能序列化和還原，對於這些不能序列化的屬性，在序列化後的字符串中會將這個屬性省略掉

（10）對象方法

　　toString()：沒有參數，返回調用這個方法的對象值的字符串。var s = {x: 1}.toString() // "[object Object]"　　不少類都帶有自定義的toString()，好比數組轉換爲字符串獲得的是一組帶逗號的數組元素的字符串

　　toLocaleString()：這個方法返回一個表示這個對象的本地化字符串。Object中默認的toLocaleString()並不作任何本地化操做，它僅調用toString()並返回對應值。Date和Number類對toLocaleString()方法作了定製，能夠用它對數字、日期、時間作本地化的轉換。Array類的toLocaleString()，每一個數組元素會調用toLocaleString()轉換爲字符串，而不是調用各自的toString()

　　toJSON()：Object.prototype實際並無toJSON()方法，但JSON.stringify()會調用toJSON()方法

　　valueOf(): 當JavaScript須要將對象轉爲某種原始值而非字符串時會調用它，尤爲是轉換爲數字的時候。有些內置類自定義了valueOf方法，好比Date.valueOf()

八、數組

（1）建立數組

　　直接量或調用構造函數Array()

（2）數組元素的讀和寫

　　數組是對象的特殊形式，使用方括號訪問數組元素，JavaScript將指定的數字索引值轉換爲字符串（1變成'1'），而後將其做爲屬性名使用。數組的特別之處在於，當使用小於2³²的非負整數做爲屬性名時數組會自動維護其length屬性值。

　　全部的索引都是屬性名，但只有0～2³²-2之間的整數屬性名纔是索引。若是名字不是非負整數，它就只能看成常規的對象屬性，而非數組索引。數組索引僅僅是對象屬性名的一種特殊類型。

（3）稀疏數組

　　稀疏數組是包含從0開始的不連續索引的數組。若是數組是稀疏的，length屬性值大於元素的個數。var a = new Array(5) // 數組沒有元素，但length爲5　　var a = [];a[1000]=0; // 賦值添加一個元素，但length爲1001。若是用delete從數組中刪除一個元素，它就變成稀疏數組。

（4）數組遍歷

　　for、for/in、forEach

（5）數組方法

　　join()：不改變原數組

　　slice()：不改變原數組，var a = [1,2,3,4,5]; a.slice(-3, -2); // [3]

　　concat()：不改變原數組，concat不會扁平化數組的數組。var a = [1, 2, 3]; a.concat(4, [5, [6, 7]]) //返回[1,2,3,4,5,[6,7]]

　　toString()、toLocaleString()：不改變原數組

　　reverse()：改變原數組

　　sort()：改變原數組。不帶參數調用時，數組元素以字母表順序排序，若是數組包含undefined元素，它們會被排到數組的尾部。用數值大小排序，給sort()函數傳遞比較函數，該函數決定了它的兩個參數在排好序的數組中的前後順序，第一個參數在前返回小於0的數值，第一個參數在後返回大於0的數值，兩個參數相等返回0。a.sort(function(a, b) {return a - b}) //從小到大　　a.sort(function(a, b) {return b - a}) // 從大到小

　　splice()：改變原數組。返回一個由刪除元素組成的數組，var a = [1, 2, 3, 4, 5]; a.splice(2, 0, [1, 2]) // 返回[]，a爲[1, 2, [1, 2], 3, 4, 5]　　區別於concat，splice會插入數組自己而不是數組的元素

　　push、pop、unshift、shift：改變原數組

　　ES5新方法（都不改變原數組）：

　　forEach()：forEach沒法提早停止遍歷，也就是說，沒法像for循環那樣使用break語句。若是要提早停止，必須把forEach放在一個try塊中，並能拋出異常。

　　map()：將調用數組的每一個元素傳遞給指定的函數，並返回一個數組，它包含該函數的返回值

　　filter()：filter返回的數組元素是調用數組的一個子集，傳遞的函數是用來邏輯斷定的，該函數返回true或false，返回值爲true或能轉化爲true的值會被添加到返回值的數組中。filter會跳過稀疏數組中缺乏的元素，返回的數組老是稠密的，能夠用來壓縮稀疏數組的空缺。 var newArr = arr.filter(() => {return true})

　　every()、some()：數組的邏輯斷定，返回true或false。every()是當數組中的全部元素調用斷定函數都返回true時，才返回true；some()是當數組中至少有一個元素調用斷定函數返回true，它就返回true。空數組調用every()返回true，調用some()返回false。一旦some或every確認該返回什麼值它們就會中止遍歷數組元素

　　reduce()、reduceRight()：

　　　　使用指定的函數將數組元素進行組合，生成單個值。reduce()第一個參數是執行化簡操做的函數，第二個可選參數是一個傳遞給函數的初始值。若是有初始值，調用函數的第一個參數是初始值，若是沒有則數組的第一個元素做爲初始值。　　var sum = arr.reduce((x, y) => {return x+y}, 0)。在空數組中，不帶初始值參數調用reduce會致使類型錯誤。若是調用reduce只有一個值，reduce只是簡單地返回那個值而不會調用化簡函數。

　　　　reduceRight()是從右向左處理數組

　　indexOf()、lastIndexOf()：第二個參數是可選的，它指定數組中的一個索引，從那裏開始搜索。應用場景：用第二個參數查找除了第一個之外匹配的索引

（6）數組類型

　　判斷是否爲數組：Array.isArray()，instanceof只能用於簡單的情形，還能夠經過檢測對象的類屬性判斷

var isArray = Function.isArray || function(o) {
    return typeof o === 'object' &&
         Object.prototype.toString.call(o) === '[object Array]'   
}       

（7）類數組對象

　　把擁有length屬性和對應非負整數屬性的對象看做類數組。{'0': 'a', '1': 'b', '2': 'c', 'length': 3}。

　　可使用Function.call方法間接地調用數組方法，Array.prototype.join.call(a, '+') // 'a+b+c'

（8）做爲數組的字符串

　　字符串的行爲相似與只讀的數組，用方括號訪問代替了charAt()調用，更簡潔、可讀、高效

九、函數

　　形參在函數體內像局部變量同樣工做

（1）函數聲明語句不能出如今循環、條件、try/catch/finally、with語句中，可是函數定義表達式能夠出如今JavaScript代碼的任何地方

（2）函數調用：4種方式，做爲函數、做爲方法、做爲構造函數、經過它們的call()和apply()方法間接調用

（3）當調用函數的時候傳入的實參比形參要少的時候，剩下的形參將設置爲undefined，所以應當給省略的參數賦一個合理的默認值；當調用函數的時候傳入的實參超過了形參個數時，沒辦法得到未命名值的引用，arguments對象解決了這個問題，arguments是一個類數組對象

（4）callee和caller屬性：callee指代當前正在執行的函數，caller指代調用當前正在執行的函數的函數。應用：匿名函數中經過arguments.callee來遞歸調用自身

（5）當函數須要一個靜態變量來在調用時保持某個值不變，最方便的方式就是給函數定義屬性，而不是定義全局變量。uniqueInteger.counter = 0; function uniqueInteger() {return uniqueInteger.counter++}

 （6）閉包：函數定義時的做用域鏈到函數執行時依然有效。若是一個函數定義了嵌套函數，並將它做爲返回值返回或存儲在某處的屬性裏，這時就會有一個外部引用指向這個嵌套的函數。它就不會被當作垃圾回收，而且它指向的變量綁定對象也不會被看成垃圾回收。

（7）Function()構造函數建立的函數，函數體的代碼老是在全局做用域中執行

 

2、DOM

一、檢測瀏覽器類型和版本的方法是使用Navigator對象

二、不嚴格的同源策略：

（1）同源策略給那些使用多個子域名的大站點帶來了一些問題。例如：home.example.com、developer.example.com，能夠設置document.domain屬性爲相同的值，document.domain = example.com，這樣文檔就有了同源性，能夠互相讀取屬性

（2）跨域資源共享（Cross-Origin Resource Sharing）。用新的」Origin：「請求頭和新的Access-Control-Allow-Origin響應頭來擴展HTTP

（3）跨文檔消息：容許來自一個文檔的腳本能夠傳遞文本消息到另外一個文檔裏的腳本，而無論腳本的來源是否不一樣。調用window.postMessage()能夠異步傳遞消息事件到窗口的文檔裏

三、window對象

（1）計時器：setTimeout()、setInterval()

（2）瀏覽器定位和導航

　　window.location屬性引用的是Location對象，表示該窗口中當前顯示的文檔的URL。

　　Location對象的href屬性是一個字符串，包含URL的完整文本。其餘屬性：protocol、host、hostname、port、pathname、Search，分別表示URL的各個部分，被稱爲URL分解屬性

　　hash屬性返回URL中的片斷標識符部分，search返回的是包含問號及其以後的URL

　　location對象的assign()方法可使窗口載入並顯示你指定的URL中的文檔，replace()方法也相似，但它在載入新文檔以前會從瀏覽器歷史中把當前文檔刪除。reload()方法可讓瀏覽器從新載入當前文檔

（3）瀏覽歷史

　　window對象的history屬性引用的是該窗口的History對象，History對象的length屬性表示瀏覽歷史列表中的元素數量

　　History對象的back()和forward()方法與瀏覽器的後退和前進按鈕同樣，go()方法接受一個整數參數，能夠在歷史列表中向前（正參數）或向後（負參數）跳過任意多個頁

　　若是窗口包含多個子窗口（好比iframe），子窗口的瀏覽歷史會按時間順序穿插在主窗口的歷史中，這意味這在主窗口調用history.back()可能會致使其中一個子窗口後退，但主窗口不變

（4）瀏覽器和屏幕信息

　　Window對象的Navigator屬性引用的是包含瀏覽器廠商和版本信息的Navigator對象。

　　Navigator對象有4個屬性用於提供關於運行中的瀏覽器的版本信息，而且可使用這些屬性進行瀏覽器嗅探：appName、appVersion、userAgent（這個屬性包含絕大部分信息，所以瀏覽器嗅探代碼一般用它）、platform，其餘屬性：onLine，表示瀏覽器當前是否鏈接到網絡

　　Window對象的screen屬性引用的是Screen對象，它提供有關窗口顯示的大小和可用的顏色數量的信息。能夠用screen對象來肯定web應用是否運行在一個小屏幕的設備上

（5）對話框

　　alert()：向用戶顯示一條消息並等待用戶關閉

　　confirm()：顯示一條消息，要求用戶點擊肯定或取消，並返回一個布爾值

　　prompt()：也顯示一條消息，等待用戶輸入字符串，並返回那個字符串

（6）Window對象的onerror屬性是一個事件處理程序，當未捕獲的異常傳播到調用棧上時就會調用它，並把錯誤消息輸出到瀏覽器的JavaScript控制檯上。onerror處理程序時早期JavaScript的遺物，那時沒有try/catch異常處理語句。

（7）多窗口和窗體

　　window.open()和window.close()

　　窗體能夠用parent屬性引用包含它的窗口或窗體的window對象：parent.history.back()，top屬性引用的都是指向包含它的頂級窗口

　　iframe元素有contentWindow屬性，引用該窗體的Window對象：document.getElementById('f1').contentWindow，也能夠反向操做，從表示窗體的Window對象來獲取該窗體的iframe元素，用window對象的frameElement屬性，頂級窗口的window對象的frameElement屬性爲null

　　一般不須要用getElementById和contentWindow獲取子窗體的引用，window對象有一個frames屬性，它引用自身包含的窗口或窗體的子窗體，frames屬性引用的是類數組對象，引用第一個子窗體frames[0]，引用第二個子窗體的第三個子窗體frames[1].frames[2]，窗體裏運行的代碼能夠用parent.frames[1]引用兄弟窗體，注意frames數組裏的元素是window對象，而不是iframe元素。若是指定了name或id屬性，還能夠用名字索引，frames['f1']

 四、腳本化文檔

（1）文檔座標和視口座標

　　文檔座標 = 視口座標 + 滾動偏移量

　　視口是實際顯示文檔內容的瀏覽器的一部分，它不包括瀏覽器外殼（菜單、工具條、標籤頁），當爲鼠標事件註冊事件處理程序函數的時候，報告的鼠標指針的座標是在視口座標系中的。

　　瀏覽器窗口滾動條位置：

　　　　pageXOffset和pageYOffset

　　　　正常狀況下能夠經過查詢文檔的根節點獲取：document.documentElement.scorllLeft和document.documentElement.scrollTop

　　　　怪異模式下：document.body.scrollLeft和document.body.scrollTop

　　視口尺寸：

　　　　window.innerWidth（chrome下測試包含滾動條寬度）和window.innerHeight

　　　　正常狀況下：document.documentElement.clientWidth（chrome下測試不包括滾動條寬度）和document.documentElement.clientHeight

　　　　怪異模式下：document.body.clientWidth和document.body.clientHeight

（2）查詢元素的幾何尺寸

　　調用該元素的getBoundingClientRect()方法，返回一個對象，其中left和top屬性表示元素的左上角的X和Y座標，返回的是在視口座標中的位置，返回的座標包含元素的邊框和內邊距，但不包含元素的外邊距。

　　內聯元素可能會由多個矩形組成，若是想查詢內聯元素每一個獨立的矩形，調用getClientRects()方法來得到一個只讀的類數組對象，它的每一個元素相似於getBoundingClientRect()返回的矩形對象。

　　這兩個方法返回的對象並非實時的，在用戶滾動或改變瀏覽器窗口大小時不會更新它們。

（3）判斷元素在某點

　　斷定在視口的指定位置有什麼元素，能夠用Document對象的elementFromPoint()方法來斷定，傳遞X和Y座標（視口座標），返回在指定位置的一個元素。典型的案例時將鼠標指針的座標傳遞給它來斷定鼠標在哪一個元素上，可是鼠標事件對象已經在target屬性中包含了這些信息，所以這個方法不經常使用。

（4）滾動

　　設置scrollLeft和scrollTop屬性實現滾動

　　還能夠window.scorllTo()、window.scroll()接受一個點的X和Y座標（文檔座標），並做爲滾動條的偏移量設置它們。

　　滾動讓最後一頁在視口可見

　　var a = document.documentElement.offsetHeight

　　var b = window.innerHeight

　　window.scrollTo(0, a-b)

　　window.scrollBy()能夠實現滾動，但它的參數是相對的，是在當前滾動條的偏移量增長

　　若是想滾動到文檔中某個元素可見：

　　　　能夠利用getBoundingClientRect()計算元素的位置，並轉換爲文檔座標，而後用scrollTo()達到目的。

　　　　還能夠在須要顯示的元素上調用scrollIntoView()方法，默認狀況下將元素的上邊緣放在或儘可能接近視口的上邊緣，若是隻傳遞false做爲參數，它將元素的下邊緣放在或接近視口的下邊緣。

　　scrollIntoView()的行爲與設置window.location.hash爲一個命名錨點的名字後瀏覽器產生的行爲相似

（5）關於元素尺寸、位置和溢出的更多信息

　　元素的只讀屬性offsetWidth和offsetHeight以css像素返回它的屏幕尺寸，返回的尺寸包含元素的邊框和內邊距，除去了外邊距。

　　全部元素擁有offsetLeft和offsetTop屬性返回元素的X和Y座標。對於大部分元素，這些值是文檔座標，並直接指定元素的位置。但對於已定位元素的後代元素和一些其餘元素（如表格單元），這些屬性返回的座標是相對於祖先元素的而非文檔。offsetParent屬性指定這些屬性所相對的父元素，若是offsetParent爲null，這些屬性都是文檔座標

　　offsetWidth　　clientWidth　　scrollWidth

　　offsetHeight　  clientHeight　   scrollHeight

　　offsetLeft　　   clientLeft　　   scrollLeft

　　offsetTop　　   clientTop　　　scrollTop

　　offsetParent

　　

　　clientWidth、clientHeight相似offsetWidth、offsetHeight，不一樣的是它們不包括邊框大小，只包含內容和它的內邊距，同時若是瀏覽器在內邊距和邊框之間添加了滾動條，其返回值中也不包含滾動條。注意，相似i、code、span這些內聯元素，總返回0

　　clientLeft、clientTop沒什麼用，返回元素的內邊距的外邊緣和它的邊框的外邊緣之間的水平距離和垂直距離，一般這些值就等於左邊和上邊的邊框寬度，可是若是元素有滾動條，而且滾動條放置在左側或頂部，clientLeft和clientTop也就包含了滾動條高度。對於內聯元素，clientLeft和clientTop老是爲0

　　scrollWidth和scrollHeight是元素的內容區域加上它的內邊距再加上任何溢出內容的尺寸。當沒有溢出時，這些屬性和clientWidth、clientHeight是相等的。

　　scrollLeft和scrollTop指定元素的滾動條的位置

（6）HTML表單

　　選取表單和表單元素

　　getElementById()、querySelectorAll('#form input[type="radio"]')、querySelectorAll('#form input[type="radio"][name="method"]')

　　name=「address」屬性的表單還能夠用以下方式選取：

　　　　window.address // 不推薦　　document.address // 僅當表單有name屬性時可用　　document.forms.address // 顯式訪問有name或id的表單　　document.forms[n] // 不推薦

　　Form對象自己的行爲相似於多個表單元素組成的HTML Collection集合，也能夠用name或數字序號訪問：若是name爲address的表單的第一個元素的name時street，document.forms.address[0]　　document.forms.address.street

　　若是要明確地選擇一個表單元素，能夠索引表單對象的elements屬性：document.forms.address.elements[0]　　document.forms.address.elements.street

　　javascript的Form對象支持兩個方法：submit()和reset()

　　Form元素有一個onsubmit事件處理程序和onreset事件處理程序，表單提交前調用onsubmit，返回false可以取消提交動做，onsubmit只能經過點擊提交按鈕觸發，調用submit()方法不會觸發onsubmit，onreset事件同理

（7）其餘文檔特性

　　查詢選取的文本：window.getSelection().toString()、document.selection.createRange().text（IE特有的技術）

　　window對象的getSelection()方法沒法返回input和textarea內部選中的文本，IE的document.selection屬性能夠返回文檔中任意地方選中的文本

　　在文本輸入域獲取選取的文本可使用以下代碼：elt.value.substring(elt.selectionStart, elt.selectionEnd)

五、腳本化CSS

（1）z-index只對兄弟元素（例如：同一個容器的子元素）應用堆疊效果。可使用定位實現相似text-shadow的效果。當想以百分比形式爲元素設置整體尺寸，又想以像素單位指定邊框和內邊距時，可使用邊框盒模型。邊框盒模型的一個可選方案是使用盒子尺寸的計算值calc()。visibility和display屬性對絕對和固定定位的元素的影響是等價的，由於這些元素都不是文檔佈局的一部分，在隱藏和顯示定位元素時通常首選visibility

（2）js中的css屬性：當一個css屬性在js中對應的名字是保留字時，要在其前面加上css前綴，如e.style.cssFloat

（3）查詢元素的內聯樣式：e.style.cssText

（4）查詢計算出的樣式：window或document對象的getComputedStyle()方法，第一個參數是元素，第二個參數是null或空字符串，也能夠是命名css僞對象的字符串，計算屬性是隻讀的。window.getComputedStyle(e, '').fontSize

六、事件處理

（1）addEventListener()註冊的事件處理程序，事件目標做爲它的this值；attachEvent()註冊的事件處理程序，它的this是window對象

（2）經過對象屬性或HTML屬性註冊的事件處理程序的返回值纔有意義，返回false是阻止這個事件的默認操做；經過addEventListener()或attachEvent()註冊事件處理程序必須調用preventDefault()方法或設置事件對象的returnValue屬性

（3）調用順序：設置對象屬性或HTML屬性註冊的處理程序優先調用，addEventListener()註冊的處理程序按順序調用；attachEvent()可能按任何順序調用

（4）出了mouseenter和mouseleave外的鼠標事件都能冒泡

六、腳本化HTTP

　　var request = new XMLHttpRequest()

（1）指定請求：request.open('GET', url)　　request.setRequestHeader('Content-Type', 'text/plain')設置請求頭　　request.send(null)

（2）取得響應：status、statusText　　getResponseHeader()和getAllResponseHeaders()能查詢響應頭　　responseText 響應主體

（3）編碼請求主體：

　　表單編碼的請求：對每一個表單元素的名字和值執行URL編碼，使用=號把編碼後的名字和值分開，並使用'&'符號分開名/值對，如：find=pizza&name=0123，當以post方法提交這種表單數據時，必須設置請求頭的Content-Type爲application/x-www-form-urlencoded

　　JSON編碼的請求：resquest.setRequestHeader('Content-Type': 'application/json')　　resquest.send(JSON.stringify(data))

　　上傳文件：<input type="file">元素有一個files屬性，它是File對象中的類數組對象，input.files[0]能夠獲取單個文件。文件類型是更通用的二進制大對象（Blob）類型中的一個子類型

　　multipart/form-data請求：當html表單同時包含文件上傳元素和其餘元素時，瀏覽器不能使用普通的表單編碼而必須使用'multipart/form-data'的content-type來用post提交表單。使用FormData容易實現多部分請求主體，按需屢次調用這個對象的append()方法把個體部分（字符串、File或Blob對象）添加到請求中，最後把FormData對象傳遞給send()中

（4）HTTP進度事件

　　當調用send()時，觸發loadstart事件；當正在加載服務器的響應時，觸發progress事件，若是請求快速完成，可能不會觸發progress事件；當事件完成，會觸發load事件。一個完成的請求不必定是成功的請求，如load事件處理程序應該檢查status肯定是200而不是404

　　HTTP請求沒法完成有3種狀況：超時，觸發timeout事件；請求停止，觸發abort事件；太多重定向的網絡錯誤會阻止請求完成，觸發error事件

　　對於任何請求，瀏覽器將只會觸發load、timeout、abort和error中的一個

　　除了type和timestamp這樣經常使用的Event對象屬性外，progress事件對象還有3個有用的屬性：loaded屬性是目前傳輸的字節數值，total屬性是‘Content-Length’頭傳輸的數據的總體長度（單位是字節），若是不知道內容長度則爲0，若是知道內容長度，lengthComputable屬性爲true，不然爲false

　　上傳進度事件：XMLHttpRequest對象有一個upload屬性，upload屬性值是個對象，x.onprogress監控下載進度，x.upload.onprogress監控上傳進度

　　停止請求和超時：XMLHttpRequest對象的abort()方法來取消正在進行的HTTP請求。調用abort()方法會觸發abort事件。

（5）使用script元素做爲ajax傳輸的技術叫作JSONP，不受同源策略的影響

七、客戶端存儲

　　客戶端存儲遵循同源策略，它爲咱們提供了一種通訊機制，例如在一個頁面上填寫的表單數據能夠在另外一個頁面上顯示

（1）localStorage和sessionStorage

　　二者的區別在於存儲的有效期和做用域的不一樣

　　localStorage存儲的數據是永久性的，sessionStorage存儲的數據當窗口或標籤頁被關閉後就被刪除了，注意：一些瀏覽器具有了從新打開最近的關閉的標籤頁隨後恢復上一次瀏覽的會話功能，所以這些標籤頁以及與之相關的sessionStorage的有效期可能會更加長點

　　與localStorage同樣，sessionStorage的做用域也被限定在文檔源中，所以非同源文檔沒法共享sessionStorage，此外sessionStorage還被限定在窗口中，若是同源的文檔渲染在不一樣的標籤頁中，它們擁有的是各自的sessionStorage，沒法共享，這裏值得窗口是頂級窗口，若是瀏覽器包含兩個iframe，它們所包含的文檔是同源的，那麼這二者之間是能夠共享sessionStorage

（2）存儲api

　　setItem(name, value)、getItem(name)、removeItem(name)、clear()、length、key()

（3）存儲事件（storage）

　　存儲在localStorage和sessionStorage上的數據發生改變時，瀏覽器會在其餘對該數據可見的窗口對象上觸發存儲事件（在對數據進行改變的窗口對象是不會觸發的）

（4）Cookie

　　cookie的有效期只能持續在瀏覽器的會話期間，一旦用戶關閉瀏覽器，cookie的數據就丟失了。延長cookie的有效期能夠經過max-age屬性（單位是秒）

　　cookie的做用域是經過文檔源和文檔路徑肯定的，可是做用域經過path和domain是可配置的。

　　cookie的secure屬性，是一個布爾類型的屬性，cookie默認是不安全的形式傳遞的，一旦cookie被標識爲安全的，那就只能當瀏覽器和服務器經過HTTPS或其餘安全協議鏈接的時候才能傳遞它