前端面試常考知識點---js

1.同步和異步

詳細～
文章總結：

setTimeout(fn,ms)這個函數，是通過指定時間後，把要執行的任務加入到Event Queue中，又由於是單線程任務要一個一個執行，若是前面的任務須要的時間過久，那麼只能等着，致使真正的延遲時間遠遠大於ms。
setInterval會每隔指定的時間將註冊的函數置入Event Queue，若是前面的任務耗時過久，那麼一樣須要等待

setInterval爲了不代碼運行好幾回中間沒有間隔，當且僅當沒有該定時器的如何代碼實例時，纔會將定時器代碼添加到隊列中，但這樣可能會引發：

1. 某些間隔會被跳過
2. 多個定時器的代碼執行時間可能會比預期小。

setTimeout(function(){

    //do something

    setTimeout(arguments.callee,interval);
},interval)

上面實現了遞歸調用，這樣作的好處是：在前一個定時器代碼執行完成以前，不會向隊列插入新的定時代碼，確保不會有任何的缺失間隔。並且，它保證在下一次定時器代碼執行以前，至少要等待指定的時間間隔。
講道理，我沒搞清楚，怎麼就遞歸了
異步中的宏任務和微任務

1. macro-task(宏任務)：包括總體代碼script，setTimeout，setInterval
2. micro-task(微任務)：Promise，process.nextTick

分別把事件放入宏任務和微任務，這是一次循環，而後執行微任務，在開始下一次循環

2.閉包

關於閉包
理解起來仍是以爲怪怪的

1. 解決做用域的問題，讓函數內的變量能夠被外部訪問
2. 在函數a執行完並返回後，閉包使得Javascript的垃圾回收機制GC不會收回a所佔用的資源，由於a的內部函數b的執行須要依賴a中的變量，形成內存浪費
3. 函數式編程

3.如何判斷一個變量的類型？是Array類型？是Number類型？

四種方法

1. typeof

   • 對於基本類型，除 null 之外，都可以返回正確的結果。
   • 對於引用類型，除 function 之外，一概返回 object 類型。
   • 對於 null ，返回 object 類型。
   • 對於 function 返回 function 類型。

2. instanceof

   在原型鏈上查找
   //假設instanceof運算符左邊是L，右邊是R
   L instanceof R 
   //instanceof運算時，經過判斷L的原型鏈上是否存在R.prototype
   L.__proto__.__proto__ ..... === R.prototype ？
   //若是存在返回true 不然返回false
   注意：instanceof運算時會遞歸查找L的原型鏈，即
   L.__proto__.__proto__.__proto__.__proto__...
   直到找到了或者找到頂層爲止

   instanceof檢測左側的__proto__原型鏈上，是否存在右側的prototype原型

3. constructor

   1. null 和 undefined 是無效的對象，所以是不會有 constructor 存在的，這兩種類型的數據須要經過其餘方式來判斷。
   2. 函數的 constructor 是不穩定的，這個主要體如今自定義對象上，當開發者重寫 prototype 後，原有的 constructor 引用會丟失，constructor 會默認爲 Object

4. toString

   toString() 是 Object 的原型方法，調用該方法，默認返回當前對象的 [[Class]] 。這是一個內部屬性，其格式爲 [object Xxx] ，其中 Xxx 就是對象的類型。
   
   對於 Object 對象，直接調用 toString()  就能返回 [object Object] 。而對於其餘對象，則須要經過 call / apply 來調用才能返回正確的類型信息。

   Object.prototype.toString.call(Symbol()); //[object Symbol]
   Object.prototype.toString.call(undefined) ; // [object Undefined]
   Object.prototype.toString.call(new Error()) ; // [object Error]

5.跨域

前四種方法 CORS

1. jsonp
   
   須要後端配合，在後端會設置回調函數名、返回的數據等
   

2. documnet.domain

   • 只能把document.domain設置成自身或更高一級的父域，且主域必須相同。例如：a.b.example.com 中某個文檔的document.domain 能夠設成a.b.example.com、b.example.com 、example.com中的任意一個，可是不能夠設成 c.a.b.example.com,由於這是當前域的子域，也不能夠設成baidu.com,由於主域已經不相同了。就是隻能子域獲取父域
   • 若是想要獲取同級中其餘頁面的數據，須要嵌入iframe，且把兩個頁面的document.domain設成父域

   在頁面 http://www.example.com/a.html 中設置document.domain:
   
   在頁面 http://example.com/b.html 中也設置document.domain，並且這也是必須的，雖然這個文檔的domain就是example.com,可是仍是必須顯示的設置document.domain的值：
   

3. window.name

   在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的，並不會因新頁面的載入而進行重置。
   注意，window.name的值只能是字符串的形式，這個字符串的大小最大能容許2M左右甚至更大的一個容量，具體取決於不一樣的瀏覽器，但通常是夠用了。

   假如www.baidu.com/a.html獲取不一樣域的www.baidu.com/data.html頁面中的值
   data.html
   
   a.html
   

4. window.postMessage

   • 調用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message爲要發送的消息，類型只能爲字符串；第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，若是不想限定域，可使用通配符 * 。
   • 須要接收消息的window對象，但是經過監聽自身的message事件來獲取傳過來的消息，消息內容儲存在該事件對象的data屬性中。

5. CORS

   分爲簡單請求和非簡單請求
   須要後端設置：
   Access-Control..................

6.實現一個雙向數據綁定

點我

1. view到model
   好比input輸入框，監聽input輸入框的內容是否發生了變化，oninput事件

   // view到model
       var input = document.getElementById("a"),
       title = document.getElementById("title"); //title是文字展現區域的id
       input.oninput = function (e) {
           title.innerHTML = this.value;
       };

2. model到view
   使用defineProperty的get和set

// model到view
    Object.defineProperty(input, 'val', { //這裏必須定義一個新的屬性名稱，不能夠用value，不然會報錯。
        get: function () {
            return this.value;
        },
        set: function (val) {
            this.value = val;
            title.innerHTML = val;
        }
    });

7. 事件委託

事件委託 target和currentTarget
假設事件綁定在ul上，ul有子元素li

e.currentTarget始終指向添加監聽事件的那個對象，假如是ul，而e.target指向觸發事件監聽的那個對象，是li

注意：

1. 把事件綁定在ul上，用e.target.nodeName.toLowerCase==='li'斷定節點是否是li
2. 嵌套時，可用循環，用while找到parentNode
3. var ev = ev||window.event是事件的兼容寫法
   var target = ev.target||ev.srcElement是事件源的兼容寫法

8. async/await

promise實例
promise存在的問題

1. promise一旦執行，沒法中途取消
2. promise的錯誤沒法在外部被捕捉到，只能在內部進行預判處理
3. promise的內如何執行，監測起來很難

帶 async 關鍵字的函數，它使得你的函數的返回值一定是 promise 對象;await等的是右側「表達式」的結果(遇到await會讓出線程，但await後面那個緊跟着的那個函數不會被阻塞)