• Js中使用typeof能得到的類型

  typeof underfined      //underfined
  typeof 'abc'           //string
  typeof 123             //number
  typeof true            //boolean
  typeof {}              //object
  typeof []              //object
  typeof null            //object
  typeof console.log     //function
  

• 何時使用 === 和 ==

  if (obj.a == null) {   //判定對象obj的a屬性是否存在
      //這里相當(dāng)于 obj.a === null || obj.a === underfined ,的簡寫形式。
      //這是jQuery源碼中的推薦寫法强法。除此之外其他時候都使用 ===粪牲。
  }
  

• Js中的內(nèi)置函數(shù)

  Boolean / Number / String / Object / Array / Function / Date / RegExp / Error
  
  

• Js中按存儲方式區(qū)分變量類型

     值類型                                         引用類型
  var a = 100;                                var obj1 = {num:10};
  var b = a;                                  var obj2 = obj1;
  a = 111;                                    obj1.num = 22;
  console.log (b); //100                      console.log (obj2.num); //22
  //把數(shù)值作為一個整塊存入內(nèi)存中,               //只是對對象的一個引用，把指針
  //隨后每個值會變得獨立。                     //指向?qū)ο螅鄠€變量共用一個值。
  

• 如何理解JSON

  JSON.stringify ({a:10, b:20})——把JSON輸出成字符串
  JSON.parse('{"a": 10, "b": 20}')——把該字符串轉(zhuǎn)化成JSON
  根據(jù)以上可知汞斧，JSON 就是一個JS對象。
  但同時什燕，JSON也是一種數(shù)據(jù)格式粘勒。
  
  

• 如何準確判斷一個變量是數(shù)組類型

  var arr = [];
  arr instanceof Array;  //true，通過識別arr的構(gòu)造函數(shù)來判斷屎即。
  typeof arr  //Object庙睡，typeof 并不能識別引用類型的詳細類型。
  

• 寫一個原型鏈繼承的例子

  一個封裝DOM查詢的栗子（獲取一個DOM內(nèi)容然后導(dǎo)入到事件）

  //創(chuàng)建構(gòu)造函數(shù)
  function Elem (id) {
        this.elem = getElementById (id);
  }
  //創(chuàng)造鏈操作
  Elem.prototype.html = function (val) {
        var elem = this.elem;
        if (val) {
              elem.innerHTML = val;
              return this;    //鏈式操作
        } else {
              return elem.innerHTML;
        }
  }
  //創(chuàng)造鏈操作
  Elem.prototype.on = function (type, fn) {
        var elem = this.elem;
        elem.addEventListener (type, fn);
        return this;   //鏈式操作
  }
  //開始鏈式操作
  var div1 = new Elem (' id1 ');
  div1.html('<p>鏈式1</p>').on ('click', function () {
         console.log('鏈式2');
  }).html ('鏈式3');
  

  div1的每一次鏈式操作都是一次繼承剑勾，div1本身并沒有 html 和 on的屬性埃撵，但是它繼承了它的構(gòu)造函數(shù)Elem的顯式原型的屬性赵颅。
  
  

• 描述new一個對象的過程

  function Foo (name, age) {
        this.name = name;
        this.age = age;
        this.class = 'class-1';
        return this;
  }
  var f1 = new Foo ('XX', 18);
  var f2 = new Foo ('BB', 18);
  

  1. 創(chuàng)建一個新對象虽另。
  2. this 指向這個新對象。
  3. 給 this 賦值（添加屬性）饺谬。
  4. return this 捂刺，完成構(gòu)造。
     
     

• zepto（或其他框架）源碼中如何使用原型鏈

  語法跟 jQuery 相似
  更加輕量化募寨，砍了一些 api
  讀過一些源碼族展，關(guān)于原型鏈和閉包。
  
  

• 說一下對變量提升的理解

  其實就是執(zhí)行上下文的概念拔鹰。
  淺顯的可以理解成仪缸，
  變量定義和函數(shù)聲明在作用域內(nèi)被提前執(zhí)行。
  在函數(shù)作用域內(nèi)還包括 this 和 arguments列肢。

  console.log (a);     //undefined 
  var a = 100;        
  
  fn ('AAA');          // 'AAA'  20  
  function fn(name) {
        age = 20;      
        console.log (name, 20);
        var age;
  }
  

• 說明this的幾種不同使用場景

  ①作為構(gòu)造函數(shù)執(zhí)行
  ②作為對象屬性執(zhí)行
  ③作為普通函數(shù)執(zhí)行
  ④call apply bind方法

  var a = {
        name: 'AAA';
        fn: function () {
              console.log (this.name);  // 就是這個this
        };
  };
  
  //作為對象屬性執(zhí)行
  a.fn();   // AAA 
  
  //call apply bind方法
  a.fn.call ({name:"BBB"});   // BBB
  
  //作為普通函數(shù)執(zhí)行
  var fn1 = a.fn();
  fn1();        // window  這個函數(shù)就是由window來運行的恰画。
  

• 創(chuàng)建10個 <a>，點擊彈出各自對應(yīng)的序號

  var i;
  for ( i = 0; i < 10; i++ ) {
        ( function ( i ) {
              var a = document.createElement('a');
              a.innerHTML = i + "<br/>";
              a.addEventListener ('click', function (e) {
                    e.preventDefault ();
                    alert ( i );
              });
              document.body.appendChild (a);
        }) ( i );
  }
  

  為每一個 a 標簽構(gòu)造一個函數(shù)作用域瓷马，
  這樣在for循環(huán)的時候拴还，變化的 i 就不會影響到每一個作用域里的 i 。
  
  

• 如何理解作用域

  回答要點：①自由變量 ②作用域鏈欧聘，即自由變量的查找 ③閉包的兩個場景
  作用域可以理解為代碼執(zhí)行的一個區(qū)域（環(huán)境）片林，
  每個作用域中的變量是相對獨立的，可以分別定義同一個變量而不沖突。
  但如果作用域中费封，沒有定義某個變量焕妙，是可以到父作用域中去尋找的。
  但父作用域中沒有的變量孝偎，不能去子作用域中尋找访敌，這就是作用域鏈。
  除非使用閉包衣盾，才能從外獲取作用域內(nèi)的變量寺旺。
  
  

• 實際開發(fā)中的閉包應(yīng)用

  function isFirstLoad () {
        var _list = [];                            // 創(chuàng)建一個數(shù)組來裝id
        return function (id) {
              if ( _list.indexOf(id) >= 0 ) {      //用indexOf[id]來判斷id在數(shù)組中的序號
                    console.log(false);
                    return false;                  // 如果有序號，即已經(jīng)存在势决，終止函數(shù)阻塑。
              };
              _list.push(id);                      // 若不存在則加入到數(shù)組中。
              console.log(true);
        };
  };
  
  var isFirst = isFirstLoad();     //運行isFirstLoad()返回一個閉包賦到isFirst中果复。
  isFirst (10);  //true
  isFirst (10);  //false
  isFirst (20);  //true
  isFirst (20);  //false
  

• 同步和異步的區(qū)別陈莽，各舉一個例子

  • 同步會阻塞代碼執(zhí)行，而異步不會虽抄。
  • alert是同步走搁，阻塞代碼，alert之后的代碼停止執(zhí)行迈窟，知道確定alert私植。
    setTimeout是異步，不阻塞车酣，繼續(xù)執(zhí)行后面的代碼曲稼，再執(zhí)行setTimeout的內(nèi)容。
    
    

• 關(guān)于 setTimeout 的筆試題

  console.log(1);
  
  setTimeout (function () {
        console.log(2);
  }, 0);
  
  console.log(3);
  
  setTimeout (function () {
        console.log(4);
  }, 1000);
  
  console.log(5);
  

  運行的結(jié)果是 1湖员、3贫悄、5、2娘摔、4窄坦。
  即使setTimeout的事件為0，函數(shù)也被會掛起凳寺，等到最后再回頭執(zhí)行鸭津，
  但是因為其時間短，所以在掛起的隊列里排前面读第。
  
  

• 前端使用異步的場景有哪些

  因為js是單線程曙博，所以需要異步，避免阻塞怜瞒。

  • 定時任務(wù)：setTimeout父泳，setInterval

  • 網(wǎng)絡(luò)請求：ajax 請求般哼，動態(tài) <img> 加載

  • 事件綁定。

• 獲取 2017 - 01 - 12 格式的日期

  function getDate (da) {
        if ( !da ) {
              da = new Date();
        };
  
        var year = da.getFullYear();
        var month = da.getMonth() + 1;
        var day = da.getDate();
  
        if ( month < 10 ) {
              month = "0" + month;
        };
        if ( day < 10 ) {
              day = "0" + day;
        };
  
        return year + "-" + month + "-" + day;
  }
  var da = new Date();
  var date = getDate(da);
  console.log(date);
  

  此 demo惠窄，在 getDate 函數(shù)中蒸眠，
  第一塊代碼，if 是為了避免傳入的 da 出錯杆融，重新獲取楞卡。
  第二塊代碼為獲取年月日，月份要+1脾歇。
  第三塊代碼是修復(fù)數(shù)字為一位數(shù)時不好看的情況蒋腮。
  第四塊代碼為返回結(jié)果。
  其中第三四塊中藕各，都用了強制類型轉(zhuǎn)化池摧，通過與字符串拼接，把數(shù)字轉(zhuǎn)化為字符串激况。
  
  

• 獲取隨機數(shù)作彤，轉(zhuǎn)化為長度一致的字符串格式

  var random = Math.random();
  var random = random + '0000000000';    // 強制類型轉(zhuǎn)換，并補長隨機數(shù)乌逐。
  var random = random.slice(0, 10);      // 截取前十位竭讳，截多少上面就補多少。
  console.log(random);
  

• 寫一個能遍歷對象和數(shù)組的通用 forEach 函數(shù)

- function allEach (object, fn) {  // 構(gòu)建萬能遍歷浙踢，傳入object和方法绢慢。
-       var key;
-       if (object instanceof Array) {  // 判定是否數(shù)組
-             object.forEach ( function (item, index) {
+                   fn (index, item);  
              // 在數(shù)組上使用forEach，用function接收item和index成黄，然后在傳給fn
-             });  
-       } else {    // 不是數(shù)組的話那就是對象
-             for (key in object) {  // key是對象里的成員
-                   if (object.hasOwnProperty (key)) {  // 判定key是否為對象的原生屬性
+                         fn (key, object[key]);    // 把該屬性和屬性的值傳給 fn
-                   };
-             };
-       };
- };
+ 
- var arr = [2, 4, 5];                         // 定義一個數(shù)組
- allEach (arr, function (index, item) {       // 使用allEach方法呐芥，傳入數(shù)組和要使用的方法
-       console.log (index, item);
- });
+ var obj = {X:100, Y:200};
- allEach (obj, function (key, value) {
-       console.log (key, value);
- });

• DOM 是哪種基本數(shù)據(jù)結(jié)構(gòu)

  樹
  
  

• DOM 操作的常用 API 有哪些

  針對節(jié)點：獲取 DOM節(jié)點逻杖、獲取DOM節(jié)點的 property 和 Attribute 等
  針對樹結(jié)構(gòu)：獲取元素父節(jié)點奋岁、獲取元素子節(jié)點等
  新增節(jié)點和刪除節(jié)點
  
  

• DOM 節(jié)點的 Attribute 和 property 有什么區(qū)別

  • property：Js 對象的屬性，獲取和修改都是針對這個對象的荸百。
  • Attribute：html 標簽的屬性闻伶，獲取和修改都是針對這個標簽的。
    
    

• 如何檢測瀏覽器的類型

  navigator.userAgen - 返回一個字符串
  通過字符串的內(nèi)容够话，可以判斷出瀏覽器類型和一些基本特性蓝翰。
  但也一定完全準確，有可能會被修改女嘲。
  
  

• 拆解 url 的各部分

  以 http://primerscern.xyz/demo-blog-site?99#mid=100 為例

  console.log(location.href)
  // http://primerscern.xyz/demo-blog-site?99#mid=100
  
  console.log(location.protocaol)
  // http:
  
  console.log(location.host)
  // primerscern.xyz
  
  console.log(location.pathname)
  // /demo-blog-site/
  
  console.log(location.search)
  // ?99
  
  console.log(location.hash)
  // #mid=100
  
  // 通過每一個屬性畜份，可以獲取，也可以修改欣尼。
  

• 簡述事件冒泡流程

  • DOM樹形結(jié)構(gòu)
    冒泡的順序爆雹，根據(jù)DOM樹形結(jié)構(gòu)停蕉，按小到大（內(nèi)到外、子到父）冒钙态。
  • 事件冒泡
    逐層冒慧起，逐層觸發(fā)事件。
  • 阻止冒泡
    有需要時册倒，可以再某層阻止冒泡蚓挤，來停止繼續(xù)向上冒泡。
  • 冒泡應(yīng)用
    多數(shù)應(yīng)用在事件委托驻子。
    
    

• 什么時候用到事件委托灿意，優(yōu)點是什么

  當(dāng)需要大量綁定事件時，就會用到事件代理崇呵。
  好處就是
  ① 代碼比較簡潔脾歧，綁定一次代替多次。
  ② 瀏覽器壓力較小演熟。
  ③ 可以實現(xiàn)動態(tài)綁定鞭执。
  
  

• 編寫一個通用的事件監(jiān)聽綁定

  function bindEvent (ele, type, selector, fn) { // 加入選擇器應(yīng)對更多情況
        if (fn == null) {
              fn = selector
              selector = null
        }//當(dāng)不使用selector時，把fn換到前面來
  
        ele.addEventListener(type, function (e) {
              //綁定事件芒粹，綁定時執(zhí)行判斷
              var target
              if (selector) {
                    //需要代理
                    target = e.target
                    if (target.matches(selector)) {
                          //判斷兄纺，是否匹配選擇器
                          fn.call (target, e)
                    }     //執(zhí)行主體為e.target，所以要把函數(shù)給回它執(zhí)行
              } else {
                    //不代理
                    fn(e)
              }
        })
  }
  

• 編寫一個原生的 ajzx

- var xhr = new XMLHttpRequest()
- xhr.open("GET", "/api", false)
- xhr.onreadystatechange = function () {
-       if (xhr.readyState == 4) {
+             if (xhr..status == 200) {
-                   alert(xhr.responseText)
-             }
-       }
- }
+ xhr.send(null)

• 跨域的幾種實現(xiàn)方式

  • 三個標簽：<img src=''><script src='' <link href=''>化漆。
  • JSONP
  • 服務(wù)器設(shè)置 http header
    
    

• 描述 cookie估脆、sessionStorage 和 localStorage 的區(qū)別

  • 容量：cookie 只有4kb ，而 Storage 則有 5m
  • ajax：每次都會攜帶 cookie座云，占用性能疙赠，Storage 則不帶，僅用于存儲朦拖。
  • API 易用性：cookie 使用需要自行封裝一些方法圃阳，而 Storage 不用。
    document.cookie,localStorage.setItem(key, value),localStorage.getItem(key)
    
    

• 從輸入 url 到得到 html 的詳細過程

  • 瀏覽器把輸入的 url 發(fā)送到 DNS 服務(wù)器璧帝，然后返回該域名的 IP 地址
  • 向這個 IP 的機器（服務(wù)器）發(fā)送 http 請求
  • 服務(wù)器收到捍岳、處理并返回 http 請求
  • 瀏覽器得到返回的內(nèi)容，然后繼續(xù)執(zhí)行睬隶。
    
    

• window.onload 和 DOMContentLoaded 的區(qū)別

  前者是頁面的資源全部加載完畢锣夹，包括圖片，視頻等苏潜。
  后者是當(dāng) DOM 渲染完即可银萍，不需要等待圖片視頻加載。
  
  

• 瀏覽器渲染頁面的過程

  • 根據(jù) HTML 結(jié)構(gòu)生成 DOM Tree（文檔樹形結(jié)構(gòu)）
  • 根據(jù) CSS 生成 CSSOM（與DOM對應(yīng)）
  • 將 DOM 和 CSSOM 整合形成 RenderTree
  • 根據(jù) RenderTree 開始渲染和展示
  • 遇到 <script> 時恤左，會執(zhí)行并且會阻塞渲染
    
    

***

***

Wait me back