標籤：

前端掌握這幾點，面試都笑了

10-11
前端掌握這幾點，面試都笑了

一、基礎javascript篇

1. get請求傳參長度的誤區

誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。

實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器，瀏覽器或web伺服器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:

  • HTTP 協議 未規定 GET 和POST的長度限制
  • GET的最大長度顯示是因為 瀏覽器和 web伺服器限制了 URI的長度
  • 不同的瀏覽器和WEB伺服器，限制的最大長度不一樣
  • 要支持IE，則最大長度為2083byte，若只支持Chrome，則最大長度 8182byte
  • 解決前端問題 QQ群786276452

2. 補充get和post請求在緩存方面的區別

post/get的請求區別，具體不再贅述。

補充補充一個get和post在緩存方面的區別：

  • get請求類似於查找的過程，用戶獲取數據，可以不用每次都與資料庫連接，所以可以使用緩存。
  • post不同，post做的一般是修改和刪除的工作，所以必須與資料庫交互，所以不能使用緩存。因此get請求適合於請求緩存。

3. 閉包

一句話可以概括：閉包就是能夠讀取其他函數內部變數的函數，或者子函數在外調用，子函數所在的父函數的作用域不會被釋放。

4. 類的創建和繼承

（1）類的創建（es5）：new一個function，在這個function的prototype裡面增加屬性和方法。

下面來創建一個Animal類：

// 定義一個動物類function Animal (name) { // 屬性 this.name = name || Animal; // 實例方法 this.sleep = function(){ console.log(this.name + 正在睡覺！); }}// 原型方法Animal.prototype.eat = function(food) { console.log(this.name + 正在吃： + food);};複製代碼

這樣就生成了一個Animal類，實力化生成對象後，有方法和屬性。

（2）類的繼承——原型鏈繼承

--原型鏈繼承function Cat(){ }Cat.prototype = new Animal();Cat.prototype.name = cat;// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.eat(fish));console.log(cat.sleep());console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //true複製代碼

  • 介紹：在這裡我們可以看到new了一個空對象,這個空對象指向Animal並且Cat.prototype指向了這個空對象，這種就是基於原型鏈的繼承。
  • 特點：基於原型鏈，既是父類的實例，也是子類的實例
  • 缺點：無法實現多繼承

（3）構造繼承：使用父類的構造函數來增強子類實例，等於是複製父類的實例屬性給子類（沒用到原型）

function Cat(name){ Animal.call(this); this.name = name || Tom;}// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true複製代碼

  • 特點：可以實現多繼承
  • 缺點：只能繼承父類實例的屬性和方法，不能繼承原型上的屬性和方法。

（4）實例繼承和拷貝繼承

實例繼承：為父類實例添加新特性，作為子類實例返回

拷貝繼承：拷貝父類元素上的屬性和方法

上述兩個實用性不強，不一一舉例。

（5）組合繼承：相當於構造繼承和原型鏈繼承的組合體。通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類實例作為子類原型，實現函數復用

function Cat(name){ Animal.call(this); this.name = name || Tom;}Cat.prototype = new Animal();Cat.prototype.constructor = Cat;// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // true複製代碼

  • 特點：可以繼承實例屬性/方法，也可以繼承原型屬性/方法
  • 缺點：調用了兩次父類構造函數，生成了兩份實例

（6）寄生組合繼承：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性

function Cat(name){ Animal.call(this); this.name = name || Tom;}(function(){ // 創建一個沒有實例方法的類 var Super = function(){}; Super.prototype = Animal.prototype; //將實例作為子類的原型 Cat.prototype = new Super();})();// Test Codevar cat = new Cat();console.log(cat.name);console.log(cat.sleep());console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); //true複製代碼

  • 較為推薦

5. 如何解決非同步回調地獄

promise、generator、async/await

6. 說說前端中的事件流

HTML中與javascript交互是通過事件驅動來實現的，例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下「事件流」的概念。

什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。

  • 事件捕獲階段
  • 處於目標階段
  • 事件冒泡階段

addEventListener：addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。


推薦閱讀：

TAG:前端工程師 |