noah的前端面試題（三）｜掘金技術徵文

function setCookie(cName, cValue, days) {   
 var expires = new Date();    
 expires.setTime(expires.getTime() + parseInt(days) * 24 * 60 * 60 * 1000);    
 document.cookie = cName + "=" + escape(cValue) + ";expires=" +       expires.toGMTString()+";path=/;domain=xxx.cn"; 
 };複製程式碼

function getCookie(name){     
 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));   
 if(arr != null)   return decodeURI(arr[2]); 
 return null;  
}複製程式碼

async function async1() {
console.log("async1 start");
await  async2();
 console.log("async1 end");
}
async  function async2() {
 console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
 console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
 console.log("promise1");
 resolve();
}).then(function () {
 console.log("promise2");
});
console.log('script end'); 複製程式碼

script start async1 start async2 promise1 script end async1 end promise2 settimeout  

這裡涉及到同步非同步 Microtasks Macrotasks Microtasks優先順序別高於Macrotasks  其中Microtasks Macrotasks分別是

microtasks:

• process.nextTick
• promise
• Object.observe
• MutationObserver

macrotasks:

• setTimeout
• setInterval
• setImmediate
• I/O
• UI渲染

1. 一個事件迴圈(event loop)會有一個或多個任務佇列(task queue)
   
2. task queue 就是 macrotask queue
   
3. 每一個 event loop 都有一個 microtask queue
   
4. task queue == macrotask queue != microtask queue
   
5. 一個任務 task 可以放入 macrotask queue 也可以放入 microtask queue 中

3. 關於Vue.nextTick()的正確使用 什麼時候需要用的Vue.nextTick()

在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。

1. 你在Vue生命週期的created()鉤子函式進行的DOM操作一定要放在Vue.nextTick()的回撥函式中。原因是什麼呢，原因是在created()鉤子函式執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js程式碼放進Vue.nextTick()的回撥函式中。與之對應的就是mounted鉤子函式，因為該鉤子函式執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函式中進行任何DOM操作都不會有問題 。

2. 在資料變化後要執行的某個操作，而這個操作需要使用隨資料改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回撥函式中。

5. es5 和 es6 class 有什麼區別 

用ES6定義class中的方法，定義在原型物件上的。與ES5不同的是，這些定義在原型物件的方法是不可列舉的。

ES6類和模組是嚴格模式下的；

不存在變數提升，保證子類父類的順序；

子類必須在父類的建構函式中呼叫super()，這樣才有this物件，因為this物件是從父類繼承下來的。而要在子類中呼叫父類的方法，用super關鍵詞可指代父類。

ES5中類繼承的關係是相反的，先有子類的this，然後用父類的方法應用在this上。

ES6類繼承子類的this是從父類繼承下來的這個特性，使得在ES6中可以構造原生資料結構的子類，這是ES5無法做到的。

ES6也可以定義類的靜態方法和靜態屬性，靜態的意思是這些不會被例項繼承，不需要例項化類，就可以直接拿來用。ES6中class內部只能定義方法，不能定義屬性。在方法名前加上static就表示這個方式是靜態方法，而屬性還是按照ES5的方式來實現。

7. es6 class內部箭頭函式寫法和普通函式寫法有什麼不同

class Person { 
 Run() {    //傳統形式的函式寫法  this; } 
 eat = () => {    //es6中的箭頭函式寫法  this; }     
}   複製程式碼

var Person = (function () {
    function Person() {
        var _this = this;
        this.eat = function () {    //箭頭寫法直接掛到Person的this下
            _this;        
        };   
     }   
    Person.prototype.Run = function () {    //傳統寫法則掛到prototype中定義       
     this;
    };       
    return Person;
 }());  複製程式碼