玩轉面試之javascript的簡單介紹

本文目錄一覽：

• 1、js基礎面試題131-160道題目
• 2、js基礎面試題71-80道題目
• 3、由此面試，面試官問我，js能做什麼。我知道js是幹什麼用的，到底js能做什麼，誰能給有條理的說下？
• 4、js基礎面試題1-10道

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基礎面試題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能做什麼。我知道js是幹什麼用的，到底js能做什麼，誰能給有條理的說下？

JS = JavaScript，一種計算機腳本語言，主要在web瀏覽器(客戶端)解釋執行，由網景公司開發。

JScript是由微軟公司開發的活動腳本語言，是微軟對ECMAScript規範的實現。

JavaScript 是一種新的描述語言，可以被嵌入 HTML 的文件之中。

通過 JavaScript 可以做到回應使用者的需求事件 (如： form 的輸入) 而不用任何的網絡來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過網絡傳給服務器端 (server)處理，再傳回來的過程，而直接可以被客戶端 (client) 的應用程序所處理.

腳本語言真正面向的是特定類型問題的解決，其中主要涉及如何創建更豐富、更具有互動能力的圖形用戶界面（GUI）。然而，腳本語言也許能解決客戶端編程中80%的問題。你碰到的問題可能完全就在那80%裏面。而且由於腳本編製語言的宗旨是儘可能地簡化與快速，所以在考慮其他更複雜的方案之前（如Java及ActiveX），首先應想一下腳本語言是否可行。

這裡主要指的是Javascript和Jscript簡稱JS都是互聯網上最流行的網頁腳本語言，前者與Java無任何關係，後者是微軟開發。它是網站前端開發必要的一種所謂的特效技術。

JS主要是做界面的.用於客戶端也就是瀏覽器端上執行的腳本開發。

可以使網頁有動態的效果（特效，如：圖片、文字的滾動；層的動態切換，顯示及隱藏；對html元素的操作；動態的對html內容修改；動態的修改CSS樣式；實現如下拉列表的連動 等等…），可以進行表單的輸入驗證（如：郵箱、電話、郵編的合法性，輸入內容長度及內容驗證等）

Javascript短小精悍， 又是在客戶機上執行的，大大提高了網頁的瀏覽速度和交互能力。 同時它又是專門為製作Web網頁而量身定做的一種簡單的編程語言。

JS文件只需用記事本就可打開修改，修改完成必須以JS為後綴的文件。 Javascript 是一種解釋型的、基於對象的腳本語言。儘管與 C++這樣成熟的面向對象的語言相比，JScript 的功能要弱一些，但對於它的預期用途而言，JScript 的功能已經足夠大了。

Javascript不是其他語言的精簡版（例如，它只是與 Java 有點模糊而間接的關係），也不是任何事物的簡化。不過，它有其局限性。例如，您不能使用該語言來編寫獨立運行的應用程序，並且沒有對讀寫文件的內置支持。此外，Javascript腳本只能在某個解釋器或「宿主」上運行，如 Active Server Pages（ASP）、Internet瀏覽器或者 Windows腳本宿主。

Javascript 是一種寬鬆類型的語言。寬鬆類型意味着您不必顯式定義變量的數據類型。事實上 Javascript 更進一步。您無法在JScript上明確地定義數據類型。此外，在大多數情況下，Javascript 將根據需要自動進行轉換。例如，如果將一個數值添加到由文本組成的某項（一個字符串），該數值將被轉換為文本。

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 繼承的方式和優缺點

參考答案：六種方式