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

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

box-sizing:content-box | border-box

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

vertical-align只針對(duì)內(nèi)聯(lián)元素。默認(rè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默認(rèn)設(shè)置了vertical-align：middle

答題思路：

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

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

3) 垂直內(nèi)聯(lián)：a.一行：padding,line-height；b.多行：padding,tabel-cell，vertical-align,flex,column。
垂直塊級(jí)：position,transform,flex

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

static:默認(rèn)值。正常文檔流。

relative:相對(duì)本身位置。正常文檔流。

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

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

觸發(fā)BFC的條件：

float的屬性不是none;

overflow的屬性不是visible;

position的屬性是absolute,fixed;

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

BFC的布局特性：

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

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

BFC的高度包含浮動(dòng)元素。（可用以消除浮動(dòng)）

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

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

工廠模式：不能解決對(duì)象識(shí)別問題.

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

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

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

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

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

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

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

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

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

3）實(shí)例通過__proto__屬性訪問原型對(duì)象。

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

缺點(diǎn)：1）所有實(shí)例都有相同的屬性，比如name;

  2)對(duì)于引用型對(duì)象來說，一個(gè)實(shí)例改變了該值，則其他實(shí)例的該值也會(huì)改變。

function Person(){
}

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

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

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

動(dòng)態(tài)原型模式：檢驗(yàn)?zāi)撤N屬性是否存在，若不存在則在原型中創(chuàng)建它。只在首次實(shí)例化時(shí)有效，因?yàn)橹笤搶傩跃鸵呀?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ù)中的對(duì)象，它與構(gòu)造函數(shù)、原型對(duì)象沒有任何關(guān)系，同時(shí)不能依賴instanceof識(shí)別。主要用于給Array等內(nèi)置對(duì)象新增方法而不修改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
}

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

每個(gè)對(duì)象都有一個(gè)指向它的原型（prototype）對(duì)象的內(nèi)部鏈接。這個(gè)原型對(duì)象又有自己的原型，直到某個(gè)對(duì)象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)。這種一級(jí)一級(jí)的鏈結(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

缺點(diǎn)：1）超類構(gòu)造函數(shù)的屬性中存在引用類型，這時(shí)子類若修改該屬性則其他實(shí)例也會(huì)受影響。相當(dāng)于這時(shí)的實(shí)例就是前面提到的原型對(duì)象。
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")//相當(dāng)于前面創(chuàng)建對(duì)象原型模式的解決方案
    this.age = 29
}

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

組合繼承：在子類構(gòu)造函數(shù)中調(diào)用父類構(gòu)造函數(shù)傳遞參數(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è)時(shí)候是將父類的構(gòu)造函數(shù)在子類中調(diào)用,因此構(gòu)造函數(shù)為子類,父類的構(gòu)造函數(shù)在子類中就不在了
Sub.prototype.constructor = SubType
Sub.prototype.sayAge = function () {
    alert(this.age)
}

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

原型式繼承：Object.create(obj,property)。在沒有必要?jiǎng)?chuàng)建構(gòu)造函數(shù)，而只是想讓一個(gè)對(duì)象與另一個(gè)對(duì)象相似的情況下使用。這樣不用調(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

指定請(qǐng)求的過程：

var xhr = new XMLHttpRequest()

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

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

xhr.send(null/data)指定請(qǐng)求主體并發(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第三個(gè)參數(shù)為false，send會(huì)阻塞，這時(shí)可以直接通過status和responsText檢查。默認(rèn)為true，異步調(diào)用。

請(qǐng)求主體編碼：

表單：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()完成取消或超時(shí)請(qǐng)求小號(hào)的時(shí)間太長或當(dāng)響應(yīng)變得無關(guān)時(shí)。timeout屬性指定請(qǐng)求自動(dòng)中止后的毫秒數(shù)。

雜項(xiàng)

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