摘要:要去中查找創建對象的幾種方法字面量通過構造函數原型構造函數實例原型鏈的原理運算符一個新對象被創建它繼承自構造函數被執行。等同于,只能用在不傳遞任何參數的情況如果構造函數返回了一個對象,那么這個對象會取代整個出來的結果。
變量類型和計算 值類型&&引用類型
1.值類型
var a = 100 var b = a a = 200 console.log(b)//100
2.引用類型(對象 數組 函數)
無限制擴展屬性
var a = {age:20} var b = a b.age = 21 console.log(a.age)//21typeof運算符
typeof undefined //undefined typeof "abc"http://string typeof 123//number typeof true//boolean //劃重點 typeof {}//object typeof null//object typeof console.log//function強制類型轉換
邏輯運算符
console.log(""||"abc")//"abc" console.log(!window.abc)//true //判斷一個變量會被當做true還是false var a = 100 console.log(!!a)//trueJS中的內置函數
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
1.構造函數
//示例 function Foo(name,age){ this.name = name; this.age = age; this.class = "class-1" //return this } var f = new Foo("zwt",21);//可以創建多個對象
2.構造函數--擴展
1.var a = {} 其實是 var a = new Object()的語法糖 2.var a = [] 其實是var a = new Array()的語法糖 3.function Foo(){...}其實是 var Foo = new Function(...) 4.使用instanceof判斷一個函數是否是一個變量的構造函數原型規則和示例
1.所有的引用類型(數組 對象 函數)都具有對象特性,既可自由擴展屬性(除nul外) 2.所有的引用類型(數組 對象 函數)都有一個_proto_(隱式原型)屬性,屬性值是一個普通的對象 3.所有的函數,都有一個prototype(顯示原型)屬性,屬性值也是一個普通的對象 4.所有引用類型(數組 對象 函數),_protp_屬性都指向它的構造函數的‘prototype 5.當試圖得到一個對象的某個屬性時,如果這個對象本身沒有這個屬性,那么會去找它的_proto_(即它的構造函數的prototype)中尋找。
var obj = {}; obj.a = 20; alert(obj.__proto__ === Object.prototype)//true
f.toString()//要去f._proto_._proto_中查找
創建對象的幾種方法:
1.字面量 var o1 = {name:’o1’}; Var o11 = new Object({name:’o11}) 2.通過構造函數 Var m = function(){this.name=‘o2’} Var o2 = new m() 3.Object.create Var P = {name:’o3’} Var o3=Object.create(P)
原型、構造函數、實例、原型鏈
?
instanceof的原理:
?
1.一個新對象被創建 它繼承自foo.prototype 2.構造函數foo被執行。執行的時候,相應的傳參會被傳入,同時上下文(this)會被指定為這個新的實例。new foo等同于new foo() ,只能用在不傳遞任何參數的情況 3.如果構造函數返回了一個‘對象’,那么這個對象會取代整個new出來的結果。如果構造函數沒有返回對象,那么new出來的結果為步驟1創建的對象原型鏈例子
閉包知識點
執行上下文
?
This:要在執行的時候才能確認值,定義的時候無法確認
?
?
Dom0 element.onclick = function(){} Dom2 element.addEventListener(‘click’,function(){},false)冒泡/捕獲 Dom3 element.addEventListener(‘keyup’,function(){},false)
Dom事件模型(冒泡 捕獲)
Dom事件流瀏覽器為頁面做交互的過程 事件流—捕獲—>目標階段(目標元素)—>冒泡
描述dom事件捕獲的具體流程(window—>document—>html(document.documentElement)—>body—>…—>目標元素)
Event對象的常見應用:
Event.preventDefault():阻止默認事件(如阻止a標簽默認跳轉的行為)
Event.stopPropagation():阻止冒泡行為(讓子元素與父元素的響應分離)
Event.stopImmendiateProoagation():一個元素上綁定多個事件,按優先級可取消后面響應事件的執行
Event.currentTarget:事件委托 當前被點擊的元素 當前被綁定的事件
Event.target:
var eve = new Event(‘custome’) ev.addEventListener(‘custome’,function(){ console.log(‘custome’) }); ev.dispatchEvent(eve);//觸發HTTP協議類 HTTP協議的主要特點
簡單快速(每個資源uri,固定;只要輸入uri就能找到指定的資源) 靈活(在http協議中,頭部分有數據類型,通過一個http協議,就可以完成不同數據類型的協議) 無連接(連接一次就會斷開) 無狀態(客戶端、服務端分開;http建立連接;無法記錄狀態 不能區分兩次連接)
HTTP報文的組成部分請求報文(請求行[http方法、協議、版本 頁面介質] 請求頭[key vaule—>告訴服務端需要的內容] 空行[告訴服務端,下一個是請求體 不再是請求頭] 請求體) 響應報文(狀態行 響應頭 空行 響應體)
HTTP方法Get獲取資源 post傳輸資源 put更新資源 delete刪除資源 head獲取報文
POST和GET的區別Get在瀏覽器回退時是無害的,而post會再次提交請求
Get產生的url地址可以被收藏 而post不可以
Get請求會被瀏覽器主動緩存 而post不會,除非手動設置
Get請求只能進行rul編碼,而post支持多種編碼方式
Get請求在url中傳送的參數是有長度限制的,而post沒有限制
Get請求參數會被完整保留在瀏覽器歷史記錄中,而post中的參數不會被保留
對參數的數據類型,get只接受ascll字符,而post沒有限制
Get比post更不安全 因為參數直接暴露在url上,所有不能用來傳遞敏感信息
get參數通過url傳遞,post放在request body中
1xx:指示信息-表示請求已接收,繼續處理
2xx:成功-表示請求已經被成功接收
3xx:重定向-要完成請求必須進行更進一步的操作
4xx:客戶端錯誤-請求有語法錯誤或請求無法實現
5xx:服務器錯誤-服務器未能實現合法的請求
200 0K:客戶端請求成功
206:客戶端發送了一個帶有range頭的get請求,服務器完成了它(比如video播放視頻)
301:所有請求的頁面已經轉移至新的url 永久性重定向
302:所有請求的頁面已經臨時轉移至新的url
304:客戶端有緩沖的文檔并發出了一個條件性的請求,服務器告訴客戶沒原來緩沖的文檔還可以繼續使用
400:客戶端請求有語法錯誤,不能被服務器所理解
401:請求未經授權,這個狀態代碼必須和www-authenticate報頭域一起使用
403:對被請求頁面的訪問被禁止
404:請求資源不存在
500:服務器發生不可預期的錯誤 原來緩沖的文檔還可以繼續使用
503:請求未完成,服務器臨時過載或當機,一段時間可能恢復正常
http協議采用‘請求-應答’模式,當使用普通模式,即非keep-alive(持久連接)模式時,每個請求、應答客戶和服務器都要新建一個連接,完成之后立刻斷開連接(http協議為無連接的協議)
當使用keep-alive模式(持久連接 連接重用)時,keep-alive功能使客戶端到服務器端的連接持續有效,當出現對服務器的后續請求時,keep-alive功能避免了建立或者重新建立連接
在使用持久連接的情況下,某個連接上消息的傳遞類似于:(連接無中斷)請求1->響應1->請求2->響應2->請求3->響應3
某個連接上的消息變成了類似這樣:(管線化)
請求1->請求2->請求3->響應1->響應2->響應3
管線化機制通過持久連接完成,僅HTTP/1.1支持此技術
只有get和head請求可以進行管線化,而post則有所限制
除此創建連接時不應啟動管線機制,因為對方(服務器)不一定支持http/1.1版本的協議
管線化不會影響響應到來的順序,如上面的例子所示,響應返回的順序并未改變
http/1.1要求服務器端支持管線化,但并不要求服務器端也對響應進行管線化處理,只是要求對管線化的請求不失敗即可
由于上面提到的服務器端的問題,開啟管線化很可能并不會帶來大幅度的性能提升,而且很多服務器端和代理程序對管線化的支持并不好,因此現代瀏覽器如chrome和firefox默認并未開啟管線化支持
Ie低版本使用attachEvent綁定事件 和w3c標準不一樣
?
獲得 body 元素的節點名稱:
document.body.nodeName;
//selector存放選擇器(使用代理時用) function bindEvent(elem,type,selector,fn) { if(fn == null){ fn = selector; selector = null; } /* * element.matches(String selector); * 在SELECTORS API Level 2規范中,為DOM節點添加了一個方法, * 主要是用來判斷當前DOM節點不否能完全匹配對應的CSS選擇器規則; * 如果匹配成功,返回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); }) //不使用代理 [代碼簡潔 減少瀏覽器的內存占用] var a = document.getElementById("a1"); bindEvent(div1,"click",function (e) { console.log(a.innerHTML); })XMLHttpRequest
//IE兼容性問題:低版本使用ActiveXObject /* * 0:未初始化 還沒調用send()方法 * 1:載入 已調用send()方法,正在發送請求 * 2:載入完成 send()方法執行完成,已經接受到全部響應內容 * 3:交互 正在解析響應內容 * 4:響應內容解析完成,可以在客戶端調用了 * */ /* * status * 2xx:表示成功處理 * 3xx:需要重定向 瀏覽器直接跳轉 * 4xx:客戶端請求錯誤 如404 * 5xx:服務端錯誤 * */ 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訪問其他域的接口 協議、域名、端口、有一個不同就算跨域 三個可以跨域的標簽:頁面加載
從輸入url到得到html的詳細過程: 加載資源的形式 輸入url(或跳轉頁面)加載html/加載html中的靜態資源 加載一個資源的過程 瀏覽器根據dns服務器得到域名的ip地址 向這個ip的機器發送htto請求 服務器收到、處理并返回http請求 瀏覽器得到返回內容 瀏覽器渲染頁面的過程 根據html結構生成dom tree 根據css生成cssom(css代碼結構化處理) 將dom和cssom整合形成renderTree 根據renderTree開始渲染和展示 遇到