摘要：創建對象工廠模式不能解決對象識別問題構造函數模式使用操作符。原型模式將構造函數模式里面的方法都包裹在一個對象里面，這樣一方面實現了封裝，另一方面解決了內存問題。

1.每個東西的出現都有它要解決的問題：可從創建對象說。

box-sizing:content-box | border-box

- `content-box`：默認值，width指內容寬度。
- `border-box`：width = border+padding+內容寬度（IE怪異模式）

vertical-align只針對內聯元素。默認值baseline只內聯元素的底部與文字底部在一條直線上。還取值middle,text-bottom,text-top,sub,super,top,bottom。（看這篇文章）

middle ： Aligns the middle of the element with the middle of lowercase letters in the parent.

tabel-cell默認設置了vertical-align：middle

答題思路：

1) 分為水平、垂直、水平垂直；各方面又分為內聯元素和塊級元素；

2）水平內聯：text-align;水平塊級：margin,flex,inline-block

3) 垂直內聯：a.一行：padding,line-height；b.多行：padding,tabel-cell，vertical-align,flex,column。
垂直塊級：position,transform,flex

4)水平垂直：a.position,transformXY;b.flex

static:默認值。正常文檔流。

relative:相對本身位置。正常文檔流。

absolute:相對值不是static的祖先元素定位。脫離文檔流。

fixed:相對于屏幕視窗的位置來指定元素的空間，定住不動。脫離文檔流。

觸發BFC的條件：

float的屬性不是none;

overflow的屬性不是visible;

position的屬性是absolute,fixed;

display的屬性是：inline-block,table-cells,table-caption.

BFC的布局特性：

內部盒子在垂直方向一個接一個放置。

兄弟元素的外邊距由margin決定，在同一個BFC里的垂直邊距會疊加。（解決辦法：創建一個新的BFC）

BFC的高度包含浮動元素。（可用以消除浮動）

BFC的區域不會與浮動盒子重疊。（解決圖片環繞效果）

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。

工廠模式：不能解決對象識別問題.

function createPerson(name){
    var o = new Object()
    o.name = name
    o.sayName = function(){
        alert(this.name)
    }
    return o
}

構造函數模式：使用new操作符。用constructor屬性解決對象識別問題。

過程：創建新對象 => this綁定到新對象 => 執行函數中的代碼 => 返回新對象。

缺點：每一個`sayName`方法都是一個函數實例，即每一個對象都有一個該實例，則多個對象多個該函數實例實現相同效果，浪費內存。

解決方法：將`sayName`作為一個全局函數，則都指向該實例。但是該函數就暴露在全局，不存在封裝性。

function Person(name){
    this.name = name
    this.sayName = function(){
        alert(this.name)
    }
}

原型模式：將構造函數模式里面的方法都包裹在一個對象里面，這樣一方面實現了封裝，另一方面解決了內存問題。這個對象就稱為原型對象。

1）構造函數通過prototype訪問這個原型對象,賦給構造函數，是因為在沒有實例化的時候就根本訪問不到原型對象了，不能給原型對象賦值，所以要把這個原型對象給構造函數。
2）每創建一個函數，就會同時創建prototype對象，并且有初始值constructor屬性，指向構造函數。同時這個屬性是所有實例都應該有的，因此放到原型對象上；

例如，當你這樣： var a1 = new A()， JavaScript 就會設置：a1.[[Prototype]] = A.prototype（在內存中創建對象后，并在運行 this 綁定的函數 A()之前）

3）實例通過__proto__屬性訪問原型對象。

綜上，實例與構造函數并無直接關系，原型對象和二者皆有關。

缺點：1）所有實例都有相同的屬性，比如name;

  2)對于引用型對象來說，一個實例改變了該值，則其他實例的該值也會改變。

function Person(){
}

Person.prototype.name = nina
Person.prototype.sayName = function(){
    alert(this.name)
}

注意：若用Person.prototype = {}寫原型時，要明確聲明constructor:Person，否則默認為Object。但是此時仍能用instanceof識別類。而且此時constructor是enumerable，因此最好使用defineProperty設置constructor.

組合構造函數和原型模式：構造函數傳遞自由屬性，原型設置共享屬性和方法。

動態原型模式：檢驗某種屬性是否存在，若不存在則在原型中創建它。只在首次實例化時有效，因為之后該屬性就已經在原型上了。【并沒有想到它的應用場景】

function Person(name){
    this.name = name
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            alert(this.name)
        }
    }
}

寄生構造函數模式：工廠模式+new。這樣返回的是工廠函數中的對象，它與構造函數、原型對象沒有任何關系，同時不能依賴instanceof識別。主要用于給Array等內置對象新增方法而不修改Array的原型。

function specialArray(){
    var value = new Array()
    values.push.apply(values,arguments)
    values.toPipedString = function(){
        return this.join("|")
    }
    return values
}

var color = new specialArray("red","blue","green")
color.toPipedString() // "red|blue|green"

穩妥構造函數：在不能使用this,new的安全環境下使用。

function Person(name){
    var o = new Object()
    o.sayName = function () {
        alert(name)
    }
    return o
}

原型鏈：基于原型和原型搜索機制。基本思想為：a的原型設置為另一個對象的實例b，那么b的__proto__指向b的原型。則a通過原型搜索機制能夠訪問b和b的原型的屬性和方法，實現了繼承。如果b的原型為實例c,那么a就繼承了b,c。至于為什么不讓a的原型等于b的原型而是實例b呢，這樣就同時也繼承了b的屬性。否則的話a和b其實并沒有區別。最終的原型還是Object.prototype

每個對象都有一個指向它的原型（prototype）對象的內部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環。這種一級一級的鏈結構就稱為原型鏈（prototype chain）。

function Super(){
    this.proerty = true
}
Super.prototype.getSuperValue = function () {
    return this.property
}
function Sub(){
    this.subproperty = false
}
Sub.prototype = new Super()
Sub.prototype.getSubValue = function () {
    return this.subproperty
}
var instance = new Sub()
instance.getSuperValue() //true

缺點：1）超類構造函數的屬性中存在引用類型，這時子類若修改該屬性則其他實例也會受影響。相當于這時的實例就是前面提到的原型對象。
2）子類不能給超類的構造函數傳遞參數。

借用構造函數：在子類構造函數中調用父類的構造函數。解決引用類型值和給父類構造函數傳參數。

function Super(name) {
    this.colors = ["red","blue"]
    this.name = name
}

function Sub() {
    Super.call(this,"nina")//相當于前面創建對象原型模式的解決方案
    this.age = 29
}

缺點：1）子類無法調用父類原型的方法；2）多個方法占用空間的問題；

組合繼承：在子類構造函數中調用父類構造函數傳遞參數，子類原型為父類實例。

function Super(name) {
    this.colors = ["red","blue"]
    this.name = name
}

Super.prototype.sayName = function () {
    alert(this.name)
}

function Sub(name,age) {
    Super.call(this,name)  //第二次調用
    this.age = age
}

Sub.prototype = new Super()  //第一次調用
//這個時候是將父類的構造函數在子類中調用,因此構造函數為子類,父類的構造函數在子類中就不在了
Sub.prototype.constructor = SubType
Sub.prototype.sayAge = function () {
    alert(this.age)
}

缺點：調用兩次構造函數。因此父類實例的屬性在子類實例和原型中都有一份，存在兩份。

原型式繼承：Object.create(obj,property)。在沒有必要創建構造函數，而只是想讓一個對象與另一個對象相似的情況下使用。這樣不用調用構造函數，否則讓obj成為原型則必須要構造函數。

寄生組合式繼承：組合繼承調用了兩次父類的構造函數。結合Object.create。

function Super(name) {
    this.colors = ["red","blue"]
    this.name = name
}

Super.prototype.sayName = function () {
    alert(this.name)
}

function Sub(name,age) {
    Super.call(this,name)  //第二次調用
    this.age = age
}

var prototype = Object.create(Super.prototype) //減少之前的這一步的構造函數的調用
prototype.constructor = Sub
Sub.prototype = prototype

指定請求的過程：

var xhr = new XMLHttpRequest()

xhr.open(請求方法:post副作用、get，url)

xhr.setRequestHeader()設置請求頭，可選

xhr.send(null/data)指定請求主體并發送。一般get沒有參數或者是null,post將傳輸的數據作為參數。

響應返回值：

status/statusText:返回HTTP狀態碼。200成功。

getResponseHeader/getAllResponseHeaders:查詢響應頭。

responseText文本形式/responseXML文檔形式返回相應主體。

readystatechange:監聽該事件才能獲得響應返回值。

0 unsent open()尚未調用

1 opend open()已調用

2 headers_received 接收到頭信息

3 loading 接收到響應主體

4 done 相應完成

var request = new XMLHttpRequest()
request.open("get",url)
request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status === 200){
        var type = request.getResponHeader("Content-Type")
        if(type.match(/^text/){
            callback(request.responsText)
        }
    }
}
request.send(null)

同步調用：
open第三個參數為false，send會阻塞，這時可以直接通過status和responsText檢查。默認為true，異步調用。

請求主體編碼：

表單：name=value&name=value數組，join(&)

json：JSON.stringify

progress事件、load、error、abort

request.onprogress = function (e) {
    //lengthComputabel告訴是否知道內容長度,知道則為true
    if(e.lengthComputable){
        //loaded目前傳輸的字節數,total數據傳輸的總長度
        progress.innerHTML = Math.round(100*e.loaded/e.total) + "% Complete"
    }
}

abort()完成取消或超時請求小號的時間太長或當響應變得無關時。timeout屬性指定請求自動中止后的毫秒數。

雜項

你需要在請求調用 open() 之前添加事件監聽。否則 progress 事件將不會被觸發。