javascript面試78題的簡單介紹

本文目錄一覽：

• 1、js基礎面試題71-80道題目
• 2、js基礎面試題131-160道題目
• 3、JS面試題：[1, 2, 3].map(parseInt)
• 4、有哪些經典的 Web 前端或者 JavaScript 面試筆試題
• 5、前端經典面試題(包含JS、CSS、React、瀏覽器等)
• 6、js基礎面試題1-10道

js基礎面試題71-80道題目

71.IE 和標準下有哪些兼容性的寫法

參考答案：

參與互動

72.變數提升

參考答案：

A、js 代碼執行的過程

B、變數提升發生的環境：發生在代碼所處的當前作用域。

解析：

對應面試題

參與互動

73.如何阻止冒泡與默認行為

參考答案：

解析：

當需要阻止冒泡行為時，可以使用

當需要阻止默認行為時，可以使用

參與互動

74.js 中 this 閉包 作用域

參考答案：

this：指向調用上下文

閉包：定義一個函數就開闢了一個局部作用域，整個 js 執行環境有一個全局作用域

作用域：一個函數可以訪問其他函數中的變數（閉包是一個受保護的變數空間）

參與互動

75.javascript 的本地對象，內置對象和宿主對象

參考答案：

1.本地對象

ECMA-262 把本地對象（native object）定義為「獨立於宿主環境的 ECMAScript 實現提供的對象”。簡單來說，本地對象就是 ECMA-262 定義的類（引用類型）。它們包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

2.內置對象

JS中內置了17個對象，常用的是Array對象、Date對象、正則表達式對象、string對象、Global對象

3.宿主對象

由ECMAScript實現的宿主環境提供的對象，可以理解為：瀏覽器提供的對象。所有的BOM和DOM都是宿主對象。

參與互動

76.javascript 的同源策略

參考答案：一段腳本只能讀取來自於同一來源的窗口和文檔的屬性

解析：

同源策略：限制從一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。（來自 MDN 官方的解釋）

簡單來說就是：一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裡的同一來源指的是主機名、協議和埠號的組合 具體解釋：

（1）源包括三個部分：協議、域名、埠（http 協議的默認埠是 80）。如果有任何一個部分不同，則源不同，那就是跨域了。

（2）限制：這個源的文檔沒有權利去操作另一個源的文檔。這個限制體現在：（要記住）

Cookie、LocalStorage 和 IndexDB 無法獲取。

無法獲取和操作 DOM。

不能發送 Ajax 請求。我們要注意，Ajax 只適合同源的通信。

同源策略帶來的麻煩：ajax 在不同域名下的請求無法實現，需要進行跨域操作

參與互動

77.事件冒泡與事件捕獲

參考答案：

事件冒泡：由最具體的元素（目標元素）向外傳播到最不具體的元素

事件捕獲：由最不確定的元素到目標元素

參與互動

78.foo = foo||bar ，這行代碼是什麼意思？為什麼要這樣寫？

參考答案：

這種寫法稱為短路表達式

解析：

相當於

常用於函數參數的空判斷

參與互動

79.複雜數據類型如何轉變為字元串

參考答案：

參與互動

80.javascript 中 this 的指向問題

參考答案：

解析：

全局環境下，this 始終指向全局對象（window），無論是否嚴格模式；

2.1 普通函數

普通函數內部的 this 分兩種情況，嚴格模式和非嚴格模式。

（1）非嚴格模式下，沒有被上一級的對象所調用, this 默認指向全局對象 window。

（2）嚴格模式下，this 指向 undefined。

2.2 函數作為對象的方法

（1）函數有被上一級的對象所調用，那麼 this 指向的就是上一級的對象。

（2）多層嵌套的對象，內部方法的 this 指向離被調用函數最近的對象（window 也是對象，其內部對象調用方法的 this 指向內部對象， 而非 window）。

特殊例子

2.3 原型鏈中的 this

（1）如果該方法存在於一個對象的原型鏈上，那麼 this 指向的是調用這個方法的對象，就像該方法在對象上一樣。

上述例子中，對象 p 沒有屬於它自己的 f 屬性，它的 f 屬性繼承自它的原型。當執行 p.f()時，會查找 p 的原型鏈，找到 f 函數並執行。因為 f 是作為 p 的方法調用的，所以函數中的 this 指向 p。

（2）相同的概念也適用於當函數在一個 getter 或者 setter 中被調用。用作 getter 或 setter 的函數都會把 this 綁定到設置或獲取屬性的對象。

（3）call()和 apply()方法：當函數通過 Function 對象的原型中繼承的方法 call() 和 apply() 方法調用時， 其函數內部的 this 值可綁定到 call() apply() 方法指定的第一個對象上， 如果第一個參數不是對象，JavaScript 內部會嘗試將其轉換成對象然後指向它。

（4）bind()方法：由 ES5 引入， 在 Function 的原型鏈上， Function.prototype.bind。通過 bind 方法綁定後， 函數將被永遠綁定在其第一個參數對象上， 而無論其在什麼情況下被調用。

2.4 構造函數中的 this

當一個函數用作構造函數時（使用 new 關鍵字），它的 this 被綁定到正在構造的新對象。

構造器返回的默認值是 this 所指的那個對象，也可以手動返回其他的對象。

特殊例子

當 this 碰到 return 時

2.5 setTimeout setInterval

（1）對於延時函數內部的回調函數的 this 指向全局對象 window；

（2）可以通過 bind()方法改變內部函數 this 指向。

3.1 作為一個 DOM 事件處理函數

當函數被用作事件處理函數時，它的 this 指向觸發事件的元素（針對 addEventListener 事件）。

3.2 作為一個內聯事件處理函數

（1）當代碼被內聯處理函數調用時，它的 this 指向監聽器所在的 DOM 元素；

（2）當代碼被包括在函數內部執行時，其 this 指向等同於 普通函數直接調用的情況，即在非嚴格模式指向全局對象 window，在嚴格模式指向 undefined：

4.1 全局環境中

在全局代碼中，箭頭函數被設置為全局對象：

4.2 this 捕獲上下文

箭頭函數沒有自己的 this，而是使用箭頭函數所在的作用域的 this，即指向箭頭函數定義時（而不是運行時）所在的作用域。

4.2 this 捕獲上下文

箭頭函數沒有自己的 this，而是使用箭頭函數所在的作用域的 this，即指向箭頭函數定義時（而不是運行時）所在的作用域。

在 setTimeout 中的 this 指向了構造函數新生成的對象，而普通函數指向了全局 window 對象。

4.3 箭頭函數作為對象的方法使用

箭頭函數作為對象的方法使用，指向全局 window 對象；而普通函數作為對象的方法使用，則指向調用的對象。

4.4 箭頭函數中，call()、apply()、bind()方法無效

4.5 this 指向固定化

箭頭函數可以讓 this 指向固定化，這種特性很有利於封裝回調函數

上面代碼的 init 方法中，使用了箭頭函數，這導致這個箭頭函數裡面的 this，總是指向 handler 對象。如果不使用箭頭函數則指向全局 document 對象。

4.6 箭頭函是不適用場景

（1）箭頭函數不適合定義對象的方法（方法內有 this），因為此時指向 window；

（2）需要動態 this 的時候，也不應使用箭頭函數。

參與互動

js基礎面試題131-160道題目

131.用原生 JavaScript 的實現過什麼功能嗎？

參考答案：輪播圖、手風琴、放大鏡、3D動畫效果等，切記，所答的一定要知道實現原理！，不知道還不如不說！

參與互動

132.javascript 代碼中的”use strict”; 是什麼意思 ? 使用它區別是什麼？

參考答案：意思是使用嚴格模式，使用嚴格模式，一些不規範的語法將不再支持

參與互動

133.簡述創建函數的幾種方式

參考答案：

參與互動

134.window.location.search() 返回的是什麼？

參考答案：查詢(參數)部分。除了給動態語言賦值以外，我們同樣可以給靜態頁面, 並使用 javascript 來獲得相信應的參數值 返回值：?ver=1.0id=timlq 也就是問號後面的！

參與互動

135.window.location.hash 返回的是什麼？

參考答案：錨點 ， 返回值：#love ；

參與互動

136.window.location.reload() 作用？

參考答案：刷新當前頁面

參與互動

137.為什麼不能定義 1px 左右的 p 容器？

參考答案： IE6 下這個問題是因為默認的行高造成的，解決的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

參與互動

138.BOM 對象有哪些，列舉 window 對象？

參考答案：

參與互動

139.簡述 readonly 與 disabled 的區別

參考答案：

參與互動

140.為什麼擴展 javascript 內置對象不是好的做法？

參考答案：

參與互動

141.什麼是三元表達式？「三元」表示什麼意思？

參考答案：三元如名字表示的三元運算符需要三個操作數。

語法是 條件 ? 結果1 : 結果2; .這裡你把條件寫在問號(?)的前面後面跟著用冒號(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。

參與互動

142.我們給一個 dom 同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲

參考答案：所有事件的順序是：其他元素捕獲階段事件 – 本元素代碼順序事件 – 其他元素冒泡階段事件 。

參考

參與互動

144.簡述一下 Handlebars 的基本用法？

參考答案：沒有用過的話說出它是幹什麼的即可

參與互動

143.簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

參考答案：

參與互動

145.前端 templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?

參考答案：

參與互動

146.知道什麼是 webkit 么? 知道怎麼用瀏覽器的各種工具來調試和 debug 代碼么?

參考答案：Webkit 是瀏覽器引擎，包括 html 渲染和 js 解析功能，手機瀏覽器的主流內核，與之相對應的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也稱 MSHTML，IE 使用）。 對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後台請求信息查看，js 調試工具使用，熟練使用這些工具可以快速提高解決問題的效率

參與互動

147.如何測試前端代碼? 知道 BDD, TDD, Unit Test 么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

參考答案：了解 BDD 行為驅動開發與 TDD 測試驅動開發已經單元測試相關概念

參與互動

148.JavaScript 的循環語句有哪些？

參考答案：while for do while forEach

參與互動

149.作用域-編譯期執行期以及全局局部作用域問題

參考答案：js 執行主要的兩個階段：預解析和執行期

參與互動

150.如何添加 html 元素的事件，有幾種方法？請列舉

參考答案：直接在標籤里添加；在元素上添加、使用事件註冊函數添加

參與互動

151.列舉瀏覽器對象模型 BOM 里常用的至少 4 個對象，並列舉 window 對象的常用方法至少 5 個

參考答案：

對象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

參與互動

152.事件綁定的方式

參考答案：

參與互動

153.事件循環

參考答案：事件循環是一個單線程循環，用於監視調用堆棧並檢查是否有工作即將在任務隊列中完成。如果調用堆棧為空並且任務隊列中有回調函數，則將回調函數出隊並推送到調用堆棧中執行。

參與互動

154.事件模型

參考答案：

解析：參考

參與互動

155.如何自定義事件

參考答案：

1.原生提供了 3 個方法實現自定義事件 2.createEvent，設置事件類型，是 html 事件還是 滑鼠事件 3.initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件 4.dispatchEvent 觸發事件

MDN

參與互動

156.target 和 currentTarget 區別

參考答案：

參與互動

157.prototype 和__proto__的關係是什麼

參考答案：

所有的對象都擁有__proto__屬性，它指向對象構造函數的 prototype 屬性

所有的函數都同時擁有__proto__和 protytpe 屬性 函數的__proto__指向自己的函數實現 函數的 protytpe 是一個對象 所以函數的 prototype 也有__proto__屬性 指向 Object.prototype

Object.prototype.__proto__指向 null

參與互動

158.什麼是原型屬性？

參考答案：從構造函數的prototype屬性出發找到原型，這時候就把原型稱之為構造函數的原型屬性

參與互動

159.什麼是原型對象？

參考答案：從實例的__proto__出發，找到原型，這時候就把原型稱之為實例的原型對象。

參與互動

160.使用 let、var 和 const 創建變數有什麼區別

參考答案：

let 和 const 的區別在於：let 允許多次賦值，而 const 只允許一次。

JS面試題：[1, 2, 3].map(parseInt)

顯而易見的，在該題目中有兩個JavaScript方法，一個是 Array.prototype.map ，另一個是 parseInt() 。

首先是 Array.prototype.map 方法，這是ES5給出的數組實例的方法。給map傳入一個回調函數，map就會遍曆數組，將相關信息一起傳入回調函數，並取回這個回調函數的返回值作為新數組的對應索引的元素，並返回這個新數組。

回調函數每次可以拿到三個值——（1）數組元素（2）索引值（3）數組本身

註：傳遞給map()的函數的調用方式和傳遞給forEach()的函數的調用方式一樣，但傳遞給map()的函數應該要有返回值。map()返回的是新數組，它不修改調用數組。如果調用數組是稀疏數組，則返回的數組也是稀疏數組——具有相同的長度和相同的缺失元素。

Array.prototype.map方法的底層實現

parseInt函數的作用是將第一個字元串轉換為數字，它接受兩個參數，第一個參數是我們需要轉換的字元串，第二個參數是可選的，它代表字元串的基數，即該參數表明我們需要通過幾進位去對這個字元串完成轉換，如2，就代表字元串是用二進位表達的。如果我們省略第二個參數，當字元串以 0x 或 0X 開頭，它就會被當作十六進位，否則被當作十進位。

特殊情況：當parseInt的第二個參數為0時，相當於第二個參數沒有傳，字元串會被當成十進位，該情況也是最常用的情況。

此外，當字元串的第一個非空格字元無法轉換成數字時，也會返回NaN。

下面給出一些例子：

[1, 2, 3].map(parseInt)的parseInt 作為回調函數拿到了map提供的三個參數，得益於JavaScript是弱類型語言，所以傳參數量不匹配也不會報錯，只會把不用的參數拋棄掉，將缺少的參數設置為undefined。

這裡的parseInt只用到了兩個參數，分別是 數組元素 和 索引值 。

實際上我們可以把題目展開成如下函數：

如此便清晰明了了，我們很容易得到以下結果：

所以最後我們得到返回結果： [1, NaN, NaN]

有哪些經典的 Web 前端或者 JavaScript 面試筆試題

HTML、CSS部分

8.html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，地理定位等功能的增加。

* 繪畫 canvas 元素

用於媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，比如 article、footer、header、nav、section

表單控制項，calendar、date、time、email、url、search

CSS3實現圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba

新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

* 是IE8/IE7/IE6支持通過document.createElement方法產生的標籤，

可以利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還需要添加標籤默認的樣式：

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

!–[if lt IE 9]

script src=””/script

![endif]–

9.你怎麼來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?

* 首先劃分成頭部、body、腳部；。。。。。

*

實現效果圖是最基本的工作，精確到2px；

與設計師，產品經理的溝通和項目的參與

做好的頁面結構，頁面重構和用戶體驗

處理hack，兼容、寫出優美的代碼格式

針對伺服器的優化、擁抱 HTML5。

10.常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？

* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。

（理解這些框架的功能、性能、設計原理）

* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

* 城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，載入器，js引擎更好）

JavaScript原型，原型鏈 ? 有什麼特點？

* 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。

* 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

* JavaScript的數據對象有那些屬性值？

writable：這個屬性的值是否可以改。

configurable：這個屬性的配置是否可以刪除，修改。

enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。

value：屬性值。

* 當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，就會查找他的Prototype對象是否有這個屬性。

function clone(proto) {

function Dummy() { }

Dummy.prototype = proto;

Dummy.prototype.constructor = Dummy;

return new Dummy(); //等價於Object.create(Person);

}

function object(old) {

function F() {};

F.prototype = old;

return new F();

}

var newObj = object(oldObject);

12.列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？

1. block 象塊類型元素一樣顯示。

none 預設值。向行內元素類型一樣顯示。

inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。

list-item 象塊類型元素一樣顯示，並添加樣式列表標記。

2.

*absolute

生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

*fixed （老IE不支持）

生成絕對定位的元素，相對於瀏覽器窗口進行定位。

*relative

生成相對定位的元素，相對於其正常位置進行定位。

* static 默認值。沒有定位，元素出現在正常的流中

*（忽略 top, bottom, left, right z-index 聲明）。

* inherit 規定從父元素繼承 position 屬性的值。

13.頁面重構怎麼操作？

編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。

14.語義化的理解？

html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。

搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

15.HTML5的離線儲存？

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 數據在瀏覽器關閉後自動刪除。

16.為什麼要初始化CSS樣式。

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

17.(寫)描述一段語義的html代碼吧。

（HTML5中新增加的很多標籤（如：article、nav、header和footer等）

就是基於語義化設計原則）

div id=”header”

h1標題 /h1

h2專註Web前端技術 /h2

/div

語義 HTML 具有以下特性：

文字包裹在元素中，用以反映內容。例如：

段落包含在 p 元素中。

順序表包含在ol元素中。

從其他來源引用的大型文字塊包含在blockquote元素中。

HTML 元素不能用作語義用途以外的其他目的。例如：

h1包含標題，但並非用於放大文本。

blockquote包含大段引述，但並非用於文本縮進。

空白段落元素 ( p/p ) 並非用於跳行。

文本並不直接包含任何樣式信息。例如：

不使用 font 或 center 等格式標記。

類或 ID 中不引用顏色或位置。

18.absolute的containing block計算方式跟正常流有什麼不同？

19.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

20.對BFC規範的理解？（W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。）

21.iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript

動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

22.css定義的權重

以下是權重的規則：標籤的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

/*權重為1*/

div{

}

/*權重為10*/

.class1{

}

/*權重為100*/

#id1{

}

/*權重為100+1=101*/

#id1 div{

}

/*權重為10+1=11*/

.class1 div{

}

/*權重為10+10+1=21*/

.class1 .class2 div{

}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

23.eval是做什麼的？

它的功能是把對應的字元串解析成JS代碼並運行；

避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

23.寫一個通用的事件偵聽器函數

`// event(事件)工具集，來源：

markyun.Event = {

// 頁面載入完成後

readyEvent : function(fn) {

if (fn==null) {

fn=document;

}

var oldonload = window.onload;

if (typeof window.onload != ‘function’) {

window.onload = fn;

} else {

window.onload = function() {

oldonload();

fn();

};

}

},

// 視能力分別使用dom0||dom2||IE方式 來綁定事件

// 參數： 操作的元素,事件名稱 ,事件處理程序

addEvent : function(element, type, handler) {

if (element.addEventListener) {

//事件類型、需要執行的函數、是否捕捉

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent(‘on’ + type, function() {

handler.call(element);

});

} else {

element[‘on’ + type] = handler;

}

},

// 移除事件

removeEvent : function(element, type, handler) {

if (element.removeEnentListener) {

element.removeEnentListener(type, handler, false);

} else if (element.datachEvent) {

element.detachEvent(‘on’ + type, handler);

} else {

element[‘on’ + type] = null;

}

},

// 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)

stopPropagation : function(ev) {

if (ev.stopPropagation) {

ev.stopPropagation();

} else {

ev.cancelBubble = true;

}

},

// 取消事件的默認行為

preventDefault : function(event) {

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

},

// 獲取事件目標

getTarget : function(event) {

return event.target || event.srcElement;

},

// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；

getEvent : function(e) {

var ev = e || window.event;

if (!ev) {

var c = this.getEvent.caller;

while (c) {

ev = c.arguments[0];

if (ev Event == ev.constructor) {

break;

}

c = c.caller;

}

}

return ev;

}

};

24.99%的網站都需要被重構是那本書上寫的？

* 網站重構：應用web標準進行設計（第2版）

25.什麼叫優雅降級和漸進增強？

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。

26.Node.js的適用場景

高並發、聊天、實時消息推送

27.WEB應用從伺服器主動推送Data到客戶端有那些方式？ html5 websoket

WebSocket通過Flash

XHR長時間連接

XHR Multipart Streaming

不可見的Iframe

script標籤的長時間連接(可跨域)

前端經典面試題(包含JS、CSS、React、瀏覽器等)

防抖

節流

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

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

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

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

vue和react都是採用diff演算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff演算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這裡對應的是一個key = index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：

創建map函數

遍歷尋找

在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂「除此之外」，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的非同步調用。

**原因：**在React的setState函數實現中，會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。

虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff演算法避免了沒有必要的dom操作，從而提高性能。

具體實現步驟如下：

用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中

當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異

把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。

結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，可以點擊

繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。

性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少

聯繫：它們都能讓元素不可見

常用的一般為三種 .clearfix , clear:both , overflow:hidden ;

比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.

clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷

overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷

概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點：

缺點：

block 元素特點：

1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align

inline 元素特點

1.水平方向上根據 direction 依次布局

2.不會在元素前後進行換行

3.受 white-space 控制

4. margin/padding 在豎直方向上無效，水平方向上有效

5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定

6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效

GIF :

JPEG ：

PNG ：

七種數據類型

(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,

ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值

Object 為引用類型(範圍挺大),也包括數組、函數,

輸出結果是：

工廠模式

簡單的工廠模式可以理解為解決多個相似的問題;

單例模式

只能被實例化(構造函數給實例添加屬性與方法)一次

沙箱模式

將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值

發布者訂閱模式

就例如如我們關注了某一個公眾號,然後他對應的有新的消息就會給你推送,

代碼實現邏輯是用數組存貯訂閱者, 發布者回調函數裡面通知的方式是遍歷訂閱者數組,並將發布者內容傳入訂閱者數組

1.字面量

2.Object構造函數創建

3.使用工廠模式創建對象

4.使用構造函數創建對象

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

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

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

IE只支持事件冒泡 。

獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。

那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。

我們發現Function的原型也是Function。

我們用圖可以來明確這個關係：

這裡來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。

則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:

這裡我們可以來看出三者的關係:

在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。

在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？

函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。

函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。

在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重複調用。

call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。

除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。

bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。

如何實現一個 bind 函數

對於實現以下幾個函數，可以從幾個方面思考

如何實現一個call函數

如何實現一個apply函數

箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。

在函數中，我們首先使用 var 關鍵字聲明了 name 變數。這意味著變數在創建階段會被提升（ JavaScript 會在創建變數創建階段為其分配內存空間），默認值為 undefined ，直到我們實際執行到使用該變數的行。我們還沒有為 name 變數賦值，所以它仍然保持 undefined 的值。

使用 let 關鍵字（和 const ）聲明的變數也會存在變數提升，但與 var 不同，初始化沒有被提升。在我們聲明（初始化）它們之前，它們是不可訪問的。這被稱為「暫時死區」。當我們在聲明變數之前嘗試訪問變數時， JavaScript 會拋出一個 ReferenceError 。

關於 let 的是否存在變數提升，我們何以用下面的例子來驗證：

let 變數如果不存在變數提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變數提升，但是它存在一個「暫時死區」，在變數未初始化或賦值前不允許訪問。

變數的賦值可以分為三個階段：

關於 let 、 var 和 function ：

依次輸出：undefined – 10 – 20

答案: D

colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。

1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined

undefined {n:2}

首先，a和b同時引用了{n:2}對象，接著執行到a.x = a = {n：2}語句，儘管賦值是從右到左的沒錯，但是.的優先順序比=要高，所以這裡首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。

在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。

我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。

這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。

所有對象鍵（不包括 Symbols ）都會被存儲為字元串，即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty（’1’） 也返回 true 。

上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 ： set.has（’1’） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。

這題考察的是對象的鍵名的轉換。

catch 塊接收參數 x 。當我們傳遞參數時，這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。

之後，我們將這個塊級作用域的變數設置為 1 ，並設置變數 y 的值。現在，我們列印塊級作用域的變數 x ，它等於 1 。

在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。

js基礎面試題1-10道

1.document load 和 document ready 的區別

參考答案：文檔解析過程中，ready在載入圖片等外部資源前觸發，load在之後觸發。如果頁面中要是沒有圖片之類的媒體文件的話ready與load是差不多的，但是頁面中有文件就不一樣了，所以還是推薦大家在工作中用ready

解析：

DOM文檔解析：

頁面載入完成有兩種事件

1.load是當頁面所有資源全部載入完成後（包括DOM文檔樹，css文件，js文件，圖片資源等），執行一個函數

缺點：如果圖片資源較多，載入時間較長，onload後等待執行的函數需要等待較長時間，所以一些效果可能受到影響

代碼形式：

2.$(document).ready()是當DOM文檔樹載入完成後執行一個函數 （不包含圖片，css等）所以會比load較快執行

在原生的jS中不包括ready()這個方法，Jquery才有，jquery中有 $().ready(function)。

代碼形式為：

參與互動

2.JavaScript 中如何檢測一個變數是一個 String 類型？

參考答案：三種方法（typeof、constructor、Object.prototype.toString.call()）

解析：

參與互動

3.請用 js 去除字元串空格？

參考答案：replace 正則匹配方法、str.trim()方法、JQ 方法：$.trim(str)方法

解析：

方法一：replace 正則匹配方法

去除字元串內所有的空格：str = str.replace(/s*/g, “”);

去除字元串內兩頭的空格：str = str.replace(/^s*|s*$/g, “”);

去除字元串內左側的空格：str = str.replace(/^s*/, “”);

去除字元串內右側的空格：str = str.replace(/(s*$)/g, “”);

示例：

方法二：str.trim()方法

trim()方法是用來刪除字元串兩端的空白字元並返回，trim 方法並不影響原來的字元串本身，它返回的是一個新的字元串。

缺陷：只能去除字元串兩端的空格，不能去除中間的空格

示例：

方法三：JQ 方法：$.trim(str)方法

$.trim() 函數用於去除字元串兩端的空白字元。

注意：$.trim()函數會移除字元串開始和末尾處的所有換行符，空格(包括連續的空格)和製表符。如果這些空白字元在字元串中間時，它們將被保留，不會被移除。

示例：

參與互動

4.js 是一門怎樣的語言，它有什麼特點

參考答案：

1.腳本語言。JavaScript 是一種解釋型的腳本語言, C、C++等語言先編譯後執行, 而 JavaScript 是在程序的運行過程中逐行進行解釋。

2.基於對象。JavaScript 是一種基於對象的腳本語言, 它不僅可以創建對象, 也能使用現有的對象。

3.簡單。JavaScript 語言中採用的是弱類型的變數類型, 對使用的數據類型未做出嚴格的要求, 是基於 Java 基本語句和控制的腳本語言, 其設計簡單緊湊。

4.動態性。JavaScript 是一種採用事件驅動的腳本語言, 它不需要經過 Web 伺服器就可以對用戶的輸入做出響應。

5.跨平台性。JavaScript 腳本語言不依賴於操作系統, 僅需要瀏覽器的支持。

參與互動

5.== 和 === 的不同

參考答案： == 是抽象相等運算符，而 === 是嚴格相等運算符。 == 運算符是在進行必要的類型轉換後，再比較。 === 運算符不會進行類型轉換，所以如果兩個值不是相同的類型，會直接返回 false 。使用 == 時，可能發生一些特別的事情，例如：

如果你對 == 和 === 的概念不是特別了解，建議大多數情況下使用 ===

參與互動

6.怎樣添加、移除、移動、複製、創建和查找節點？

參考答案：

1）創建新節點

2）添加、移除、替換、插入

3）查找

參與互動

7.事件委託是什麼

參考答案：利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

解析：

1、那什麼樣的事件可以用事件委託，什麼樣的事件不可以用呢？

2、為什麼要用事件委託

3、事件冒泡與事件委託的對比

4、事件委託怎麼取索引？

拓展：

參考

參與互動

8.require 與 import 的區別

參考答案：兩者的載入方式不同、規範不同

第一、兩者的載入方式不同，require 是在運行時載入，而 import 是在編譯時載入

require(‘./a’)(); // a 模塊是一個函數，立即執行 a 模塊函數

var data = require(‘./a’).data; // a 模塊導出的是一個對象

var a = require(‘./a’)[0]; // a 模塊導出的是一個數組 ====== 哪都行

import $ from ‘jquery’;

import * as _ from ‘_’;

import {a, b, c} from ‘./a’;

import {default as alias, a as a_a, b, c} from ‘./a’; ======用在開頭

第二、規範不同，require 是 CommonJS/AMD 規範，import 是 ESMAScript6+規範

第三、require 特點：社區方案，提供了伺服器/瀏覽器的模塊載入方案。非語言層面的標準。只能在運行時確定模塊的依賴關係及輸入/輸出的變數，無法進行靜態優化。

import 特點：語言規格層面支持模塊功能。支持編譯時靜態分析，便於 JS 引入宏和類型檢驗。動態綁定。

參與互動

9.javascript 對象的幾種創建方式

參考答案：

第一種：Object 構造函數創建

這行代碼創建了 Object 引用類型的一個新實例，然後把實例保存在變數 Person 中。

第二種：使用對象字面量表示法

對象字面量是對象定義的一種簡寫形式，目的在於簡化創建包含大量屬性的對象的過程。也就是說，第一種和第二種方式創建對象的方法其實都是一樣的，只是寫法上的區別不同

在介紹第三種的創建方法之前，我們應該要明白為什麼還要用別的方法來創建對象，也就是第一種，第二種方法的缺點所在：它們都是用了同一個介面創建很多對象，會產生大量的重複代碼，就是如果你有 100 個對象，那你要輸入 100 次很多相同的代碼。那我們有什麼方法來避免過多的重複代碼呢，就是把創建對象的過程封裝在函數體內，通過函數的調用直接生成對象。

第三種：使用工廠模式創建對象

在使用工廠模式創建對象的時候，我們都可以注意到，在 createPerson 函數中，返回的是一個對象。那麼我們就無法判斷返回的對象究竟是一個什麼樣的類型。於是就出現了第四種創建對象的模式。

第四種: 使用構造函數創建對象

對比工廠模式，我們可以發現以下區別：

1.沒有顯示地創建對象

2.直接將屬性和方法賦給了 this 對象

3.沒有 return 語句

4.終於可以識別的對象的類型。對於檢測對象類型，我們應該使用 instanceof 操作符，我們來進行自主檢測：

同時我們也應該明白，按照慣例，構造函數始終要應該以一個大寫字母開頭，而非構造函數則應該以一個小寫字母開頭。

那麼構造函數確實挺好用的，但是它也有它的缺點：

就是每個方法都要在每個實例上重新創建一遍，方法指的就是我們在對象裡面定義的函數。如果方法的數量很多，就會佔用很多不必要的內存。於是出現了第五種創建對象的方法

第五種：原型創建對象模式

使用原型創建對象的方式，可以讓所有對象實例共享它所包含的屬性和方法。

如果是使用原型創建對象模式，請看下面代碼：

當為對象實例添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性。

這時候我們就可以使用構造函數模式與原型模式結合的方式，構造函數模式用於定義實例屬性，而原型模式用於定義方法和共享的屬性

第六種：組合使用構造函數模式和原型模式

解析： 參考

參與互動

10.JavaScript 繼承的方式和優缺點

參考答案：六種方式