//from:http://www.reibang.com/p/05d84b60a1dc

1、介紹一下JS的基礎數(shù)據類型

Undefined ,Null, Boolean,Number,String

2、介紹一下JS有哪些內置對象

object 是JavaScript 中所有對象的父對象
數(shù)據封裝類對象：Object焕议，Array ,Boolean,Number,String
其他對象：Function,Argument,Math,Date,RegExp,Error

3设哗、列舉幾條JS的基本代碼規(guī)范

(1) 不要在同一行聲明多個變量
(2) 如果你不知道數(shù)組的長度，使用push
(3) 請使用===/!==來比較 true/false 或者數(shù)值
(4) 對字符串使用單引號 ' '(因為大多數(shù)時候我們的字符串抠蚣。特別html會出現(xiàn)" ")
(5) 使用對象字面量替代 new Array 這種方式
(6) 絕對不要在一個非函數(shù)塊里聲明一個函數(shù)，把那個賦給一個變量履澳。瀏覽器允許你這么做嘶窄，但是它們解析不同。
(7) 不要使用全局函數(shù)
(8) 總是使用var 來聲明變量距贷，如果不這么做將導致產生全局變量柄冲，我們要避免污染全局命名空間
(9) Switch 語句必須帶有default分支
(10) 使用/**···*/進行多行注釋，包括忠蝗，描述现横，指定類型以及參數(shù)值和返回值
(11) 函數(shù)不應該有時候有返回值，有時候沒有返回值
(12) 語句結束一定要加分號
(13) for 循環(huán)必須使用大括號
(14）if 語句必須使用大括號
(15) for-in 循環(huán)中的變量應該使用 var 關鍵字明確限定作用域，從而避免作用域污染
(16) 避免單個字符名长赞，讓你的變量名有描述意義
(17) 當命名對象晦攒、函數(shù)和實例時使用駝峰命名規(guī)則
(18) 給對象原型分配方法，而不是用一個新的對象覆蓋原型得哆，覆蓋原型會使繼承出現(xiàn)問題
(19) 當給事件附加數(shù)據時脯颜，傳入一個哈希而不是原始值，這可以讓后面的貢獻值加入更多數(shù)據到事件數(shù)據里贩据，而不用找出并更新那個事件的事件處理器

4栋操、介紹一下JavaScript 原型，原型鏈饱亮，他們有何特點矾芙？

每個對象都會在其內部初始化一個屬性，就是prototype(原型）近上，當我們訪問一個對象的屬性時剔宪，如果這個對象內部不存在這個屬性，那么他就會去prototype 里找這個屬性壹无，這個prototype又會有自己的prototype,于是就這樣一直找下去葱绒，也就是我們平時所說的原型鏈的概念。
關系：instance.constructor.prototype=instance._proto_
特點：JavaScript 對象是通過引用來傳遞的斗锭，我們創(chuàng)建的每個新對象實體中并沒有一份屬于自己的原型副本地淀，當我們修改原型時，與之相關的對象也會繼承者一改變岖是。
當我們需要一個屬性時帮毁，JavaScript引擎會先看對象中是否有這個屬性，如果沒有豺撑，就會查找它的prototype對象是否有這個屬性烈疚，如此遞推下去，一直檢索到object內建對象聪轿。
function Func() {}
Func.prototype.name="xiaoming";
Func.prototype.getInfo=function() {
    return this.name;
}
var person=new Func();
console.log(person.getInfo());
//xiaoming
console.log(Func.prototype);
//Func { name ="xiaoming",getInfo=function()}

5爷肝、JavaScript有幾中類型的值？能否畫一下他們的內存圖屹电？

棧：原始數(shù)據類型（Undefined,Null,Boolean,Number,String)
堆：引用數(shù)據類型（對象阶剑、數(shù)組跃巡、函數(shù)）
兩種類型的區(qū)別：存儲位置的不同
原始數(shù)據類型直接存儲在棧（stack) 中的簡單數(shù)據段危号，占據空間小，大小固定素邪，屬于被頻繁使用數(shù)據外莲，所以放入棧中存儲；
引用數(shù)據類型存儲在堆（heap）中的對象，占據空間大偷线，大小不固定磨确，如果存儲在棧中，將會影響程序運行的性能声邦；引用數(shù)據類型在棧中存儲了指針乏奥，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時亥曹，會首先檢索其在棧中的地址邓了，取得地址后從堆中獲得實體。

6媳瞪、JavaScript如何實現(xiàn)繼承

(1) 構造繼承
(2) 原型繼承
(3) 實例繼承
(4) 拷貝繼承
//
原型prototype機制或appply和call方法去實現(xiàn)較簡單骗炉，建議使用構造函數(shù)與原型混合方式。
function Parent(){
     this.name='wei';
}
function Child(){
     this.age=28;
}
Child.prototype=new Parent();//通過原型蛇受，繼承了Parent
//
var demo=new Child();
alert(demo.age);
alert(demo.name);//得到被繼承的屬性

7句葵、JavaScript有哪幾種創(chuàng)建對象的方式？

javascript 創(chuàng)建對象簡單的說兢仰，無非就是使用內置對象或各種自定義對象乍丈，當然還可以用JSON；但寫法有很多旨别，也能混合使用诗赌；
(1) 對象字面量的方式
person={ firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
(2)用function來模擬無參的構造函數(shù)
function Person(){}
var person=new Person();//定義一個function，如果使用new“實例化”秸弛，該function可以看作是一個Class铭若；
person.name="xiaoming";
person.age="23";
person.work = function() { 
      alert("Hello " + person.name);
}
person.work();
(3)用function來模擬參構造函數(shù)來實現(xiàn)（用this關鍵字定義構造的上下文屬性）
       function Person(name,age,hobby) { 
       this.name = name; //this作用域：當前對象 
       this.age = age; 
       this.work = work;
       this.info = function() { 
             alert("我叫" + this.name + "，今年" + this.age + "歲递览，是個" + this.work); 
      }
}
var Xiaoming = new Person("WooKong",23,"程序猿"); //實例化叼屠、創(chuàng)建對象
Xiaoming.info(); //調用info()方法
(4)用工廠方式來創(chuàng)建（內置對象）
var jsCreater = new Object();
jsCreater.name = "Brendan Eich"; //JavaScript的發(fā)明者
jsCreater.work = "JavaScript";
jsCreater.info = function() {
    alert("我是"+this.work+"的發(fā)明者"+this.name);
}
jsCreater.info();
(5)用原型方式來創(chuàng)建
function Standard(){}
Standard.prototype.name = "ECMAScript";
Standard.prototype.event = function() {
    alert(this.name+"是腳本語言標準規(guī)范");
}
var jiaoben = new Standard();
jiaoben.event();
(6)用混合方式來創(chuàng)建
function iPhone(name,event) {
     this.name = name;
     this.event = event;
}
iPhone.prototype.sell = function() {
      alert("我是"+this.name+"，我是iPhone5s的"+this.event+"~ haha!");
}
var SE = new iPhone("iPhone SE","官方翻新機");
SE.sell();

8绞铃、eval 是做什么的镜雨？

它的功能是把對應的字符串解析成JS代碼并運行；應該避免使用eval儿捧，因為不安全荚坞，非常耗性能（2次，一次解析成js語句菲盾，一次執(zhí)行）颓影。

9、null 和 undefined 有何區(qū)別懒鉴？

null 表示一個對象被定義了诡挂，值為“空值”碎浇；
undefined 表示不存在這個值。//
typeof undefined 
//"undefined" 
undefined :是一個表示"無"的原始值或者說表示"缺少值"璃俗，就是此處應該有一個值奴璃，但是還沒有定義。當嘗試讀取時會返回 undefined城豁； 例如變量被聲明了苟穆，但沒有賦值時，就等于undefined唱星。
//
typeof null 
//"object"
 null : 是一個對象(空對象, 沒有任何屬性和方法)鞭缭； 例如作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象魏颓；
//
注意：
 在驗證null時岭辣，一定要使用　=== ，因為 == 無法分別 null 和　undefined

10甸饱、能否寫一個通用的事件偵聽器函數(shù)沦童？

//Event工具集，from:github.com/markyun
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();
          };
      }
  },
  //視能力分別使用 demo0 || demo1 || IE 方式來綁定事件
  //參數(shù)：操作的元素叹话，事件名稱偷遗，事件處理程序
  addEvent: function(element,type,handler) {
      if (element.addEventListener) {
          //事件類型、需要執(zhí)行的函數(shù)驼壶、是否捕捉
          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.datachEvent('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.srcElemnt;
  },
  //獲取event對象的引用，取到事件的所有信息热凹，確保隨時能使用event泵喘；
  getEvent: function(e) {
      var ev = e || window.event;
      if (!ev) {
          var c = this.getEvent.caller;
          while(c) {
              ev = c.argument[0];
              if (ev && Event == ev.constructor) {
                  break;
              }
              c = c.caller;
          }
      }
      retrun ev;
  }
};

11、["1","2","3"].map(parseInt) 的答案是多少般妙？

[1,NaN,NaN]
因為 parseInt 需要兩個參數(shù)(val,radix)纪铺，其中 radix 表示解析時用的基數(shù)。
map 傳了3個(element,index,array)碟渺，對應的 radix 不合法導致解析失敗鲜锚。

12、事件是什么苫拍？IE與火狐的事件機制有何區(qū)別芜繁？如何阻止冒泡？

(1)我們在網頁中的某個操作（有的操作對應多個事件）绒极。例如：當我們點擊一個按鈕就會產生一個事件骏令。是可以被 JavaScript 偵測到的行為。
(2)事件處理機制：IE是事件冒泡集峦、Firefox同時支持兩種事件模型伏社，也就是：捕獲型事件和冒泡型事件；
(3)ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

13塔淤、什么是閉包(closure)摘昌，為什么要用它？

閉包是指有權訪問另一個函數(shù)作用域中變量的函數(shù)高蜂，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內創(chuàng)建另一個函數(shù)聪黎，通過另一個函數(shù)訪問這個函數(shù)的局部變量，利用閉包可以突破作用鏈域备恤，將函數(shù)內部的變量和方法傳遞到外部稿饰。
//
閉包特性：
(1)函數(shù)內再嵌套函數(shù)
(2)內部函數(shù)可以引用外層的參數(shù)和變量
(3)參數(shù)和變量不會被垃圾回收機制回收
//li節(jié)點的onclick事件都能正確的彈出當前被點擊的li索引
<ul> 
       <li> index = 0 </li>
       <li> index = 1 </li>
       <li> index = 2 </li> 
       <li> index = 3 </li>
</ul>
<script type="text/javascript"> 
var lis = document.getElementsByTagName('li'); 
for (var i = 0; i < lis.length; i++) {
        (function (a){
            lis[i].onclick = function(){
                console.log(a);//不使用閉包的話，值每次都是4 
            };
        })(i);
    }
</script>

14露泊、JavaScript 代碼中的 "use strict"; 是什么意思喉镰？使用它的區(qū)別是什么？

use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理惭笑、不嚴謹之處侣姆，減少一些怪異行為。默認支持的糟糕特性都會被禁用沉噩，比如不能用with捺宗，也不能在意外的情況下給全局變量賦值;
全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內聲明函數(shù),arguments.callee也不允許使用川蒙；消除代碼運行的一些不安全之處蚜厉，保證代碼運行的安全,限制函數(shù)中的arguments修改，嚴格模式下的eval函數(shù)的行為和非嚴格模式的也不相同;提高編譯器效率畜眨，增加運行速度昼牛；
為未來新版本的Javascript標準化做鋪墊。

15康聂、new 操作符具體干了什么呢匾嘱？

(1)創(chuàng)建一個空對象，并且 this 變量引用該對象早抠，同時還繼承了該函數(shù)的原型枣氧。
(2)屬性和方法被加入到 this 引用的對象中。
(3)新創(chuàng)建的對象由 this 所引用审葬，并且最后隱式的返回 this 祝闻。
//var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

16、JavaScript 中甘苍，有一個函數(shù)尝蠕，執(zhí)行對象查找時，永遠不會去查找原型载庭，這個函數(shù)是哪個看彼？

hasOwnProperty
//
JavaScript 中 hasOwnProperty 函數(shù)方法是返回一個布爾值廊佩，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性靖榕；該屬性必須是對象本身的一個成員标锄。
//
使用方法：
object.hasOwnProperty(proName)
其中參數(shù)object是必選項，一個對象的實例茁计。
proName是必選項料皇，一個屬性名稱的字符串值。
//
如果 object 具有指定名稱的屬性星压，那么JavaScript中hasOwnProperty函數(shù)方法返回 true践剂，反之則返回 false。

17娜膘、對 JSON 的認識

JSON(JavaScript Object Notation)是一種輕量級的數(shù)據交換格式逊脯。
它是基于JavaScript的一個子集。數(shù)據格式簡單竣贪，易于讀寫男窟，占用帶寬小。如：
{"age":"12", "name":"back"}

18贾富、js延遲加載的方式有哪些歉眷？

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

19汗捡、Ajax 是什么？如何創(chuàng)建一個 Ajax 畏纲？

ajax的全稱：Asynchronous Javascript And XML扇住。
異步傳輸+js+xml。
所謂異步盗胀，在這里簡單地解釋就是：向服務器發(fā)送請求的時候艘蹋，我們不必等待結果，而是可以同時做其他的事情票灰，等到有了結果它自己會根據設定進行后續(xù)操作女阀，與此同時，頁面是不會發(fā)生整頁刷新的屑迂，提高了用戶體驗浸策。
//
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調用對象
(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息(3)設置響應HTTP請求狀態(tài)變化的函數(shù)
(4)發(fā)送HTTP請求
(5)獲取異步調用返回的數(shù)據
(6)使用JavaScript和DOM實現(xiàn)局部刷新

20惹盼、同步和異步的區(qū)別庸汗？

同步的概念應該是來自于操作系統(tǒng)中關于同步的概念:
不同進程為協(xié)同完成某項工作而在先后次序上調整(通過阻塞,喚醒等方式)。同步強調的是順序性手报，誰先誰后蚯舱；異步則不存在這種順序性改化。
//
同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新枉昏，重新發(fā)請求,等請求完陈肛，頁面刷新，新內容出現(xiàn)凶掰，用戶看到新內容,進行下一步操作。
//
異步：瀏覽器訪問服務器請求蜈亩，用戶正常操作懦窘，瀏覽器后端進行請求。等請求完稚配，頁面不刷新畅涂，新內容也會出現(xiàn)，用戶看到新內容道川。

21午衰、如何解決跨域問題？

jsonp冒萄、iframe臊岸、window.name、window.postMessage尊流、服務器上設置代理頁面

22帅戒、談一談你對 ECMAScript6 的了解？

ECMAScript 6 是JavaScript語言的下一代標準崖技，已經在2015年6月正式發(fā)布了逻住。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序迎献，成為企業(yè)級開發(fā)語言瞎访。標準的制定者有計劃，以后每年發(fā)布一次標準吁恍，使用年份作為標準的版本扒秸。因為當前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015冀瓦。也就是說鸦采，ES6就是ES2015

23、ECMAScript 6 怎么寫 class 咕幻，為何會出現(xiàn) class渔伯？

ES6的class可以看作只是一個語法糖，它的絕大部分功能肄程，ES5都可以做到锣吼，新的class寫法只是讓對象原型的寫法更加清晰选浑、更像面向對象編程的語法而已。
//定義類
class Point { 
      constructor(x,y) { //構造方法
      this.x = x; //this關鍵字代表實例對象 
      this.y = y; 
} 
toString() { 
      return '(' + this.x + ',' + this.y + ')'; 
 }
}

24玄叠、異步加載 JS 的方式有哪些古徒？

(1)defer，只支持 IE
(2)async:
(3)創(chuàng)建 script读恃，插入到 DOM 中隧膘，加載完畢后 callBack

25、DOM 操作——怎樣添加寺惫、移除疹吃、移動、復制西雀、創(chuàng)建和查找節(jié)點萨驶？

(1)創(chuàng)建新節(jié)點
createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點
(2)添加、移除艇肴、替換腔呜、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點
(3)查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組再悼，其中包括id等于name值的)
getElementById() //通過元素Id核畴，唯一性

26、哪些操作會造成內存泄漏冲九？

內存泄漏是指任何對象在您不再擁有或需要它之后任然存在膛檀。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量娘侍，如果一個對象的引用數(shù)量為0（沒有其他對象引用過該對象）咖刃，或對該對象的惟一引用是循環(huán)的，那么該對象的內存即可回收憾筏。
//
setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話嚎杨，會引發(fā)內存泄漏。閉包氧腰、控制臺日志枫浙、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產生一個循環(huán)）

27古拴、jQuery 中如何將數(shù)組轉化為 json 字符串箩帚，然后再轉化回來？

jQuery 中沒有提供這個功能黄痪，所以需要先編寫兩個 jQuery 的擴展：
$.fn.stringifyArray = function(array) { 
      return JSON.stringify(array)
}
$.fn.parseArray = function(array) { 
     return JSON.parse(array)
}
//
然后調用:
$("").stringifyArray(array)

28紧帕、是否了解針對 jQuery 性能的優(yōu)化方法？

基于Class的選擇性的性能相對于Id選擇器開銷很大，因為需遍歷所有DOM元素是嗜。
//
頻繁操作的DOM愈案，先緩存起來再操作。用Jquery的鏈式調用更好鹅搪。比如：var str=$("a").attr("href");
//
for (var i = size; i < arr.length; i++) {}
for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性站绪，在開始循環(huán)的時候設置一個變量來存儲這個數(shù)字，可以讓循環(huán)跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}

29丽柿、jQuery 與 jQuery UI 有何區(qū)別恢准？

jQuery`是一個js庫，主要提供的功能是選擇器甫题，屬性修改和事件綁定等等馁筐。
`jQuery UI`則是在jQuery的基礎上，利用jQuery的擴展性幔睬，設計的插件眯漩。提供了一些常用的界面元素芹扭，諸如對話框麻顶、拖動行為、改變大小行為等等

30舱卡、如何判斷當前腳本運行在瀏覽器還是 node 環(huán)境中辅肾？（阿里）

通過判斷 Global 對象是否為 window ，如果不為 window 轮锥，當前腳本沒有運行在瀏覽器中

31矫钓、怎樣用js實現(xiàn)千位分隔符？

//正則 + replace
function thousandBitSeparator(num) {
      return num && (num.toString().indexOf('.') != -1 ? num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
          return $1 + ",";
        }) : num.toString().replace(/(\d)(?=(\d{3}))/g, function($0, $1) {
          return $1 + ",";
        }));
    }
console.log(thousandBitSeparator(-1000));