摘要：要去中查找創(chuàng)建對象的幾種方法字面量通過構(gòu)造函數(shù)原型構(gòu)造函數(shù)實(shí)例原型鏈的原理運(yùn)算符一個新對象被創(chuàng)建它繼承自構(gòu)造函數(shù)被執(zhí)行。等同于，只能用在不傳遞任何參數(shù)的情況如果構(gòu)造函數(shù)返回了一個對象，那么這個對象會取代整個出來的結(jié)果。

變量類型和計算 值類型&&引用類型

1.值類型

var a = 100
var b = a
a = 200
console.log(b)//100

2.引用類型（對象 數(shù)組 函數(shù)）

無限制擴(kuò)展屬性

var a = {age:20}
var b = a
b.age = 21
console.log(a.age)//21

typeof運(yùn)算符

typeof undefined //undefined
typeof "abc"http://string
typeof 123//number
typeof true//boolean

//劃重點(diǎn)
typeof {}//object
typeof null//object
typeof console.log//function

強(qiáng)制類型轉(zhuǎn)換

邏輯運(yùn)算符

console.log(""||"abc")//"abc"
console.log(!window.abc)//true

//判斷一個變量會被當(dāng)做true還是false
var a = 100
console.log(!!a)//true

JS中的內(nèi)置函數(shù)

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

原型和原型鏈

1.構(gòu)造函數(shù)

//示例
function Foo(name,age){
    this.name = name;
    this.age = age;
    this.class = "class-1"
    //return this
}
var f = new Foo("zwt",21);//可以創(chuàng)建多個對象

2.構(gòu)造函數(shù)--擴(kuò)展

1.var a = {} 其實(shí)是 var a = new Object()的語法糖
2.var a = [] 其實(shí)是var a = new Array()的語法糖
3.function Foo(){...}其實(shí)是 var Foo = new Function(...)
4.使用instanceof判斷一個函數(shù)是否是一個變量的構(gòu)造函數(shù)

原型規(guī)則和示例

1.所有的引用類型（數(shù)組 對象 函數(shù)）都具有對象特性，既可自由擴(kuò)展屬性（除nul外）
2.所有的引用類型（數(shù)組 對象 函數(shù)）都有一個_proto_（隱式原型）屬性，屬性值是一個普通的對象
3.所有的函數(shù)，都有一個prototype（顯示原型）屬性，屬性值也是一個普通的對象
4.所有引用類型（數(shù)組 對象 函數(shù)），_protp_屬性都指向它的構(gòu)造函數(shù)的‘prototype
5.當(dāng)試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去找它的_proto_(即它的構(gòu)造函數(shù)的prototype)中尋找。

var obj = {};
    obj.a = 20;
    alert(obj.__proto__ === Object.prototype)//true

f.toString()//要去f._proto_._proto_中查找

創(chuàng)建對象的幾種方法：

1.字面量
var o1 = {name:’o1’};
Var o11 = new Object({name:’o11})

2.通過構(gòu)造函數(shù)
Var m = function(){this.name=‘o2’}
Var o2 = new m()

3.Object.create
Var P = {name:’o3’}
Var  o3=Object.create(P)

原型、構(gòu)造函數(shù)、實(shí)例、原型鏈
?

instanceof的原理：
?

New運(yùn)算符

1.一個新對象被創(chuàng)建 它繼承自foo.prototype
2.構(gòu)造函數(shù)foo被執(zhí)行。執(zhí)行的時候，相應(yīng)的傳參會被傳入，同時上下文（this）會被指定為這個新的實(shí)例。new foo等同于new foo（） ，只能用在不傳遞任何參數(shù)的情況
3.如果構(gòu)造函數(shù)返回了一個‘對象’，那么這個對象會取代整個new出來的結(jié)果。如果構(gòu)造函數(shù)沒有返回對象，那么new出來的結(jié)果為步驟1創(chuàng)建的對象

原型鏈例子

閉包知識點(diǎn)

執(zhí)行上下文
?

This：要在執(zhí)行的時候才能確認(rèn)值，定義的時候無法確認(rèn)
?

?

DOM事件 DOM事件級別

Dom0 element.onclick = function(){}
Dom2 element.addEventListener(‘click’,function(){},false)冒泡/捕獲
Dom3 element.addEventListener(‘keyup’,function(){},false)

Dom事件模型（冒泡 捕獲）

Dom事件流

瀏覽器為頁面做交互的過程 事件流—捕獲—>目標(biāo)階段（目標(biāo)元素）—>冒泡
描述dom事件捕獲的具體流程（window—>document—>html(document.documentElement)—>body—>…—>目標(biāo)元素）
Event對象的常見應(yīng)用：
Event.preventDefault()：阻止默認(rèn)事件(如阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)的行為)
Event.stopPropagation()：阻止冒泡行為（讓子元素與父元素的響應(yīng)分離）
Event.stopImmendiateProoagation()：一個元素上綁定多個事件，按優(yōu)先級可取消后面響應(yīng)事件的執(zhí)行
Event.currentTarget：事件委托 當(dāng)前被點(diǎn)擊的元素 當(dāng)前被綁定的事件
Event.target:

自定義事件

var eve = new Event(‘custome’)
ev.addEventListener(‘custome’,function(){
    console.log(‘custome’)
});
ev.dispatchEvent(eve);//觸發(fā)

HTTP協(xié)議類 HTTP協(xié)議的主要特點(diǎn)

簡單快速（每個資源uri，固定；只要輸入uri就能找到指定的資源） 靈活（在http協(xié)議中，頭部分有數(shù)據(jù)類型，通過一個http協(xié)議，就可以完成不同數(shù)據(jù)類型的協(xié)議） 無連接（連接一次就會斷開） 無狀態(tài)（客戶端、服務(wù)端分開；http建立連接；無法記錄狀態(tài) 不能區(qū)分兩次連接）

HTTP報文的組成部分

請求報文（請求行[http方法、協(xié)議、版本 頁面介質(zhì)] 請求頭[key vaule—>告訴服務(wù)端需要的內(nèi)容] 空行[告訴服務(wù)端，下一個是請求體 不再是請求頭] 請求體） 響應(yīng)報文（狀態(tài)行 響應(yīng)頭 空行 響應(yīng)體）

HTTP方法

Get獲取資源 post傳輸資源 put更新資源 delete刪除資源 head獲取報文

POST和GET的區(qū)別

Get在瀏覽器回退時是無害的，而post會再次提交請求
Get產(chǎn)生的url地址可以被收藏 而post不可以
Get請求會被瀏覽器主動緩存 而post不會，除非手動設(shè)置
Get請求只能進(jìn)行rul編碼，而post支持多種編碼方式
Get請求在url中傳送的參數(shù)是有長度限制的，而post沒有限制
Get請求參數(shù)會被完整保留在瀏覽器歷史記錄中，而post中的參數(shù)不會被保留
對參數(shù)的數(shù)據(jù)類型，get只接受ascll字符，而post沒有限制
Get比post更不安全 因?yàn)閰?shù)直接暴露在url上，所有不能用來傳遞敏感信息
get參數(shù)通過url傳遞，post放在request body中

HTTP狀態(tài)碼

1xx：指示信息-表示請求已接收，繼續(xù)處理
2xx：成功-表示請求已經(jīng)被成功接收
3xx：重定向-要完成請求必須進(jìn)行更進(jìn)一步的操作
4xx：客戶端錯誤-請求有語法錯誤或請求無法實(shí)現(xiàn)
5xx：服務(wù)器錯誤-服務(wù)器未能實(shí)現(xiàn)合法的請求

200 0K：客戶端請求成功
206：客戶端發(fā)送了一個帶有range頭的get請求，服務(wù)器完成了它（比如video播放視頻）
301：所有請求的頁面已經(jīng)轉(zhuǎn)移至新的url 永久性重定向
302：所有請求的頁面已經(jīng)臨時轉(zhuǎn)移至新的url
304：客戶端有緩沖的文檔并發(fā)出了一個條件性的請求，服務(wù)器告訴客戶沒原來緩沖的文檔還可以繼續(xù)使用

400：客戶端請求有語法錯誤，不能被服務(wù)器所理解
401：請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和www-authenticate報頭域一起使用
403：對被請求頁面的訪問被禁止
404：請求資源不存在
500：服務(wù)器發(fā)生不可預(yù)期的錯誤 原來緩沖的文檔還可以繼續(xù)使用
503：請求未完成，服務(wù)器臨時過載或當(dāng)機(jī)，一段時間可能恢復(fù)正常

持久連接

http協(xié)議采用‘請求-應(yīng)答’模式，當(dāng)使用普通模式，即非keep-alive（持久連接）模式時，每個請求、應(yīng)答客戶和服務(wù)器都要新建一個連接，完成之后立刻斷開連接（http協(xié)議為無連接的協(xié)議）
當(dāng)使用keep-alive模式（持久連接 連接重用）時，keep-alive功能使客戶端到服務(wù)器端的連接持續(xù)有效，當(dāng)出現(xiàn)對服務(wù)器的后續(xù)請求時，keep-alive功能避免了建立或者重新建立連接

管線化

在使用持久連接的情況下，某個連接上消息的傳遞類似于：(連接無中斷)請求1->響應(yīng)1->請求2->響應(yīng)2->請求3->響應(yīng)3
某個連接上的消息變成了類似這樣：（管線化）
請求1->請求2->請求3->響應(yīng)1->響應(yīng)2->響應(yīng)3

管線化機(jī)制通過持久連接完成，僅HTTP/1.1支持此技術(shù)
只有g(shù)et和head請求可以進(jìn)行管線化，而post則有所限制
除此創(chuàng)建連接時不應(yīng)啟動管線機(jī)制，因?yàn)閷Ψ剑ǚ?wù)器）不一定支持http/1.1版本的協(xié)議
管線化不會影響響應(yīng)到來的順序，如上面的例子所示，響應(yīng)返回的順序并未改變
http/1.1要求服務(wù)器端支持管線化，但并不要求服務(wù)器端也對響應(yīng)進(jìn)行管線化處理，只是要求對管線化的請求不失敗即可
由于上面提到的服務(wù)器端的問題，開啟管線化很可能并不會帶來大幅度的性能提升，而且很多服務(wù)器端和代理程序?qū)芫€化的支持并不好，因此現(xiàn)代瀏覽器如chrome和firefox默認(rèn)并未開啟管線化支持

事件

Ie低版本使用attachEvent綁定事件 和w3c標(biāo)準(zhǔn)不一樣
?

獲得 body 元素的節(jié)點(diǎn)名稱：
document.body.nodeName;

通用的綁定事件函數(shù)

//selector存放選擇器（使用代理時用）
    function bindEvent(elem,type,selector,fn) {
        if(fn == null){
            fn = selector;
            selector = null;
        }
        /*
        * element.matches(String selector);
        * 在SELECTORS API Level 2規(guī)范中，為DOM節(jié)點(diǎn)添加了一個方法，
        * 主要是用來判斷當(dāng)前DOM節(jié)點(diǎn)不否能完全匹配對應(yīng)的CSS選擇器規(guī)則；
        * 如果匹配成功，返回true，反之則返回false。
        * */
        elem.addEventListener(type,function (e) {
            var target;
            if(selector){
                target = e.target;
                if(target.matches(selector)){
                    fn.call(target,e)
                }
            }else{
                fn(e)
            }
        })
    }
    //使用代理
    var div1 = document.getElementById("div1");
    bindEvent(div1,"click","a",function (e) {
        console.log(this.innerHTML);
    })

    //不使用代理 [代碼簡潔 減少瀏覽器的內(nèi)存占用]
    var a = document.getElementById("a1");
    bindEvent(div1,"click",function (e) {
        console.log(a.innerHTML);
    })

XMLHttpRequest

//IE兼容性問題：低版本使用ActiveXObject
    /*
    * 0：未初始化 還沒調(diào)用send（）方法
    * 1：載入 已調(diào)用send（）方法，正在發(fā)送請求
    * 2：載入完成 send（）方法執(zhí)行完成，已經(jīng)接受到全部響應(yīng)內(nèi)容
    * 3：交互 正在解析響應(yīng)內(nèi)容
    * 4：響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
    * */

    /*
    * status
    * 2xx：表示成功處理
    * 3xx：需要重定向 瀏覽器直接跳轉(zhuǎn)
    * 4xx：客戶端請求錯誤 如404
    * 5xx：服務(wù)端錯誤
    * */
  var xhr = new XMLHttpRequest()
    xhr.open("GET","api",false);
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                alert(xhr.responseText)
            }
        }
    }
    xhr.send(null)

jsonp

/*跨域
    瀏覽器有同源策略，不允許ajax訪問其他域的接口
    協(xié)議、域名、端口、有一個不同就算跨域
    三個可以跨域的標(biāo)簽：  

頁面加載

 從輸入url到得到html的詳細(xì)過程：
 加載資源的形式 輸入url（或跳轉(zhuǎn)頁面）加載html/加載html中的靜態(tài)資源
 加載一個資源的過程 瀏覽器根據(jù)dns服務(wù)器得到域名的ip地址 向這個ip的機(jī)器發(fā)送htto請求 服務(wù)器收到、處理并返回http請求 瀏覽器得到返回內(nèi)容
瀏覽器渲染頁面的過程 根據(jù)html結(jié)構(gòu)生成dom tree  根據(jù)css生成cssom（css代碼結(jié)構(gòu)化處理） 將dom和cssom整合形成renderTree 根據(jù)renderTree開始渲染和展示 遇到