有關Javascript的面試題

獲取頁面元素位置與寬高？

• element.clientWidth = content + padding
• element.clientHeight = content + padding
• element.getBoundingClientRect() 返回值情況
  • left:包圍盒左邊 border 以外的邊緣距頁面左邊的距離
  • right:包圍盒右邊 border 以外的邊緣距頁面左邊的距離
  • top:包圍盒上邊 border 以外的邊緣距頁面頂部的距離
  • bottom:包圍盒下邊 border 以外的便於距頁面頂部的距離
  • width: content + padding + border
  • height: content + padding + border
  • 注意，設置外邊距時外邊距合併的情況

requestAnimationFrame 原理？是同步還是異步？

異步，傳入的函數在重繪之前調用

js事件機制？點擊屏幕上一個按鈕，事件是如何傳播的？

冒泡

下面代碼輸出結果？爲什麼？

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '+ p.a); // p.a: undefined
console.log('p.b: '+ p.b); // p.b: b

下面代碼輸出結果？爲什麼？

const person = {
  namea: 'menglinghua',
  say: function (){
    return function (){
      console.log(this.namea);
    };
  }
};
person.say()(); // undefined

const person = {
  namea: 'menglinghua',
  say: function (){
    return () => {
      console.log(this.namea);
    };
  }
};
person.say()(); // menglinghua

下面代碼輸出結果？爲什麼？

setTimeout(() => console.log('a'), 0);
var p = new Promise((resolve) => {
  console.log('b');
  resolve();
});
p.then(() => console.log('c'));
p.then(() => console.log('d'));
console.log('e');
// 結果：b e c d a
// 任務隊列優先級：promise.Trick()>promise的回調>setTimeout>setImmediate

async function async1() {
    console.log("a");
    await  async2(); //執行這一句後，await會讓出當前線程，將後面的代碼加到任務隊列中，然後繼續執行函數後面的同步代碼
    console.log("b");

}
async function async2() {
   console.log( 'c');
}
console.log("d");
setTimeout(function () {
    console.log("e");
},0);
async1();
new Promise(function (resolve) {
    console.log("f");
    resolve();
}).then(function () {
    console.log("g");
});
console.log('h');
// 誰知道爲啥結果不一樣？？？？？？？？？？？？？
// 直接在控制檯中運行結果：      d a c f h g b e
// 在頁面的script標籤中運行結果：d a c f h b g e

js bind 實現機制？手寫一個 bind 方法？

function bind(fn, context){
  return function (){
     return fn.apply(context, arguments);
  }
}

實現 vue 中的 on,emit,off,once，手寫代碼。

用 js 實現雙鏈表，手寫代碼？

vue 的雙向綁定機制？詳細介紹。

哪些操作會引起瀏覽器重繪和重排？

• postion:absolute; left:100px;會不會引起？
• translateX:100px;會不會引起？
• getBoundingClientRect會不會引起？
• getClientWidth、getClientHeight會不會引起？

ps:

http://www.cnblogs.com/yuri2016/p/6542625.html