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;
 }());