前端基礎(chǔ)面試題及參考答案

這篇文章給大家分享的是有關(guān)前端基礎(chǔ)面試題及參考答案的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

基礎(chǔ)題

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

介紹一下js原型繼承

查看答案

當(dāng)我們想要從 object 中讀取一個(gè)缺失的屬性時(shí)，js 會(huì)自動(dòng)從原型中獲取它

舉例：

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

總結(jié)：

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

  可以使用 obj.__proto__ 進(jìn)行訪問(wèn)。

  [[Prototype]] 引用的對(duì)象稱(chēng)為“原型”。

  要讀取 obj 屬性或者調(diào)用一個(gè)方法，而且它不存在，那么就會(huì)嘗試在原型中查找它。

  寫(xiě)/刪除直接在對(duì)象上進(jìn)行操作，它們不使用原型（除非屬性實(shí)際上是一個(gè) setter）。

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

  方法重視與當(dāng)前對(duì)象一起工作，即使它們是繼承的。

擴(kuò)展：

  構(gòu)造函數(shù)繼承、組合繼承、寄生繼承、寄生組合式繼承。

說(shuō)說(shuō)什么是防抖、節(jié)流，在實(shí)際應(yīng)用中在哪些場(chǎng)景會(huì)用到它們

防抖：

  連續(xù)觸發(fā)的事件（高頻），在單位時(shí)間T內(nèi)只執(zhí)行最后一次，

  若在T內(nèi)再次觸發(fā)，則清空定時(shí)重新計(jì)算。場(chǎng)景：模糊搜索

節(jié)流：

  連續(xù)觸發(fā)的事件（高頻），在單位時(shí)間T內(nèi)只執(zhí)行一次。窗口滾動(dòng)，獲取滾動(dòng)條top

javascript如何實(shí)現(xiàn)跨窗口通信

若子域同源，則可以通過(guò)設(shè)置document.domain將窗口視為同源站點(diǎn)，進(jìn)行通信，

  例如本地儲(chǔ)存等等方式。

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

什么是點(diǎn)擊劫持，如何防范

點(diǎn)擊劫持：

  允許惡意網(wǎng)頁(yè)以用戶的名義點(diǎn)擊 “受害站點(diǎn)”。

  通常惡意網(wǎng)頁(yè)在受害網(wǎng)站鏈接之上放置一個(gè)透明 <iframe> 標(biāo)簽。

防范：

  服務(wù)端 header 字段 X-Frame-Options 能夠允許或禁止 frame 內(nèi)頁(yè)面的顯示。

介紹一下什么是單向鏈表？有哪些特點(diǎn)？你知道的在哪些方面有鏈表的應(yīng)用

鏈表（Linked list）是一種常見(jiàn)的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)，是一種線性表，

  但是并不會(huì)按線性的順序儲(chǔ)存數(shù)據(jù)，而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針（Pointer）。

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

  但是查找一個(gè)節(jié)點(diǎn)或者訪問(wèn)特定編號(hào)的節(jié)點(diǎn)則需要 o(n)的時(shí)間，而順序表響應(yīng)的時(shí)間復(fù)雜度分別是 o(logn)和 o(1)。

特點(diǎn)：

  無(wú)需預(yù)先分配內(nèi)存,可以充分利用計(jì)算機(jī)內(nèi)存空間，實(shí)現(xiàn)靈活的內(nèi)存動(dòng)態(tài)管理

  插入/刪除節(jié)點(diǎn)不影響其他節(jié)點(diǎn)

  隨機(jī)訪問(wèn)速度較慢

  增加了結(jié)點(diǎn)的指針域，空間開(kāi)銷(xiāo)比較大

單向鏈表：

  是鏈表中最簡(jiǎn)單的一種，它包含兩個(gè)域，一個(gè)信息域和一個(gè)指針域。

  這個(gè)鏈接指向列表中的下一個(gè)節(jié)點(diǎn)，而最后一個(gè)節(jié)點(diǎn)則指向一個(gè)空值。

應(yīng)用：

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

前后端路由差別

前端路由（spa）純?yōu)g覽器行為，是由瀏覽器控制的（hash、history），

  當(dāng)打開(kāi)一個(gè)spa頁(yè)面后，切換路由，瀏覽器改變地址欄url并通過(guò)js展示對(duì)應(yīng)頁(yè)面（組件）

后端路由，切換路由時(shí)，服務(wù)端會(huì)去匹配并查找對(duì)應(yīng)資源，返回給瀏覽器并渲染。

是否研究過(guò)webpack，談?wù)勀銓?duì)它的理解及l(fā)oader的設(shè)計(jì)原則

本題相對(duì)開(kāi)放一些。

webpack個(gè)人理解：

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

  真正實(shí)現(xiàn)了通用的模塊化開(kāi)發(fā)。

loader的設(shè)計(jì)原則：

  單一職責(zé)、所有模塊都是js模塊，webpack 只支持js模塊，所有其他類(lèi)型的模塊，

  比如圖片，css等，都需要通過(guò)對(duì)應(yīng)的loader轉(zhuǎn)成js模塊。

  所以在webpack中無(wú)論任何類(lèi)型的資源，本質(zhì)上都被當(dāng)成js模塊處理。

  所有的loader都是一個(gè)管道，可以把一個(gè)loader看做是一個(gè)數(shù)據(jù)管道，

  進(jìn)口是一個(gè)字符串，然后經(jīng)過(guò)加工，輸出另一個(gè)字符串。

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

假設(shè)我們有一個(gè)函數(shù) slow(x,y,z,...) ，它是 CPU 重負(fù)載的，但它的結(jié)果是穩(wěn)定的，換句話說(shuō)，對(duì)于相同的輸入 x，y，z...，它總是返回相同的結(jié)果 XYZ，我們?cè)撊绾蝺?yōu)化，才能避免在重新計(jì)算上花費(fèi)額外的時(shí)間

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

用js實(shí)現(xiàn)一個(gè)發(fā)布-訂閱模式

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('發(fā)布新值了',param)
})
ev.broadcast('event1',1000); //發(fā)布新值了 1000
ev.broadcast('event1',2000); //發(fā)布新值了 2000
ev.broadcast('event1',3000); //發(fā)布新值了 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

請(qǐng)輸出下面代碼的打印內(nèi)容

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

小紅 小明 小紅 小紅 小紅復(fù)制代碼

請(qǐng)輸出以下代碼的打印內(nèi)容

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

感謝各位的閱讀！關(guān)于前端基礎(chǔ)面試題及參考答案就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！