前端面試基本知識點——javascript

又到一年春招季，coder們又要奔波於一場又一場的面試。今天就先來小小總結一下javascript方面的知識點，方便你我他。隨時補充

• js基本數據類型

  Undefined、Null、Boolean、Number、String
  ECMAScript2015新增了Symbol（建立後獨一無二的數據類型）

• js的內置對象

  數據封裝對象：Object,Array,Boolean,Number,String
  其餘對象：Function,Arguments,Math,Date,RegExp,Error

• js基本規範

  1.不要在同一行聲明多個變量
  2.請使用===／!==來比較Boolean或者數值
  3.生命數組變量時，儘可能使用[]代替new Array
  4.拒絕全局函數
  5.Switch語句必須帶有default分支

• js原型，原型鏈及其特色

  每一個對象都會有一個內部初始化的屬性，就是原型（prototype），當咱們尋找一個對象的屬性，若是內部屬性自己不存在，就到對象的原型裏面去找，這個原型又會有本身的原型，就這樣一步步地找下去，這就是所謂的原型鏈。

• Javascript有幾種類型的值？及關於他們的內存圖

  棧：原始數據類型（基本數據類型）
  堆：引用數據類型（對象，數組，函數）
  兩種類型的區別：儲存的位置不一樣

• 將字符串轉換爲數字？

  1.‘12.3b’ parseFloat('12.3b');解析成浮點數
  2.'12b'   parseInt('12b');解析成整數

• 如何將浮點數小數點左邊的每三位添加一個逗號

function commafy(num){
       return num && num
                     .toString()
                     .replace(/(\d)(?=(\d{3})+\./g,function($1, $2){
                     return $2 + ',';
                     });
    }

• 如何實現數組的隨機排序？var arr = [1,2,3,4,5,6,7,8]

方法一
    
    function RandomSort(arr){
    for (var i = 0,len = arr.length;i < len;i++){
       var rand = parseInt(Math.random() * len);
        var a;
        a = arr[rand]; 
        arr[rand]  = arr[i];
        arr[i] = a;
    } 
     return arr;   
    }

方法二
    
    function RandomSort2(arr){
    var a = [];
    while(arr.length > 0){
    var rand = parseInt(Math.random() * arr.length);
    a.push(arr[rand]);
    arr.splice(rand,1);
    }
     return a;   
    }

方法三
    
    function RandomSort3(arr){
     function sortBy(){
         return Math.random() - 0.5;
     }
     arr.sort(sortBy());
    }

• Javascript如何實現繼承？
  1.構造繼承
  2.原型繼承
  3.實力繼承
  4.拷貝繼承
  前兩種比較簡單，建議用前兩種的組合方式
  1.構造函數實現繼承就是藉助call或者apply把父類中的函數經過this指複製到子類建立的實例中。

  function Parent() {
    this.colors = ["black","white"];
  }
  function Child() {
    Parent.call(this);
  }
  var child1 = new Child();
  alert(child1.colors);//"black,white"

  2.原型函數實現繼承

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

• javascript建立對象的幾種方法
  1.使用對象字面量

  var Cat  = {};//JSON
   Cat.name="kity";//添加屬性並賦值
   Cat.age=2;
   Cat.sayHello=function(){
    alert("hello "+Cat.name+",今年"+Cat["age"]+"歲了");//可使用「.」的方式訪問屬性，也可使用HashMap的方式訪問
   }
   Cat.sayHello();//調用對象的（方法）函數

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

  function Person(){
     }
     var personOne=new Person();//定義一個function，若是有new關鍵字去"實例化",那麼該function能夠看做是一個類
     personOne.name="liuwen";
     personOne.hobby="coding";
     personOne.work=function(){
     alert(personOne.name+" is coding now...");
     }
     personOne.work();

  3.用function來模擬有參構造函數（拓展性強，推薦使用）

  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("麥兜",5,"睡覺");//實例化/建立對象
  maidou.eat();//調用eat方法(函數)

  4.用工廠模式來建立（內置對象Object）

  var liuWen = new Object();
  liuWen.name = "劉雯";
  liuWen.age = 21;
  liuWen.work = function() {
    alert("i am" + liuWen.name);
  }
  liuWen.work();

  5.用原型方式來建立

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

  6.用混合模式建立

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

• this的理解

  • this指的是函數的直接調用者

  • this指的是new出來的實例對象

  • this指的是事件中觸發事件的對象

  • 特殊的，在IE的attachEvent中，this老是指全局對象window

• 什麼是window對象？什麼是document對象？

  window指的是瀏覽器窗口；document是文檔（html），屬於window的一個屬性。

• null和undefined的區別

  null是一個空值，表示一個對象爲空值（我是空的）
     undefined表示一個聲明過的變量沒有賦予值（不知道我是誰）
     typeOf undefined;//"undefined"
     typeOf null; //"object"
     區別null和undefined用===；

• 事件是什麼？火狐和IE事件機制的區別？以及如何阻止冒泡事件

  • 事件是在網頁中的某個操做，相似於（點擊，鍵盤）

  • IE是事件冒泡，火狐事件捕獲，事件冒泡都支持（事件冒泡是由子節點到父節點層層向外，捕獲恰好相反）；

  • 阻止冒泡事件 event.stopPropagation();

• 什麼是閉包？爲何要用它

  閉包就是有權訪問另外一個函數做用域的函數，簡單來作就是在一個函數的內部建立另一個函數，經過這個內部函數訪問外部函數的局部變量，將外部函數內部的方法變量傳遞到外部。   
     閉包的特性：
     1. 內部函數有權訪問外部函數的做用域，變量及函數
     2. 函數內再嵌套函數
     3. 變量和函數不會被垃圾回收制回收

  //li節點的onclick事件都能正確的彈出當前被點擊的li索引
  <ul id="testUL">
     <li> index = 0</li>
     <li> index = 1</li>
     <li> index = 2</li>
     <li> index = 3</li>
  </ul>
  <script type="text/javascript">
     var nodes = document.getElementsByTagName("li");
     for(i = 0;i<nodes.length;i+= 1){
  nodes[i].onclick = (function(i){
            return function() {
               console.log(i);
            } //不用閉包的話，值每次都是4
          })(i);
     }
  </script>
  
  
  
  執行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

• Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

  hasOwnProperty
     javascript的hasOwnProperty返回的是一個布爾值，它能夠檢測到這個對象自己具備屬性，不能檢測到原型鏈上。
     object.hasOwnProperty(proName)
     其中參數object是必選項。一個對象的實例。
     proName是必選項。一個屬性名稱的字符串值。

• JSON的瞭解

  JSON是javascript的一個子集，它是輕量級，簡單，易操做的數據交換格式。
     1. 將JSON字符串轉化爲JSON對象；
     var obj =eval('('+ str +')');
     var obj = str.parseJSON();
     var obj = JSON.parse(str);
     2. JSON對象轉換爲JSON字符串：
     var str=obj.toJSONString();
     var str=JSON.stringify(obj);

• js延遲加載

  defer和async，動態建立dom（最經常使用），按需異步載入js

• Ajax是什麼？如何建立Ajax？

  向服務器發送請求的時候咱們沒必要等待，能夠同時作其餘事情，頁面也不會整頁刷新，提升用戶效率。
     (1)建立XMLHttpRequest對象,也就是建立一個異步調用對象
     (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
     (3)設置響應HTTP請求狀態變化的函數
     (4)發送HTTP請求
     (5)獲取異步調用返回的數據
     (6)使用JavaScript和DOM實現局部刷新

• Ajax 解決瀏覽器緩存問題？

  一、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
     
     二、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
     
     三、在URL後面加上一個隨機數： "fresh=" + Math.random();。
     
     四、在URL後面加上時間搓："nowtime=" + new Date().getTime();。
     
     五、若是是使用jQuery，直接這樣就能夠了 $.ajaxSetup({cache:false})。這樣頁面的全部ajax都會執行這條語句就是不須要保存緩存記錄。

• 如何解決跨域問題?

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