摘要：創(chuàng)建對象工廠模式不能解決對象識別問題構(gòu)造函數(shù)模式使用操作符。原型模式將構(gòu)造函數(shù)模式里面的方法都包裹在一個對象里面，這樣一方面實現(xiàn)了封裝，另一方面解決了內(nèi)存問題。

1.每個東西的出現(xiàn)都有它要解決的問題：可從創(chuàng)建對象說。

box-sizing:content-box | border-box

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

vertical-align只針對內(nèi)聯(lián)元素。默認值baseline只內(nèi)聯(lián)元素的底部與文字底部在一條直線上。還取值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默認設(shè)置了vertical-align：middle

答題思路：

1) 分為水平、垂直、水平垂直；各方面又分為內(nèi)聯(lián)元素和塊級元素；

2）水平內(nèi)聯(lián)：text-align;水平塊級：margin,flex,inline-block

3) 垂直內(nèi)聯(lián)：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:相對于屏幕視窗的位置來指定元素的空間，定住不動。脫離文檔流。

觸發(fā)BFC的條件：

float的屬性不是none;

overflow的屬性不是visible;

position的屬性是absolute,fixed;

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

BFC的布局特性：

內(nèi)部盒子在垂直方向一個接一個放置。

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

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

BFC的區(qū)域不會與浮動盒子重疊。（解決圖片環(huán)繞效果）

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

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

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

構(gòu)造函數(shù)模式：使用new操作符。用constructor屬性解決對象識別問題。

過程：創(chuàng)建新對象 => this綁定到新對象 => 執(zhí)行函數(shù)中的代碼 => 返回新對象。

缺點：每一個`sayName`方法都是一個函數(shù)實例，即每一個對象都有一個該實例，則多個對象多個該函數(shù)實例實現(xiàn)相同效果，浪費內(nèi)存。

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

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

原型模式：將構(gòu)造函數(shù)模式里面的方法都包裹在一個對象里面，這樣一方面實現(xiàn)了封裝，另一方面解決了內(nèi)存問題。這個對象就稱為原型對象。

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

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

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

綜上，實例與構(gòu)造函數(shù)并無直接關(guān)系，原型對象和二者皆有關(guān)。

缺點：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設(shè)置constructor.

組合構(gòu)造函數(shù)和原型模式：構(gòu)造函數(shù)傳遞自由屬性，原型設(shè)置共享屬性和方法。

動態(tài)原型模式：檢驗?zāi)撤N屬性是否存在，若不存在則在原型中創(chuàng)建它。只在首次實例化時有效，因為之后該屬性就已經(jīng)在原型上了?！静]有想到它的應(yīng)用場景】

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

寄生構(gòu)造函數(shù)模式：工廠模式+new。這樣返回的是工廠函數(shù)中的對象，它與構(gòu)造函數(shù)、原型對象沒有任何關(guān)系，同時不能依賴instanceof識別。主要用于給Array等內(nèi)置對象新增方法而不修改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"

穩(wěn)妥構(gòu)造函數(shù)：在不能使用this,new的安全環(huán)境下使用。

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

原型鏈：基于原型和原型搜索機制?；舅枷霝椋篴的原型設(shè)置為另一個對象的實例b，那么b的__proto__指向b的原型。則a通過原型搜索機制能夠訪問b和b的原型的屬性和方法，實現(xiàn)了繼承。如果b的原型為實例c,那么a就繼承了b,c。至于為什么不讓a的原型等于b的原型而是實例b呢，這樣就同時也繼承了b的屬性。否則的話a和b其實并沒有區(qū)別。最終的原型還是Object.prototype

每個對象都有一個指向它的原型（prototype）對象的內(nèi)部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈（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）超類構(gòu)造函數(shù)的屬性中存在引用類型，這時子類若修改該屬性則其他實例也會受影響。相當于這時的實例就是前面提到的原型對象。
2）子類不能給超類的構(gòu)造函數(shù)傳遞參數(shù)。

借用構(gòu)造函數(shù)：在子類構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)。解決引用類型值和給父類構(gòu)造函數(shù)傳參數(shù)。

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

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

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

組合繼承：在子類構(gòu)造函數(shù)中調(diào)用父類構(gòu)造函數(shù)傳遞參數(shù)，子類原型為父類實例。

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)  //第二次調(diào)用
    this.age = age
}

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

缺點：調(diào)用兩次構(gòu)造函數(shù)。因此父類實例的屬性在子類實例和原型中都有一份，存在兩份。

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

寄生組合式繼承：組合繼承調(diào)用了兩次父類的構(gòu)造函數(shù)。結(jié)合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)  //第二次調(diào)用
    this.age = age
}

var prototype = Object.create(Super.prototype) //減少之前的這一步的構(gòu)造函數(shù)的調(diào)用
prototype.constructor = Sub
Sub.prototype = prototype

指定請求的過程：

var xhr = new XMLHttpRequest()

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

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

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

響應(yīng)返回值：

status/statusText:返回HTTP狀態(tài)碼。200成功。

getResponseHeader/getAllResponseHeaders:查詢響應(yīng)頭。

responseText文本形式/responseXML文檔形式返回相應(yīng)主體。

readystatechange:監(jiān)聽該事件才能獲得響應(yīng)返回值。

0 unsent open()尚未調(diào)用

1 opend open()已調(diào)用

2 headers_received 接收到頭信息

3 loading 接收到響應(yīng)主體

4 done 相應(yīng)完成

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)

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

請求主體編碼：

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

json：JSON.stringify

progress事件、load、error、abort

request.onprogress = function (e) {
    //lengthComputabel告訴是否知道內(nèi)容長度,知道則為true
    if(e.lengthComputable){
        //loaded目前傳輸?shù)淖止?jié)數(shù),total數(shù)據(jù)傳輸?shù)目傞L度
        progress.innerHTML = Math.round(100*e.loaded/e.total) + "% Complete"
    }
}

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

雜項

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