js面試題

$JavaScript

一、閉包

• 閉包就是可以讀取其餘函數內部變量的函數

• 閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域

• 閉包的特性：

  • 函數內再嵌套函數
  • 內部函數能夠引用外層的參數和變量
  • 參數和變量不會被垃圾回收機制回收

說說你對閉包的理解

• 使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

• 閉包 的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量始終保持在內存中

• 閉包的另外一個用處，是封裝對象的私有屬性和私有方法

• 好處：可以實現封裝和緩存等；

• 壞處：就是消耗內存、不正當使用會形成內存溢出的問題

使用閉包的注意點

• 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露
• 解決方法是，在退出函數以前，將不使用的局部變量所有刪除

二、說說你對做用域鏈的理解

• 做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的
• 簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

三、JavaScript原型，原型鏈 ? 有什麼特色？

• 每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時
• 若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念
• 關係：instance.constructor.prototype = instance.__proto__

• 特色：

  • JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變

• 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的

• 就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

四、請解釋什麼是事件代理

• 事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能
• 能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒
• 能夠實現當新增子對象時無需再次對其綁定

五、Javascript如何實現繼承？

• 構造繼承
• 原型繼承
• 實例繼承

• 拷貝繼承

• 原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式

1 2 3 4 5 6 7 8 9 10 11 12 13

function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//繼承了Parent，經過原型 var demo = new Child(); alert(demo.age); alert(demo.name);//獲得被繼承的屬性 }

六、談談This對象的理解

• this老是指向函數的直接調用者（而非間接調用者）
• 若是有new關鍵字，this指向new出來的那個對象
• 在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window

七、事件模型

W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）

• 冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
• 捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
• DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
• 阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true
• 阻止捕獲：阻止事件的默認行爲，例如click - <a>後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false

八、new操做符具體幹了什麼呢?

• 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
• 屬性和方法被加入到 this 引用的對象中
• 新建立的對象由 this 所引用，而且最後隱式的返回 this

九、Ajax原理

• Ajax的原理簡單來講是在用戶和服務器之間加了—箇中間層(AJAX引擎)，經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據
• Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 1. 建立鏈接 var xhr = null; xhr = new XMLHttpRequest() // 2. 鏈接服務器 xhr.open('get', url, true) // 3. 發送請求 xhr.send(null); // 4. 接受請求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ success(xhr.responseText); } else { // fail fail && fail(xhr.status); } } }

ajax 有那些優缺點?

• 優勢：
  • 經過異步模式，提高了用戶體驗.
  • 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
  • Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
  • Ajax能夠實現動態不刷新（局部刷新）
• 缺點：
  • 安全問題 AJAX暴露了與服務器交互的細節。
  • 對搜索引擎的支持比較弱。
  • 不容易調試。

十、如何解決跨域問題?

• jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

十一、模塊化開發怎麼作？

• 當即執行函數,不暴露私有成員

1 2 3 4 5 6 7 8 9 10 11 12 13

var module1 = (function(){ 　　　　var _count = 0; 　　　　var m1 = function(){ 　　　　　　//... 　　　　}; 　　　　var m2 = function(){ 　　　　　　//... 　　　　}; 　　　　return { 　　　　　　m1 : m1, 　　　　　　m2 : m2 　　　　}; 　　})();

十二、異步加載JS的方式有哪些？

• defer，只支持IE
• async：
• 建立script，插入到DOM中，加載完畢後callBack

1三、那些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
• 閉包使用不當

1四、XML和JSON的區別？

• 數據體積方面

  • JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

• 數據交互方面

  • JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互

• 數據描述方面

  • JSON對數據的描述性比XML較差

• 傳輸速度方面

  • JSON的速度要遠遠快於XML

1五、談談你對webpack的見解

• WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源

1六、說說你對AMD和Commonjs的理解

• CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數
• AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

1七、常見web安全及防禦原理

• sql注入原理

  • 就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令

• 總的來講有如下幾點

  • 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等
  • 永遠不要使用動態拼裝SQL，可使用參數化的SQL或者直接使用存儲過程進行數據查詢存取
  • 永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接
  • 不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息

XSS原理及防範

• Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點

XSS防範方法

• 首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊

XSS與CSRF有什麼區別嗎？

• XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟

• 登陸受信任網站A，並在本地生成Cookie

• 在不登出A的狀況下，訪問危險網站B

CSRF的防護

• 服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數
• 經過驗證碼的方法

1八、用過哪些設計模式？

• 工廠模式：

  • 工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法
  • 主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字

• 構造函數模式

  • 使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
  • 直接將屬性和方法賦值給 this對象;

1九、爲何要有同源限制？

• 同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
• 舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

• offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
• clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條
• scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸

2一、javascript有哪些方法定義對象

• 對象字面量： var obj = {};
• 構造函數： var obj = new Object();
• Object.create(): var obj = Object.create(Object.prototype);

2二、常見兼容性問題？

• png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8
• 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一,，可是全局效率很低，通常是以下這樣解決：

1 2 3 4

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0; }

• IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性
• Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

2二、說說你對promise的瞭解

• 依照 Promise/A+ 的定義，Promise 有四種狀態：

  • pending: 初始狀態, 非 fulfilled 或 rejected.

  • fulfilled: 成功的操做.

  • rejected: 失敗的操做.

  • settled: Promise已被fulfilled或rejected，且不是pending

• 另外， fulfilled與 rejected一塊兒合稱 settled

• Promise 對象用來進行延遲(deferred) 和異步(asynchronous) 計算

Promise 的構造函數

• 構造一個 Promise，最基本的用法以下：

1 2 3 4 5 6 7 8 9 10 11 12

var promise = new Promise(function(resolve, reject) { if (...) { // succeed resolve(result); } else { // fails reject(Error(errMessage)); } });

• Promise 實例擁有 then 方法（具備 then 方法的對象，一般被稱爲thenable）。它的使用方法以下：

  1	promise.then(onFulfilled, onRejected)

• 接收兩個函數做爲參數，一個在 fulfilled 的時候被調用，一個在rejected的時候被調用，接收參數就是 future，onFulfilled 對應resolve, onRejected對應 reject

2三、你以爲jQuery源碼有哪些寫的好的地方

• jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，可使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈
• jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
• 有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度
• jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率

2四、vue、react、angular

• Vue.js
  一個用於建立 web 交互界面的庫，是一個精簡的 MVVM。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來。實際的 DOM 封裝和輸出格式都被抽象爲了Directives 和 Filters

• AngularJS
  是一個比較完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，自帶了豐富的 Angular指令

• react
React 僅僅是 VIEW 層是facebook公司。推出的一個用於構建UI的一個庫，可以實現服務器端的渲染。用了virtual dom，因此性能很好。

2五、Node的應用場景

• 特色：

  • 一、它是一個Javascript運行環境
  • 二、依賴於Chrome V8引擎進行代碼解釋
  • 三、事件驅動
  • 四、非阻塞I/O
  • 五、單進程，單線程

• 優勢：

  • 高併發（最重要的優勢）

• 缺點：

  • 一、只支持單核CPU，不能充分利用CPU
  • 二、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰

2六、談談你對AMD、CMD的理解

• CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數

• AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

2七、那些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
• 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

2八、web開發中會話跟蹤的方法有哪些

• cookie
• session
• url重寫
• 隱藏input
• ip地址

2九、介紹js的基本數據類型

• Undefined、Null、Boolean、Number、String

30、介紹js有哪些內置對象？

• Object 是 JavaScript 中全部對象的父對象
• 數據封裝類對象：Object、Array、Boolean、Number 和 String
• 其餘對象：Function、Arguments、Math、Date、RegExp、Error

3一、說幾條寫JavaScript的基本規範？

• 不要在同一行聲明多個變量
• 請使用===/!==來比較true/false或者數值
• 使用對象字面量替代new Array這種形式
• 不要使用全局函數
• Switch語句必須帶有default分支
• If語句必須使用大括號
• for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污

3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

• 棧：原始數據類型（Undefined，Null，Boolean，Number、String）
• 堆：引用數據類型（對象、數組和函數）
• 兩種類型的區別是：存儲位置不一樣；
• 原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
• 引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
• 在棧中的地址，取得地址後從堆中得到實體

3三、javascript建立對象的幾種方式？

javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用

• 對象字面量的方式

1	person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

• 用function來模擬無參的構造函數

1 2 3 4 5 6 7 8

function Person(){} var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work();

• 用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

1 2 3 4 5 6 7 8 9 10

function Pet(name,age,hobby){ this.name=name;//this做用域：當前對象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員"); } } var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象 maidou.eat();//調用eat方法

• 用工廠方式來建立（內置對象）

1 2 3 4 5 6 7

var wcDog =new Object(); wcDog.name="旺財"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work();

• 用原型方式來建立

1 2 3 4 5 6 7 8 9

function Dog(){ } Dog.prototype.name="旺財"; Dog.prototype.eat=function(){ alert(this.name+"是個吃貨"); } var wangcai =new Dog(); wangcai.eat();

• 用混合方式來建立

1 2 3 4 5 6 7 8 9

function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+"，我如今賣"+this.price+"萬元"); } var camry =new Car("凱美瑞",27); camry.sell();

3四、eval是作什麼的？

• 它的功能是把對應的字符串解析成JS代碼並運行
• 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）
• 由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')')

3五、null，undefined 的區別？

• undefined 表示不存在這個值。
• undefined :是一個表示」無」的原始值或者說表示」缺乏值」，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined

• 例如變量被聲明瞭，但沒有賦值時，就等於undefined

• null 表示一個對象被定義了，值爲「空值」

• null : 是一個對象(空對象, 沒有任何屬性和方法)

• 例如做爲函數的參數，表示該函數的參數不是對象；

• 在驗證null時，必定要使用　=== ，由於 ==沒法分別null 和　undefined

3六、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？

• [1, NaN, NaN]由於 parseInt 須要兩個參數 (val, radix)，其中radix 表示解析時用的基數。
• map傳了 3個(element, index, array)，對應的 radix 不合法致使解析失敗。

3七、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？

• use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲

3八、JSON 的瞭解？**

• JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式

• 它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

• JSON字符串轉換爲JSON對象:

1 2 3

var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str);

• JSON對象轉換爲JSON字符串：

1 2	var last=obj.toJSONString(); var last=JSON.stringify(obj);

3九、js延遲加載的方式有哪些？

• defer和async、動態建立DOM方式（用得最多）、按需異步載入js

40、同步和異步的區別?

• 同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
• 異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

4一、漸進加強和優雅降級

• 漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

• 優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

4二、defer和async

• defer並行加載js文件，會按照頁面上script標籤的順序執行
• async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行

4三、說說嚴格模式的限制

• 變量必須聲明後再使用
• 函數的參數不能有同名屬性，不然報錯
• 不能使用with語句
• 禁止this指向全局對象

4四、attribute和property的區別是什麼？

• attribute是dom元素在文檔中做爲html標籤擁有的屬性；
• property就是dom元素在js中做爲對象擁有的屬性。
• 對於html的標準屬性來講，attribute和property是同步的，是會自動更新的
• 可是對於自定義的屬性來講，他們是不一樣步的

4五、談談你對ES6的理解

• 新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）
• 箭頭函數
• for-of（用來遍歷數據—例如數組中的值。）
• arguments對象可被不定參數和默認參數完美代替。
• ES6將promise對象歸入規範，提供了原生的Promise對象。
• 增長了let和const命令，用來聲明變量。
• 增長了塊級做用域。
• let命令實際上就增長了塊級做用域。
• 還有就是引入module模塊的概念

4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?

• 這個語法糖可讓有OOP基礎的人更快上手js，至少是一個官方的實現了
• 但對熟悉js的人來講，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多

4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點

• 面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了
• 面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲
• 面向對象是以功能來劃分問題，而不是步驟

4八、面向對象編程思想

• 基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計
• 優勢
  • 易維護
    • 採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的
  • 易擴展
  • 開發工做的重用性、繼承性高，下降重複工做量。
  • 縮短了開發週期

4九、對web標準、可用性、可訪問性的理解

• 可用性（Usability）：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力
• 可訪問性（Accessibility）：Web內容對於殘障用戶的可閱讀和可理解性
• 可維護性（Maintainability）：通常包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和加強功能。

$編程題

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

// event(事件)工具集，來源：github.com/markyun markyun.Event = { // 視能力分別使用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.removeEventListener) { element.removeEventListener(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; }

二、如何判斷一個對象是否爲數組

1 2 3 4 5 6

function isArray(arg) { if (typeof arg === 'object') { return Object.prototype.toString.call(arg) === '[object Array]'; } return false; }

三、冒泡排序

• 每次比較相鄰的兩個數，若是後一個比前一個小，換位置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for(var j = 0; j < arr.length - 1; j++) { if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } console.log(bubbleSort(arr));

四、快速排序

• 採用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空數組 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr));

五、編寫一個方法 求一個字符串的字節長度

• 假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; i<len; i++){ if (str.charCodeAt(i) > 255) bytes++; } return bytes; } alert(GetBytes("你好,as"));

六、bind的用法，以及如何實現bind的函數和須要注意的點

• bind的做用與call和apply相同，區別是call和apply是當即調用函數，而bind是返回了一個函數，須要調用的時候再執行。
  一個簡單的bind函數實現以下

1 2 3 4 5 6

Function.prototype.bind = function(ctx) { var fn = this; return function() { fn.apply(ctx, arguments); }; };

$其餘

一、談談你對重構的理解

• 網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化， 在擴展的同時保持一致的UI

• 對於傳統的網站來講重構一般是：

  • 表格(table)佈局改成DIV+CSS

  • 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

  • 對於移動平臺的優化

  • 針對於SEO進行優化

二、什麼樣的前端代碼是好的

• 高複用低耦合，這樣文件小，好維護，並且好擴展。

三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

• 前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近

  • 實現界面交互
  • 提高用戶體驗
  • 有了Node.js，前端能夠實現服務端的一些事情

• 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

• 與團隊成員，UI設計，產品經理的溝通；

• 作好的頁面結構，頁面重構和用戶體驗；

四、你以爲前端工程的價值體如今哪

• 爲簡化用戶使用提供技術支持（交互部分）

• 爲多個瀏覽器兼容性提供支持

• 爲提升用戶瀏覽速度（瀏覽器性能）提供支持

• 爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持

• 爲展現數據提供支持（數據接口）

五、平時如何管理你的項目？

• 先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

• 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

• 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

• 頁面進行標註（例如 頁面 模塊 開始和結束）；

• CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

• JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

• 圖片採用整合的 images.png png8 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理

人事面

• 面試完你還有什麼問題要問的嗎
• 你有什麼愛好?
• 你最大的優勢和缺點是什麼?
• 你爲何會選擇這個行業，職位?
• 你以爲你適合從事這個崗位嗎?
• 你有什麼職業規劃?
• 你對工資有什麼要求?
• 如何看待前端開發？
• 將來三到五年的規劃是怎樣的？

常問

• 自我介紹
• 你的項目中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？
• 你認爲哪一個項目作得最好？
• 最近在看哪些前端方面的書？
• 平時是如何學習前端開發的？
• 你最有成就感的一件事
• 你是怎麼學習前端的

$JavaScript

一、閉包

• 閉包就是可以讀取其餘函數內部變量的函數

• 閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域

• 閉包的特性：

  • 函數內再嵌套函數
  • 內部函數能夠引用外層的參數和變量
  • 參數和變量不會被垃圾回收機制回收

說說你對閉包的理解

• 使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

• 閉包 的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量始終保持在內存中

• 閉包的另外一個用處，是封裝對象的私有屬性和私有方法

• 好處：可以實現封裝和緩存等；

• 壞處：就是消耗內存、不正當使用會形成內存溢出的問題

使用閉包的注意點

• 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露
• 解決方法是，在退出函數以前，將不使用的局部變量所有刪除

二、說說你對做用域鏈的理解

• 做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的
• 簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

三、JavaScript原型，原型鏈 ? 有什麼特色？

• 每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時
• 若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念
• 關係：instance.constructor.prototype = instance.__proto__

• 特色：

  • JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變

• 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的

• 就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

四、請解釋什麼是事件代理

• 事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能
• 能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒
• 能夠實現當新增子對象時無需再次對其綁定

五、Javascript如何實現繼承？

• 構造繼承
• 原型繼承
• 實例繼承

• 拷貝繼承

• 原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式

1 2 3 4 5 6 7 8 9 10 11 12 13

function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//繼承了Parent，經過原型 var demo = new Child(); alert(demo.age); alert(demo.name);//獲得被繼承的屬性 }

六、談談This對象的理解

• this老是指向函數的直接調用者（而非間接調用者）
• 若是有new關鍵字，this指向new出來的那個對象
• 在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window

七、事件模型

W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）

• 冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
• 捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
• DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
• 阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true
• 阻止捕獲：阻止事件的默認行爲，例如click - <a>後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false

八、new操做符具體幹了什麼呢?

• 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
• 屬性和方法被加入到 this 引用的對象中
• 新建立的對象由 this 所引用，而且最後隱式的返回 this

九、Ajax原理

• Ajax的原理簡單來講是在用戶和服務器之間加了—箇中間層(AJAX引擎)，經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據
• Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 1. 建立鏈接 var xhr = null; xhr = new XMLHttpRequest() // 2. 鏈接服務器 xhr.open('get', url, true) // 3. 發送請求 xhr.send(null); // 4. 接受請求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ success(xhr.responseText); } else { // fail fail && fail(xhr.status); } } }

ajax 有那些優缺點?

• 優勢：
  • 經過異步模式，提高了用戶體驗.
  • 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
  • Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
  • Ajax能夠實現動態不刷新（局部刷新）
• 缺點：
  • 安全問題 AJAX暴露了與服務器交互的細節。
  • 對搜索引擎的支持比較弱。
  • 不容易調試。

十、如何解決跨域問題?

• jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

十一、模塊化開發怎麼作？

• 當即執行函數,不暴露私有成員

1 2 3 4 5 6 7 8 9 10 11 12 13

var module1 = (function(){ 　　　　var _count = 0; 　　　　var m1 = function(){ 　　　　　　//... 　　　　}; 　　　　var m2 = function(){ 　　　　　　//... 　　　　}; 　　　　return { 　　　　　　m1 : m1, 　　　　　　m2 : m2 　　　　}; 　　})();

十二、異步加載JS的方式有哪些？

• defer，只支持IE
• async：
• 建立script，插入到DOM中，加載完畢後callBack

1三、那些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
• 閉包使用不當

1四、XML和JSON的區別？

• 數據體積方面

  • JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

• 數據交互方面

  • JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互

• 數據描述方面

  • JSON對數據的描述性比XML較差

• 傳輸速度方面

  • JSON的速度要遠遠快於XML

1五、談談你對webpack的見解

• WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源

1六、說說你對AMD和Commonjs的理解

• CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數
• AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

1七、常見web安全及防禦原理

• sql注入原理

  • 就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令

• 總的來講有如下幾點

  • 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等
  • 永遠不要使用動態拼裝SQL，可使用參數化的SQL或者直接使用存儲過程進行數據查詢存取
  • 永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接
  • 不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息

XSS原理及防範

• Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點

XSS防範方法

• 首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊

XSS與CSRF有什麼區別嗎？

• XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟

• 登陸受信任網站A，並在本地生成Cookie

• 在不登出A的狀況下，訪問危險網站B

CSRF的防護

• 服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數
• 經過驗證碼的方法

1八、用過哪些設計模式？

• 工廠模式：

  • 工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法
  • 主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字

• 構造函數模式

  • 使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
  • 直接將屬性和方法賦值給 this對象;

1九、爲何要有同源限制？

• 同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
• 舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

• offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
• clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條
• scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸

2一、javascript有哪些方法定義對象

• 對象字面量： var obj = {};
• 構造函數： var obj = new Object();
• Object.create(): var obj = Object.create(Object.prototype);

2二、常見兼容性問題？

• png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8
• 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一,，可是全局效率很低，通常是以下這樣解決：

1 2 3 4

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0; }

• IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性
• Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

2二、說說你對promise的瞭解

• 依照 Promise/A+ 的定義，Promise 有四種狀態：

  • pending: 初始狀態, 非 fulfilled 或 rejected.

  • fulfilled: 成功的操做.

  • rejected: 失敗的操做.

  • settled: Promise已被fulfilled或rejected，且不是pending

• 另外， fulfilled與 rejected一塊兒合稱 settled

• Promise 對象用來進行延遲(deferred) 和異步(asynchronous) 計算

Promise 的構造函數

• 構造一個 Promise，最基本的用法以下：

1 2 3 4 5 6 7 8 9 10 11 12

var promise = new Promise(function(resolve, reject) { if (...) { // succeed resolve(result); } else { // fails reject(Error(errMessage)); } });

• Promise 實例擁有 then 方法（具備 then 方法的對象，一般被稱爲thenable）。它的使用方法以下：

  1	promise.then(onFulfilled, onRejected)

• 接收兩個函數做爲參數，一個在 fulfilled 的時候被調用，一個在rejected的時候被調用，接收參數就是 future，onFulfilled 對應resolve, onRejected對應 reject

2三、你以爲jQuery源碼有哪些寫的好的地方

• jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，可使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈
• jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
• 有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度
• jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率

2四、vue、react、angular

• Vue.js
  一個用於建立 web 交互界面的庫，是一個精簡的 MVVM。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來。實際的 DOM 封裝和輸出格式都被抽象爲了Directives 和 Filters

• AngularJS
  是一個比較完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，自帶了豐富的 Angular指令

• react
React 僅僅是 VIEW 層是facebook公司。推出的一個用於構建UI的一個庫，可以實現服務器端的渲染。用了virtual dom，因此性能很好。

2五、Node的應用場景

• 特色：

  • 一、它是一個Javascript運行環境
  • 二、依賴於Chrome V8引擎進行代碼解釋
  • 三、事件驅動
  • 四、非阻塞I/O
  • 五、單進程，單線程

• 優勢：

  • 高併發（最重要的優勢）

• 缺點：

  • 一、只支持單核CPU，不能充分利用CPU
  • 二、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰

2六、談談你對AMD、CMD的理解

• CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數

• AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

2七、那些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
• 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

2八、web開發中會話跟蹤的方法有哪些

• cookie
• session
• url重寫
• 隱藏input
• ip地址

2九、介紹js的基本數據類型

• Undefined、Null、Boolean、Number、String

30、介紹js有哪些內置對象？

• Object 是 JavaScript 中全部對象的父對象
• 數據封裝類對象：Object、Array、Boolean、Number 和 String
• 其餘對象：Function、Arguments、Math、Date、RegExp、Error

3一、說幾條寫JavaScript的基本規範？

• 不要在同一行聲明多個變量
• 請使用===/!==來比較true/false或者數值
• 使用對象字面量替代new Array這種形式
• 不要使用全局函數
• Switch語句必須帶有default分支
• If語句必須使用大括號
• for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污

3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

• 棧：原始數據類型（Undefined，Null，Boolean，Number、String）
• 堆：引用數據類型（對象、數組和函數）
• 兩種類型的區別是：存儲位置不一樣；
• 原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
• 引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
• 在棧中的地址，取得地址後從堆中得到實體

3三、javascript建立對象的幾種方式？

javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用

• 對象字面量的方式

1	person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

• 用function來模擬無參的構造函數

1 2 3 4 5 6 7 8

function Person(){} var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work();

• 用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

1 2 3 4 5 6 7 8 9 10

function Pet(name,age,hobby){ this.name=name;//this做用域：當前對象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員"); } } var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象 maidou.eat();//調用eat方法

• 用工廠方式來建立（內置對象）

1 2 3 4 5 6 7

var wcDog =new Object(); wcDog.name="旺財"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work();

• 用原型方式來建立

1 2 3 4 5 6 7 8 9

function Dog(){ } Dog.prototype.name="旺財"; Dog.prototype.eat=function(){ alert(this.name+"是個吃貨"); } var wangcai =new Dog(); wangcai.eat();

• 用混合方式來建立

1 2 3 4 5 6 7 8 9

function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+"，我如今賣"+this.price+"萬元"); } var camry =new Car("凱美瑞",27); camry.sell();

3四、eval是作什麼的？

• 它的功能是把對應的字符串解析成JS代碼並運行
• 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）
• 由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')')

3五、null，undefined 的區別？

• undefined 表示不存在這個值。
• undefined :是一個表示」無」的原始值或者說表示」缺乏值」，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined

• 例如變量被聲明瞭，但沒有賦值時，就等於undefined

• null 表示一個對象被定義了，值爲「空值」

• null : 是一個對象(空對象, 沒有任何屬性和方法)

• 例如做爲函數的參數，表示該函數的參數不是對象；

• 在驗證null時，必定要使用　=== ，由於 ==沒法分別null 和　undefined

3六、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？

• [1, NaN, NaN]由於 parseInt 須要兩個參數 (val, radix)，其中radix 表示解析時用的基數。
• map傳了 3個(element, index, array)，對應的 radix 不合法致使解析失敗。

3七、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？

• use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲

3八、JSON 的瞭解？**

• JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式

• 它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

• JSON字符串轉換爲JSON對象:

1 2 3

var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str);

• JSON對象轉換爲JSON字符串：

1 2	var last=obj.toJSONString(); var last=JSON.stringify(obj);

3九、js延遲加載的方式有哪些？

• defer和async、動態建立DOM方式（用得最多）、按需異步載入js

40、同步和異步的區別?

• 同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
• 異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

4一、漸進加強和優雅降級

• 漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

• 優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

4二、defer和async

• defer並行加載js文件，會按照頁面上script標籤的順序執行
• async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行

4三、說說嚴格模式的限制

• 變量必須聲明後再使用
• 函數的參數不能有同名屬性，不然報錯
• 不能使用with語句
• 禁止this指向全局對象

4四、attribute和property的區別是什麼？

• attribute是dom元素在文檔中做爲html標籤擁有的屬性；
• property就是dom元素在js中做爲對象擁有的屬性。
• 對於html的標準屬性來講，attribute和property是同步的，是會自動更新的
• 可是對於自定義的屬性來講，他們是不一樣步的

4五、談談你對ES6的理解

• 新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）
• 箭頭函數
• for-of（用來遍歷數據—例如數組中的值。）
• arguments對象可被不定參數和默認參數完美代替。
• ES6將promise對象歸入規範，提供了原生的Promise對象。
• 增長了let和const命令，用來聲明變量。
• 增長了塊級做用域。
• let命令實際上就增長了塊級做用域。
• 還有就是引入module模塊的概念

4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?

• 這個語法糖可讓有OOP基礎的人更快上手js，至少是一個官方的實現了
• 但對熟悉js的人來講，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多

4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點

• 面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了
• 面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲
• 面向對象是以功能來劃分問題，而不是步驟

4八、面向對象編程思想

• 基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計
• 優勢
  • 易維護
    • 採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的
  • 易擴展
  • 開發工做的重用性、繼承性高，下降重複工做量。
  • 縮短了開發週期

4九、對web標準、可用性、可訪問性的理解

• 可用性（Usability）：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力
• 可訪問性（Accessibility）：Web內容對於殘障用戶的可閱讀和可理解性
• 可維護性（Maintainability）：通常包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和加強功能。

$編程題

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

// event(事件)工具集，來源：github.com/markyun markyun.Event = { // 視能力分別使用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.removeEventListener) { element.removeEventListener(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; }

二、如何判斷一個對象是否爲數組

1 2 3 4 5 6

function isArray(arg) { if (typeof arg === 'object') { return Object.prototype.toString.call(arg) === '[object Array]'; } return false; }

三、冒泡排序

• 每次比較相鄰的兩個數，若是後一個比前一個小，換位置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for(var j = 0; j < arr.length - 1; j++) { if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } console.log(bubbleSort(arr));

四、快速排序

• 採用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空數組 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr));

五、編寫一個方法 求一個字符串的字節長度

• 假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; i<len; i++){ if (str.charCodeAt(i) > 255) bytes++; } return bytes; } alert(GetBytes("你好,as"));

六、bind的用法，以及如何實現bind的函數和須要注意的點

• bind的做用與call和apply相同，區別是call和apply是當即調用函數，而bind是返回了一個函數，須要調用的時候再執行。
  一個簡單的bind函數實現以下

1 2 3 4 5 6

Function.prototype.bind = function(ctx) { var fn = this; return function() { fn.apply(ctx, arguments); }; };

$其餘

一、談談你對重構的理解

• 網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化， 在擴展的同時保持一致的UI

• 對於傳統的網站來講重構一般是：

  • 表格(table)佈局改成DIV+CSS

  • 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

  • 對於移動平臺的優化

  • 針對於SEO進行優化

二、什麼樣的前端代碼是好的

• 高複用低耦合，這樣文件小，好維護，並且好擴展。

三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

• 前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近

  • 實現界面交互
  • 提高用戶體驗
  • 有了Node.js，前端能夠實現服務端的一些事情

• 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

• 與團隊成員，UI設計，產品經理的溝通；

• 作好的頁面結構，頁面重構和用戶體驗；

四、你以爲前端工程的價值體如今哪

• 爲簡化用戶使用提供技術支持（交互部分）

• 爲多個瀏覽器兼容性提供支持

• 爲提升用戶瀏覽速度（瀏覽器性能）提供支持

• 爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持

• 爲展現數據提供支持（數據接口）

五、平時如何管理你的項目？

• 先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

• 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

• 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

• 頁面進行標註（例如 頁面 模塊 開始和結束）；

• CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

• JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

• 圖片採用整合的 images.png png8 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理

人事面

• 面試完你還有什麼問題要問的嗎
• 你有什麼愛好?
• 你最大的優勢和缺點是什麼?
• 你爲何會選擇這個行業，職位?
• 你以爲你適合從事這個崗位嗎?
• 你有什麼職業規劃?
• 你對工資有什麼要求?
• 如何看待前端開發？
• 將來三到五年的規劃是怎樣的？

常問

• 自我介紹
• 你的項目中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？
• 你認爲哪一個項目作得最好？
• 最近在看哪些前端方面的書？
• 平時是如何學習前端開發的？
• 你最有成就感的一件事
• 你是怎麼學習前端的