摘要：字面量方式這是最簡(jiǎn)單最基本的一種方法。簡(jiǎn)單的構(gòu)造函數(shù)方式通過這樣的形式創(chuàng)建對(duì)象。結(jié)合上面的簡(jiǎn)單構(gòu)造函數(shù)和原型，一個(gè)完整的構(gòu)造函數(shù)應(yīng)該是這樣的還有一種方法就是提供的簡(jiǎn)單實(shí)現(xiàn)下中的，，創(chuàng)建一個(gè)對(duì)象談?wù)剬?duì)象的理解。避免使用表達(dá)式又稱動(dòng)態(tài)屬性。

要點(diǎn)：數(shù)據(jù)類型、面向?qū)ο蟆⒗^承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、異步裝載回調(diào)、模板引擎、Nodejs等。

基本類型：number,string,boolean,undefined,null
引用類型：基本類型以外的都是引用類型，如object/array/function/date等等
關(guān)于基本類型與引用類型的區(qū)別可以詳細(xì)看看@Naraku_的這篇文章：
[ JS 進(jìn)階 ] 基本類型 引用類型 簡(jiǎn)單賦值 對(duì)象引用
概況起來有這么幾個(gè)要點(diǎn)：

1.我們無法給基本類型的對(duì)象添加屬性和方法；

var m1 = 123;
m1.name = "abc";
console.log(m1.name); //輸出：undefined

2.基本類型對(duì)象的比較是值比較，而引用類型對(duì)象的比較是引用比較；

var m1 = 123,
    m2 = 123;
console.log(m1 === m2); //輸出：true

var o1 = {},
    o2 = {};
console.log(o1 === o2); //輸出：false

3.基本類型對(duì)象是存儲(chǔ)在棧內(nèi)存中的，而引用類型對(duì)象其實(shí)是一個(gè)存儲(chǔ)在棧內(nèi)存中的一個(gè)堆內(nèi)存地址。

4.基本類型對(duì)象賦值時(shí)（執(zhí)行=號(hào)操作），是在棧內(nèi)存中創(chuàng)建一個(gè)新的空間，然后將值復(fù)制一份到新的空間里。

5.引用類型對(duì)象賦值時(shí)（執(zhí)行=號(hào)操作），也是在棧內(nèi)存中復(fù)制一份一樣的值，但這個(gè)值是一個(gè)堆內(nèi)存地址，所以被賦值的那個(gè)對(duì)象跟前者其實(shí)是一個(gè)對(duì)象。

var o1 = {};
var o2 = o1;

o1.name = "abc";
console.log(o1.name); // --> abc
console.log(o2.name); // --> abc

o2.age = "123";
console.log(o1.age); // --> 123
console.log(o2.age); // --> 123

js的常見內(nèi)置對(duì)象類：Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

1.大家都知道typeof null輸出Object。那么null instanceof Object嗎？

console.log( typeof null ) //輸出Object
console.log( null instanceof Object) //輸出什么？

答案：false
雖然typeof null輸出Object，但null不是Object的一個(gè)實(shí)例。null是一個(gè)基本類型。之所以typeof null輸出Object，跟瀏覽器的實(shí)現(xiàn)有關(guān)。

這個(gè)問題經(jīng)常會(huì)被問道，會(huì)寫JavaScript的人都會(huì)創(chuàng)建對(duì)象，時(shí)時(shí)刻刻都在用對(duì)象，但真被問起這個(gè)問題，估計(jì)很多人都沒認(rèn)真思考過。
網(wǎng)上關(guān)于這個(gè)問題的答案也非常多，說法還不太一樣，什么構(gòu)造函數(shù)方法/原型方法/混合方法等等，亂七八糟的。
在這里，我試試捋一捋，希望能夠給你一個(gè)清晰的答案。

1.字面量方式：

這是最簡(jiǎn)單最基本的一種方法。

var obj = {};//創(chuàng)建了一個(gè)空的對(duì)象

字面量方法有兩種常用的形式。
一種是簡(jiǎn)單字面量，像上面那樣先創(chuàng)建一個(gè)空對(duì)象，然后再給這個(gè)對(duì)象加屬性和函數(shù)。

var obj = {};
obj.attr1 = 123;
obj.attr2 = "abc";
obj.func1 = function(){...};
obj.func2 = function(){...};

另一種是嵌入式字面量，像寫JSON數(shù)據(jù)似的，直接在大括號(hào)中寫屬性和函數(shù)。

var obj = {
    attr1 : 123,
    attr2 : "abc",
    func1 : function(){...},
    func2 : function(){...}
};

2.簡(jiǎn)單的構(gòu)造函數(shù)方式

通過new Person()這樣的形式創(chuàng)建對(duì)象。用new這個(gè)關(guān)鍵字是為了討好習(xí)慣了C++/Java的程序員的使用習(xí)慣。但也是JS的一大敗筆（大牛都是這么說的，我只是有樣學(xué)樣）。

function Person(name,age){
    this.name = name;
    this.age = age;
}
var p1 = new Person("Peter",20);
var p2 = new Person("Jack",21);

3.原型方式

function Person(){}
Person.prototype.say = function(){...};
var p1 = new Person();
var p2 = new Person();

跟簡(jiǎn)單的構(gòu)造函數(shù)形式不同的是，綁在this上的name/age是p1/p2對(duì)象獨(dú)占的（私有的），而綁在prototype上的say方法是p1/p2對(duì)象共享的（公有的）。

4.構(gòu)造函數(shù)+原型

有的人把這種方式稱為“混合模式”，其實(shí)不是什么獨(dú)特的模式，而是因?yàn)閱渭兊厥褂脴?gòu)造函數(shù)和單純地使用原型方式都是不合適的。
試想一下，類的概念就是希望屬于這個(gè)類的對(duì)象有著相同名稱的屬性和方法，但屬性是私有的，方法是共享的，你叫什么名字，幾歲，是你這對(duì)象私有的屬性，但說話這動(dòng)作是大家都一樣，只是內(nèi)容不一樣而已，所有方法應(yīng)該共享的。
結(jié)合上面的簡(jiǎn)單構(gòu)造函數(shù)和原型，一個(gè)完整的構(gòu)造函數(shù)應(yīng)該是這樣的：

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    console.log("My name is "+this.name+". I"m "+this.age+" years old.");
}

var p1 = new Person("Peter",20);
var p2 = new Person("Jack",21);

還有一種方法就是ES5提供的Object.create()

Array.prototype.map = function (fn) {
    var resultArray = [];
    for (var i = 0,len = this.length; i < len ; i++) {
         resultArray[i] = fn.apply(this,[this[i],i,this]);
    }
    return resultArray;
}

Array.prototype.forEach = function (fn) {
    for (var i = 0,len = this.length; i < len ; i++) {
         fn.apply(this,[this[i],i,this]);
    }
}

Array.prototype.reduce= function (fn) {
    var formerResult = this[0];
    for (var i = 1,len = this.length; i < len ; i++) {
         formerResult = fn.apply(this,[formerResult,this[i],i,this]);
    }
    return formerResult;
}

1.創(chuàng)建一個(gè)對(duì)象

  function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function() { alert(this.name) } 
  } 

2.談?wù)凾his對(duì)象的理解。

this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。

但是總有一個(gè)原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。

this一般情況下：是全局對(duì)象Global。 作為方法調(diào)用，那么this就是指這個(gè)對(duì)象

3.事件、IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？

我們?cè)诰W(wǎng)頁中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為。

事件處理機(jī)制：IE是事件冒泡、火狐是 事件捕獲；

ev.stopPropagation();

4.什么是閉包（closure），為什么要用？

待完善

執(zhí)行say667()后,say667()閉包內(nèi)部變量會(huì)存在,而閉包內(nèi)部函數(shù)的內(nèi)部變量不會(huì)存在.使得Javascript的垃圾回收機(jī)制GC不會(huì)收回say667()所占用的資源，因?yàn)閟ay667()的內(nèi)部函數(shù)的執(zhí)行需要依賴say667()中的變量。這是對(duì)閉包作用的非常直白的描述.

  function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//執(zhí)行結(jié)果應(yīng)該彈出的667  

5.如何判斷一個(gè)對(duì)象是否屬于某個(gè)類？

使用instanceof （待完善）

   if(a instanceof Person){
       alert("yes");
   }

6.new操作符具體干了什么呢?

1、創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對(duì)象中。
3、新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj); 

7.JSON 的了解

JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫, 占用帶寬小
{"age":"12", "name":"back"}

8.js延遲加載的方式有哪些

defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

9.ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?如何解決跨域問題?

待完善

通過異步模式，提升了用戶體驗(yàn)

優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。

Ajax的最大的特點(diǎn)是什么。

Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）
readyState屬性 狀態(tài) 有5個(gè)可取值： 0=未初始化 ，1=正在加載 2=以加載，3=交互中，4=完成

ajax的缺點(diǎn)

1、ajax不支持瀏覽器back按鈕。

2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。

3、對(duì)搜索引擎的支持比較弱。

4、破壞了程序的異常機(jī)制。

5、不容易調(diào)試。

跨域： jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面

10.模塊化怎么做？

立即執(zhí)行函數(shù),不暴露私有成員

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

11.對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法：

*（優(yōu)點(diǎn)）因?yàn)镹ode是基于事件驅(qū)動(dòng)和無阻塞的，所以非常適合處理并發(fā)請(qǐng)求，
  因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。
  此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的，
  因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。

*（缺點(diǎn)）Node是一個(gè)相對(duì)新的開源項(xiàng)目，所以不太穩(wěn)定，它總是一直在變，
  而且缺少足夠多的第三方庫(kù)支持?？雌饋?，就像是Ruby/Rails當(dāng)年的樣子。

12.異步加載的方式

(1) defer，只支持IE

(2) async：

(3) 創(chuàng)建script，插入到DOM中，加載完畢后callBack

  documen.write和 innerHTML的區(qū)別

  document.write只能重繪整個(gè)頁面

  innerHTML可以重繪頁面的一部分

13.告訴我答案是多少？

(function(x){

delete x;
alert(x);

})(1+5);

函數(shù)參數(shù)無法delete刪除，delete只能刪除通過for in訪問的屬性。
當(dāng)然，刪除失敗也不會(huì)報(bào)錯(cuò)，所以代碼運(yùn)行會(huì)彈出“1”。

14.JS中的call()和apply()方法的區(qū)別？

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運(yùn)行結(jié)果為：alert(4);

注意：js 中的函數(shù)其實(shí)是對(duì)象，函數(shù)名是對(duì) Function 對(duì)象的引用。

function add(a,b)
{

alert(a+b);

}

function sub(a,b)
{

alert(a-b);

}

add.call(sub,3,1);

15.Jquery與jQuery UI 有啥區(qū)別？

*jQuery是一個(gè)js庫(kù)，主要提供的功能是選擇器，屬性修改和事件綁定等等。

*jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件。
 提供了一些常用的界面元素，諸如對(duì)話框、拖動(dòng)行為、改變大小行為等等

16.jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

jQuery中沒有提供這個(gè)功能，所以你需要先編寫兩個(gè)jQuery的擴(kuò)展：

$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
    return JSON.parse(array)
} 

然后調(diào)用：
$("").stringifyArray(array)

17.JavaScript中的作用域與變量聲明提升？
其他部分
（HTTP、正則、優(yōu)化、重構(gòu)、響應(yīng)式、移動(dòng)端、團(tuán)隊(duì)協(xié)作、SEO、UED、職業(yè)生涯）

*基于Class的選擇性的性能相對(duì)于Id選擇器開銷很大，因?yàn)樾璞闅v所有DOM元素。

*頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈?zhǔn)秸{(diào)用更好。   
 比如：var str=$("a").attr("href");

*for (var i = size; i < arr.length; i++) {}
 for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性，在開始循環(huán)的時(shí)候設(shè)置一個(gè)變量來存儲(chǔ)這個(gè)數(shù)字，可以讓循環(huán)跑得更快： 
 for (var i = size, length = arr.length; i < length; i++) {}

前端開發(fā)的優(yōu)化問題（看雅虎14條性能優(yōu)化原則）。

  （1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。

  （2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)

  （3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

  （4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

  （5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

  （6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

  （7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部  加上時(shí)間戳。

  （8） 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來，顯示比div+css布局慢。

http狀態(tài)碼有那些？分別代表是什么意思？

100-199 用于指定客戶端應(yīng)相應(yīng)的某些動(dòng)作。 
200-299 用于表示請(qǐng)求成功。 
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息。 
400-499 用于指出客戶端的錯(cuò)誤。400    1、語義有誤，當(dāng)前請(qǐng)求無法被服務(wù)器理解。401   當(dāng)前請(qǐng)求需要用戶驗(yàn)證 403  服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它。
500-599 用于支持服務(wù)器錯(cuò)誤。 503 – 服務(wù)不可用

一個(gè)頁面從輸入 URL 到頁面加載顯示完成，這個(gè)過程中都發(fā)生了什么？（流程說的越詳細(xì)越好）

你所知道的頁面性能優(yōu)化方法有那些？

除了前端以外還了解什么其它技術(shù)么？你最最厲害的技能是什么？

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？

18.談?wù)勀阏J(rèn)為怎樣做能是項(xiàng)目做的更好？

19.你對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？

20.加班的看法

加班就像借錢，原則應(yīng)當(dāng)是------救急不救窮

21.平時(shí)如何管理你的項(xiàng)目，如何設(shè)計(jì)突發(fā)大規(guī)模并發(fā)架構(gòu)？

先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8) 等

編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

標(biāo)注樣式編寫人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）；

CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）

JS 分文件夾存放 命民以該JS 功能為準(zhǔn)英文翻譯；

圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

那些操作會(huì)造成內(nèi)存泄漏？

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒有其他對(duì)象引用過該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。
閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）

23.你說你熱愛前端，那么應(yīng)該WEB行業(yè)的發(fā)展很關(guān)注吧？ 說說最近最流行的一些東西吧？

Node.js、Mongodb、npmM、MVVM、MEAN

24.你有了解我們公司嗎？說說你的認(rèn)識(shí)？

因?yàn)槲蚁肴グ⒗?，所以我針?duì)阿里的說
最羨慕就是在雙十一購(gòu)物節(jié)，350.19億元，每分鐘支付79萬筆。海量數(shù)據(jù)，居然無一漏單、無一故障。太厲害了。

25.移動(dòng)端（比如：Android IOS）怎么做好用戶體驗(yàn)?

作為一名前端工程師，無論工作年頭長(zhǎng)短都應(yīng)該必須掌握的知識(shí)點(diǎn)有：

1、DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。

2、DOM操作 ——如何添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等。

3、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。

4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。

5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。

6、盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型

7、塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

8、浮動(dòng)元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。

9、HTML與XHTML——二者有什么區(qū)別，你覺得應(yīng)該使用哪一個(gè)并說出理由。

10、JSON —— 作用、用途、設(shè)計(jì)結(jié)構(gòu)。

他們也許不懂交互設(shè)計(jì)，但是沒人比他們懂交互設(shè)計(jì)的實(shí)現(xiàn)，和每一個(gè)細(xì)節(jié)。
他們也許不懂視覺設(shè)計(jì)，但是沒人比他們懂視覺設(shè)計(jì)如何變?yōu)楝F(xiàn)實(shí)。
他們也許不懂后臺(tái)數(shù)據(jù)庫(kù)，但是他們其實(shí)才是數(shù)據(jù)的第一消費(fèi)者。
他們也許不是產(chǎn)品經(jīng)理，但是產(chǎn)品的質(zhì)量幾乎都是由他們來決定。