JS面試理論題

變量類型和計算

值類型&&引用類型

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)//21

typeof運算符

typeof undefined //undefined
typeof 'abc'//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)//true

JS中的內置函數

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的原理：


New運算符

1.一個新對象被建立 它繼承自foo.prototype
2.構造函數foo被執行。執行的時候，相應的傳參會被傳入，同時上下文（this）會被指定爲這個新的實例。new foo等同於new foo（） ，只能用在不傳遞任何參數的狀況
3.若是構造函數返回了一個‘對象’，那麼這個對象會取代整個new出來的結果。若是構造函數沒有返回對象，那麼new出來的結果爲步驟1建立的對象

原型鏈例子

<script>
    function Elem(id) {
        this.elem = document.getElementById(id)
    }
    Elem.prototype.html = function (val) {
        var elem = this.elem
        if(val){
            elem.innerHTML = val;
            return this//鏈式操做
        }else{
            return elem.innerHTML
        }
    }

    var div1 = new Elem('divl')
    
    Elem.prototype.on = function (type,fn) {
        var elem = this.elem
        elem.addEventListener(type,fn);
    }
    div1.html('<p>hello</p>')
    div1.on('click',function () {
        alert('click')
    })

    console.log(div1.html())
</script>

閉包知識點

執行上下文


This：要在執行的時候才能確認值，定義的時候沒法確認




DOM事件

DOM事件級別

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中

HTTP狀態碼

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訪問其餘域的接口
    協議、域名、端口、有一個不一樣就算跨域
    三個能夠跨域的標籤：<img src=xxx> <link href=xxx> <script src=xxx>
    <img>用於打點統計 統計網站多是其餘域
    <link><script>可使用CDN CDN的也是其餘域
    <script>能夠用於JSONP
    */

    /*jsonp實現原理*/

    /*cookie
    *存儲量過小 只有4kb
    * 全部的http請求都帶着 會影響獲取資源的效率
    * API簡單 須要封裝才能用document.cookie=...
    *
    * locationStorage&sessionStorage
    * HTML5專門爲存儲而設計，最大容量5m 不會攜帶到ajax
    * API簡單易用
    * localStorage.setItem(key,value);localStorage.getItem(key);
    *在ios safari隱藏模式下 localStorage. getItem會報錯 建議同一使用try-catch封裝*/
<script>
    window.callback = function (data) {
        console.log(data)
    }
</script>
<script src="http://coding.m.imooc.com/api.js"></script>

頁面加載

從輸入url到獲得html的詳細過程：
 加載資源的形式 輸入url（或跳轉頁面）加載html/加載html中的靜態資源
 加載一個資源的過程 瀏覽器根據dns服務器獲得域名的ip地址 向這個ip的機器發送htto請求 服務器收到、處理並返回http請求 瀏覽器獲得返回內容
瀏覽器渲染頁面的過程 根據html結構生成dom tree  根據css生成cssom（css代碼結構化處理） 將dom和cssom整合造成renderTree 根據renderTree開始渲染和展現 遇到<script>時會執行並阻塞渲染（js能夠改變dom的結構）

window.onload 和DOMContentLoaded區別：
window.onload：頁面的所有資源加載完纔會執行，包括圖片 視頻等
DOMContentLoaded：dom渲染完便可執行，此時圖片 視頻還可能沒有加載完

性能優化

* 加載頁面和靜態資源  靜態資源的壓縮合並 靜態資源緩存 使用cdn 使用ssr後端渲染，讓數據直接輸出到html中
* 頁面渲染 css放前面，js放後面 懶加載（圖片懶加載，下拉加載更多） 減小dom查詢，對dom查詢作緩存 減小dom操做，多個操做盡可能合併在一塊兒執行 事件節流 DOMConetenLoaded

事件節流

var textarea = document.getElementById('text');
    var timeoutId
    textarea.addEventListener('keyup',function () {
        if(timeoutId){
            clearTimeout(timeoutId)
        }
        timeoutId = setTimeout(function () {
            //觸發change事件
        },100)
    })