JavaScript基礎知識總結

要點：數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、異步裝載回調、模板引擎、Nodejs等。

JS基本類型有什麼？引用類型有什麼？

基本類型：number,string,boolean,undefined,null
引用類型：基本類型之外的都是引用類型，如object/array/function/date等等
關於基本類型與引用類型的區別能夠詳細看看@Naraku_的這篇文章：
[ JS 進階 ] 基本類型 引用類型 簡單賦值 對象引用
概況起來有這麼幾個要點：

1.咱們沒法給基本類型的對象添加屬性和方法；

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

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

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

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

3.基本類型對象是存儲在棧內存中的，而引用類型對象實際上是一個存儲在棧內存中的一個堆內存地址。

4.基本類型對象賦值時（執行=號操做），是在棧內存中建立一個新的空間，而後將值複製一份到新的空間裏。

5.引用類型對象賦值時（執行=號操做），也是在棧內存中複製一份同樣的值，但這個值是一個堆內存地址，因此被賦值的那個對象跟前者實際上是一個對象。

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中的常見對置對象類

js的常見內置對象類：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的一個實例。null是一個基本類型。之因此typeof null輸出Object，跟瀏覽器的實現有關。

JS對象有哪幾種建立方法

這個問題常常會被問道，會寫JavaScript的人都會建立對象，時時刻刻都在用對象，但真被問起這個問題，估計不少人都沒認真思考過。
網上關於這個問題的答案也很是多，說法還不太同樣，什麼構造函數方法/原型方法/混合方法等等，亂七八糟的。
在這裏，我試試捋一捋，但願可以給你一個清晰的答案。

1.字面量方式：

這是最簡單最基本的一種方法。

var obj = {};//建立了一個空的對象

字面量方法有兩種經常使用的形式。
一種是簡單字面量，像上面那樣先建立一個空對象，而後再給這個對象加屬性和函數。

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

另外一種是嵌入式字面量，像寫JSON數據似的，直接在大括號中寫屬性和函數。

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

2.簡單的構造函數方式

經過new Person()這樣的形式建立對象。用new這個關鍵字是爲了討好習慣了C++/Java的程序員的使用習慣。但也是JS的一大敗筆（大牛都是這麼說的，我只是有樣學樣）。

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();

跟簡單的構造函數形式不一樣的是，綁在this上的name/age是p1/p2對象獨佔的（私有的），而綁在prototype上的say方法是p1/p2對象共享的（公有的）。

4.構造函數+原型

有的人把這種方式稱爲「混合模式」，其實不是什麼獨特的模式，而是由於單純地使用構造函數和單純地使用原型方式都是不合適的。
試想一下，類的概念就是但願屬於這個類的對象有着相同名稱的屬性和方法，但屬性是私有的，方法是共享的，你叫什麼名字，幾歲，是你這對象私有的屬性，但說話這動做是你們都同樣，只是內容不同而已，全部方法應該共享的。
結合上面的簡單構造函數和原型，一個完整的構造函數應該是這樣的：

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()

簡單實現下JS中的Map，forEach，reduce

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.建立一個對象

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

2.談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。

可是總有一個原則，那就是this指的是調用函數的那個對象。

this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

3.事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。

2. 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；

3. ev.stopPropagation();

4.什麼是閉包（closure），爲何要用？

待完善

執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源，由於say667()的內部函數的執行須要依賴say667()中的變量。這是對閉包做用的很是直白的描述.

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

 var sayAlert = say667();
 sayAlert()//執行結果應該彈出的667

5.如何判斷一個對象是否屬於某個類？

使用instanceof （待完善）

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

6.new操做符具體幹了什麼呢?

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

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

7.JSON 的瞭解

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
{'age':'12', 'name':'back'}

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

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

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

待完善

1. 經過異步模式，提高了用戶體驗

2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

4. Ajax的最大的特色是什麼。

   Ajax能夠實現動態不刷新（局部刷新）
   readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=正在加載 2=以加載，3=交互中，4=完成

   ajax的缺點

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

   二、安全問題 AJAX暴露了與服務器交互的細節。

   三、對搜索引擎的支持比較弱。

   四、破壞了程序的異常機制。

   五、不容易調試。

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

10.模塊化怎麼作？

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

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

11.對Node的優勢和缺點提出了本身的見解：

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
  所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
  此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
  所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
  並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

12.異步加載的方式

(1) defer，只支持IE

(2) async：

(3) 建立script，插入到DOM中，加載完畢後callBack

documen.write和 innerHTML的區別

  document.write只能重繪整個頁面

  innerHTML能夠重繪頁面的一部分

13.告訴我答案是多少？

(function(x){

delete x;
alert(x);

})(1+5);

函數參數沒法delete刪除，delete只能刪除經過for in訪問的屬性。
固然，刪除失敗也不會報錯，因此代碼運行會彈出「1」。

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

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

function add(a,b)
{

alert(a+b);

}

function sub(a,b)
{

alert(a-b);

}

add.call(sub,3,1);

15.Jquery與jQuery UI 有啥區別？

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

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
 提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

16.jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

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

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

而後調用：
$("").stringifyArray(array)

17.JavaScript中的做用域與變量聲明提高？
其餘部分
（HTTP、正則、優化、重構、響應式、移動端、團隊協做、SEO、UED、職業生涯）

*基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

*頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。   
 好比：var str=$("a").attr("href");

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

前端開發的優化問題（看雅虎14條性能優化原則）。

  （1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

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

  （8） 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

http狀態碼有那些？分別表明是什麼意思？

100-199 用於指定客戶端應相應的某些動做。 
200-299 用於表示請求成功。 
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 
400-499 用於指出客戶端的錯誤。400    一、語義有誤，當前請求沒法被服務器理解。401   當前請求須要用戶驗證 403  服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

你所知道的頁面性能優化方法有那些？

除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

18.談談你認爲怎樣作能是項目作的更好？

19.你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

20.加班的見解

加班就像借錢，原則應當是------救急不救窮

21.平時如何管理你的項目，如何設計突發大規模併發架構？

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

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

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

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

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

JS 分文件夾存放 命民以該JS 功能爲準英文翻譯；

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

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

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

23.你說你熱愛前端，那麼應該WEB行業的發展很關注吧？ 說說最近最流行的一些東西吧？

Node.js、Mongodb、npmM、MVVM、MEAN

24.你有了解咱們公司嗎？說說你的認識？

由於我想去阿里，因此我針對阿里的說
最羨慕就是在雙十一購物節，350.19億元，每分鐘支付79萬筆。海量數據，竟然無一漏單、無一故障。太厲害了。

25.移動端（好比：Android IOS）怎麼作好用戶體驗?

做爲一名前端工程師，不管工做年頭長短都應該必須掌握的知識點有：

一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

二、DOM操做 ——如何添加、移除、移動、複製、建立和查找節點等。

三、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

八、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

九、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。

十、JSON —— 做用、用途、設計結構。

他們也許不懂交互設計，可是沒人比他們懂交互設計的實現，和每個細節。
他們也許不懂視覺設計，可是沒人比他們懂視覺設計如何變爲現實。
他們也許不懂後臺數據庫，可是他們其實才是數據的第一消費者。
他們也許不是產品經理，可是產品的質量幾乎都是由他們來決定。