前端基礎面試題及參考答案

這篇文章給大家分享的是有關前端基礎面試題及參考答案的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

基礎題

我出的這套基礎題，面試(當面答題，想百度是不存在的)好多人，情況都比較差，沒有令我滿意的，是我出題太難了么？

介紹一下js原型繼承

查看答案

當我們想要從 object 中讀取一個缺失的屬性時，js 會自動從原型中獲取它

舉例：

const animal = {
  eats: true,
  sleep: true,
  voice: '',
  bark(){
    console.log(this.voice);
  },
}
const dog = {
  run: true,
  voice: 'wang~~ wang~~',
}
dog.__proto__ = animal;
console.log(dog.run) // true
console.log(dog.eats) // true
console.log(dog.bark()) // wang~~ wang~~
console.log(dog.sleep) // true

總結：

  所有的對象都有一個隱藏的 [[Prototype]] 屬性，它可以是另一個對象或者 null。

  可以使用 obj.__proto__ 進行訪問。

  [[Prototype]] 引用的對象稱為“原型”。

  要讀取 obj 屬性或者調用一個方法，而且它不存在，那么就會嘗試在原型中查找它。

  寫/刪除直接在對象上進行操作，它們不使用原型（除非屬性實際上是一個 setter）。

  我們調用 obj.method()，而且 method 是從原型中獲取的，this 仍然會引用 obj。

  方法重視與當前對象一起工作，即使它們是繼承的。

擴展：

  構造函數繼承、組合繼承、寄生繼承、寄生組合式繼承。

說說什么是防抖、節流，在實際應用中在哪些場景會用到它們

防抖：

  連續觸發的事件（高頻），在單位時間T內只執行最后一次，

  若在T內再次觸發，則清空定時重新計算。場景：模糊搜索

節流：

  連續觸發的事件（高頻），在單位時間T內只執行一次。窗口滾動，獲取滾動條top

javascript如何實現跨窗口通信

若子域同源，則可以通過設置document.domain將窗口視為同源站點，進行通信，

  例如本地儲存等等方式。

若不同源，我們可以在通過 postMessage(data,targetOrigin) 這個接口，進行跨窗口通信。

什么是點擊劫持，如何防范

點擊劫持：

  允許惡意網頁以用戶的名義點擊 “受害站點”。

  通常惡意網頁在受害網站鏈接之上放置一個透明 <iframe> 標簽。

防范：

  服務端 header 字段 X-Frame-Options 能夠允許或禁止 frame 內頁面的顯示。

介紹一下什么是單向鏈表？有哪些特點？你知道的在哪些方面有鏈表的應用

鏈表（Linked list）是一種常見的基礎數據結構，是一種線性表，

  但是并不會按線性的順序儲存數據，而是在每一個節點里存到下一個節點的指針（Pointer）。

  由于不必須按順序儲存，鏈表在插入的時候可以達到 o(1)的復雜度，比另一種線性表順序表快得多，

  但是查找一個節點或者訪問特定編號的節點則需要 o(n)的時間，而順序表響應的時間復雜度分別是 o(logn)和 o(1)。

特點：

  無需預先分配內存,可以充分利用計算機內存空間，實現靈活的內存動態管理

  插入/刪除節點不影響其他節點

  隨機訪問速度較慢

  增加了結點的指針域，空間開銷比較大

單向鏈表：

  是鏈表中最簡單的一種，它包含兩個域，一個信息域和一個指針域。

  這個鏈接指向列表中的下一個節點，而最后一個節點則指向一個空值。

應用：

  git commit、es6的Iterator、react的fiber算法。

前后端路由差別

前端路由（spa）純瀏覽器行為，是由瀏覽器控制的（hash、history），

  當打開一個spa頁面后，切換路由，瀏覽器改變地址欄url并通過js展示對應頁面（組件）

后端路由，切換路由時，服務端會去匹配并查找對應資源，返回給瀏覽器并渲染。

是否研究過webpack，談談你對它的理解及loader的設計原則

本題相對開放一些。

webpack個人理解：

  webpack是劃時代的，比較完美解決了前端模塊依賴的問題，任何資源都是js，任何資源都可以在js中聲明依賴，

  真正實現了通用的模塊化開發。

loader的設計原則：

  單一職責、所有模塊都是js模塊，webpack 只支持js模塊，所有其他類型的模塊，

  比如圖片，css等，都需要通過對應的loader轉成js模塊。

  所以在webpack中無論任何類型的資源，本質上都被當成js模塊處理。

  所有的loader都是一個管道，可以把一個loader看做是一個數據管道，

  進口是一個字符串，然后經過加工，輸出另一個字符串。

給定一個一維數組arr，將其按一定數量num分組為二維數組，例如: 條件為arr=[0,1,2,3,4,5,6], num=3, 結果為[[0,1,2],[3,4,5],[6]]

假設我們有一個函數 slow(x,y,z,...) ，它是 CPU 重負載的，但它的結果是穩定的，換句話說，對于相同的輸入 x，y，z...，它總是返回相同的結果 XYZ，我們該如何優化，才能避免在重新計算上花費額外的時間

function slow(x,y,z) {
  // 這里可能會有重負載的CPU密集型工作
  // ...
  alert(`Called with ${XYZ}`);
  return XYZ;
}

用js實現一個發布-訂閱模式

class Event{
  constructor(){
    this.pool = new Map()
  }
  broadcast(){
    const [key,...rest] = [...arguments];
    if(this.pool.has(key)){
      const func = this.pool.get(key)
      func.apply(this, rest)
    }
  }
  addEventListenering(key, func){
    this.pool.set(key,func)
  }
  removeEventListenering(key){
    this.pool.delete(key)
  }
}
const ev = new Event();
ev.addEventListenering('event1',function(param){
  console.log('發布新值了',param)
})
ev.broadcast('event1',1000); //發布新值了 1000
ev.broadcast('event1',2000); //發布新值了 2000
ev.broadcast('event1',3000); //發布新值了 3000
ev.removeEventListenering('event1');
ev.broadcast('event1',3000);

以下代碼打印的是什么

function A() {
  this.a = 1;
}
A.prototype.b = 1;
const a = new A();
console.log(a.a);
console.log(a.b);
const b = new A();
b.__proto__.a = 2;
A.prototype.b = 2;
console.log(a.a);
console.log(a.b);

1 1 1 2

請輸出下面代碼的打印內容

var name = '小紅';
var obj = {
  name: '小明',
  sayName() {
    console.log(`${this.name}`);
  },
};
var sayName = () => {
  console.log(`${this.name}`);
};
var fn = obj.sayName;
sayName();
obj.sayName();
sayName.call(obj);
obj.sayName.call(this);
fn();

小紅 小明 小紅 小紅 小紅復制代碼

請輸出以下代碼的打印內容

new Promise((resolve) => {
  console.log(3);
  resolve();
}).then(() => {
  onsole.log(4);
});
setTimeout(() => {6
  console.log(2);
}, 0);
Promise.resolve().then(() => {
  console.log(5);
});
console.log(1);

3 1 4 5 2

感謝各位的閱讀！關于前端基礎面試題及參考答案就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！