面試題<初級>

INTERVIEW

@code-char:"```"
code:before,code:after{
concent:@code-char;
background:red;
}

• JavaScript的typeof返回的數據類型
  • object number function boolean underfind string typeof isNaN => function

---

• javascript的數據類型
  • 5種基本數據類型: string、number、boolean、null、undefined
  • 1種複雜類型:object (複雜的鍵控集合) 屬性的容器，屬性值除undefined
  • object包括: Object、Function、String、Number、Boolean、Array、Regxp、Date、Globle、Math、Error以及宿主環境提供的Object類型

---

• 檢測數組的方式
  • Array.isArray(arr); -----// es5

  if(typeof Array.isArray==="undefined"){
    Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]";
    };
  };

  • toString.call(arr); -----// 」[object Array]」
  • arr.constructor; -----// function Array() { [native code] };
  • arr instanceof Array; -----// 判斷是不是某個構造函數的實例

---

• 事件流
  • DOM事件流： 事件捕獲階段 =>目標元素階段=>事件冒泡階段
    1. 傳統事件綁定:不支持事件流;綁定屢次前面的被覆蓋
    2. w3c:addEventListener/attachEvent
  • 事件冒泡：事件開始由最具體的元素接受，而後逐級向上傳播
  • 事件捕捉：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的

---

• Javascript建立對象的幾種方式
  • 1.對象字面量、Object構造函數
  • 2.純構造函數
  • 3.空構造函數+原型
  • 4.混合構造函數+原型
  • 5.動態原型
  • 6.寄生構造函數
  • 7.Object.create() -----// ES5 ie9+

寄生構造函數[^1]
[^1]:——實際上是工廠模式的變種，只不過是放在其餘構造函數中建立對象

function SpecialArray(){
    var values = [];
    values.push.apply(values, arguments);
    values.toPipedString = function(){
        return this.join("|");
    };
    return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString());  //"red|blue|green"

---

• 構造函數繼承和原型鏈繼承有什麼區別
  • 在原型中的方法消耗的內存更小，由於在內存中原型只有一個，其中的方法能夠被全部的實例共享，實例化的時候並不會在內存中在複製一份，而構造函數中的方法每次都要再複製一份
  • 構造函數中定義的屬性和方法要比原型中的優先級高，若是定義了同名稱的屬性和方法，構造函數中的方法將會覆蓋原型中的方法

---

• 如何阻止事件冒泡和默認事件
  • e. stopPropagation(); -----// 標準瀏覽器阻止事件冒泡
  • event.canceBubble=true; -----// ie9以前

---

• 彈出索引

// 方式1、事件對象
for(var i = 0; i < dom.length; i++) {
  dom[i].onclick = function(e) {
    var e = window.e || e;
    var target = e.target || e.srcElement;
    return target;
  };
};

// 方式2、閉包實現
for(var i = 0; i < dom.length; i++) {
  dom[i].onclick = (function (index) {
    return function () {
      return index;
    };
  })(i);
}

---

• 編寫一個數組去重的方法
  • 法1、
    1. 先建立一個空數組，用來保存最終的結果
    2. 循環原數組中的每一個元素
    3. 再對每一個元素進行二次循環，判斷是否有與之相同的元素，若是沒有，將把這個元素放到新數組中
    4. 返回這個新數組
  • 法2、數組的indexOf()方法返回給定元素能找在數組中找到的第一個索引值，不然返回-1。

var removeMore = function(arr) {
    var newArr = [];
    for(var i = 0; i < arr.length; i++) //遍歷當前數組
    {
        //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
        //不然把當前項push到臨時數組裏面
        if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);
    }
    return newArr;
};

var arr = [1,3,3,4,6,0,8,6];

//方法1
function unqiue(arr){
    var json = {};
    var result = [];
    for(var i=0;i<arr.length;i++){
        //這裏會遍歷json的arr[i]屬性  由於json爲空  理所固然返回undefined
        //因此當if知足！undefined  即爲true的時候  給json的arr[i]的屬性的值設定爲1
        //而後放入結果數組裏  因此當arr數組中有重複的值時 if不知足條件  就不會添加到數組了
        if( !json[arr[i]] ){
            json[arr[i]] = 1;
            result.push( arr[i] );
        }
    }
    return result;
}
console.log(unqiue(arr));

//方法2
Array.prototype.unique1 = function() {
    var a = [];var l = this.length;
    for(var i = 0 ;i< l; i++)
    {
        for(var j = i + 1 ;j < l; j++) {
            if (this[i] === this[j]) {j = ++i}
        }
        a.push(this[i]);
    }
    return a;
}
console.log(arr.unique1());


//方法3
Array.prototype.unique3 = function()
{
    var n = []; //一個新的臨時數組
    for(var i = 0; i < this.length; i++) //遍歷當前數組
    {
        //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
        //不然把當前項push到臨時數組裏面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
};

---

• 深度克隆的方法

var json = {a:6,b:4,c:[1,2,3]};
function clone(obj){
    var oNew = new obj.constructor(obj.valueOf());
    if(obj.constructor === Object){
        for(var i in obj){
            oNew[i] = obj[i];
            // 遞歸調用
            if(typeof(oNew[i]) === 'object'){
                clone(oNew[i]);
            }
        }
    }
    return oNew;
}

---

• 數組嵌套對象的排序

// 將arr按age屬性降序排列
var arr = [
  {"name": "wang","age": 18},
  {"name": "liu","age": 34},
  {"name": "wu","age": 57},
  {"name": "qiu","age": 9},
  {"name": "lie","age": 14}
];
// 1.冒泡排序法
function sequence(arr) {
  for(var i = 0; i < arr.length; i++) {
    for(var j = 0; j < arr.length; j++) {
      if(arr[i].age < arr[j].age) {
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
      }
    };
  };
  return arr;
};

// 2.數組的**sort**方法
function sequence(arr) {
  var down = function(x,y) {
    return (x.age < y.age) ? 1 : -1;
  };
  arr.sort(down);
  return arr;
}

// 多屬性(鍵值)排序
var sequence = function(name,minor) {
  return function (o,p) {
    var a,b;
    if(o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name];
      b = p[name];
      if(a === b) {
        return typeof minor === 'function' ? minor(o,p) : 0;
      }  
      if(typeof a === typeof b) {
        return a < b ? 1 : -1;
      }
      return typeof a < typeof b ? -1 : 1;
    } else {
      throw {
        name : 'error';
      };
    }
  };
};

---

• while方式獲取頁面中全部的checkbox

var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];//返回的全部的checkbox
var len = domList.length;　　//緩存到局部變量
while (len--) {　　
　　if (domList[len].type === ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
};

---

• undefined會在如下三種狀況下產生：
  • 一個變量定義了卻沒有被賦值
  • 想要獲取一個對象上不存在的屬性或者方法
  • 一個數組中沒有被賦值的元素

---

• 將字符串提取成json格式內容

var url="http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx";
var str=url.substr(url.indexOf("?")+1);
var arr=str.split('&');
var obj={};
for (var i = 0; i < arr.length; i++) {
    var arri = arr[i];         //a=1
    var i2=arri.split("=");//["a","1"]
    obj[i2[0]]=i2[1];          //obj["a"]="1";
};

---

• 求一個字符串的字節長度

function countByts(str) {
  if(!arguments.length || !s) return null;
  if("" === s) return 0;
  var len = 0;
  for(var i = 0; i < str.length; i++) {
    if(str.charCodeAt(i) > 255) len += 2;
    else len++;
  };
  return len;
}

---

• trim函數

if (!String.prototype.trim) { 
    String.prototype.trim = function() { 
        return this.replace(/^\s+/, "").replace(/\s+$/,"");//\s匹配空白字符：回車、換行、製表符tab 空格
    } 
} 
// test the function 
var str = " \t\n test string ".trim(); 
alert(str == "test string"); // alerts "true"

---

• Javascript中callee和caller的做用？
  • arguments.callee：得到當前函數的引用;callee是返回正在被執行的function函數，也就是所指定的function對象的正文(自定義的函數 fun)。
  • caller是返回一個對函數的引用，該函數調用了當前函數;若是不是由其餘函數調用的，那麼返回值就是null

function fn(){
    console.log(arguments.callee==fn);      // true
    console.log(fn.caller);                 // fn2
}
function fn2(){
    fn();       //此時fn.caller就指向了fn2這個函數
}
fn2();

---

• 瀏覽器對象模型BOM裏經常使用的至少4個對象，window對象的經常使用方法至少5個
  • 對象：window document location screen history navigator
  • 方法：alert() confirm() prompt() open() close()

---

• 查詢字符串
  • window.location.search 返回值：?name=wang&id=mysql (問號後面的字符串)
  • window.location.hash 返回值：#age (錨點及以後的字符串)
  • window.location.reload() 刷新當前頁面

---

• BOM對象 window對象
  • window對象，是JS的最頂層對象，其餘的BOM對象都是window對象的屬性；
  • document對象，文檔對象；
  • location對象，瀏覽器當前URL信息；
  • navigator對象，瀏覽器自己信息；
  • screen對象，客戶端屏幕信息；
  • history對象，瀏覽器訪問歷史信息；

---

• bind(), live(), delegate()的區別
  • bind： 綁定事件，對新添加的事件不起做用(不支持動態添加)，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。
  • live： 方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。
  • delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上。

---

• 簡述link和import的區別？
  • link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
  • link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
  • link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
  • link支持使用Javascript控制DOM去改變樣式；而@import不支持。

---

• 原生方式轉換URL的search爲json對象

var getJson = function(str) {
    var item;
    var result = [];
    // 只有一個鍵值對
    if(search.indexOf("&") < 0) {
        item = str.splite('=');
        result[item[0]] = item[1];
    }
    // 多個鍵值對，以&符分開
    else{
    var splitArr = str.split('&');
        for(var i = 0; i < splitArr.length; i++){
            item = splitArr[i].split('=');
            result[item[0]] = item[1];      
        };
    }
    return result;
}

---

• readyonly和disable的區別
  • readonly只針對input(text / password)和textarea有效，
  • 而disabled對於全部的表單元素都有效，當表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去

---

• ajax的工做原理
  • Ajax經過XMLHttpRequest對象來向服務器發起異步請求，從服務器獲取數據，而後用JavaScript來操做DOM元素而更新頁面，也就是JavaScript能夠及時向服務器提出請求和處理相應，而不阻塞後續代碼的執行，達到無刷新頁面就能夠請求的效果。XMLHttpRequest是Ajax的核心機制。
  • ajax是多種技術組合起來的一種瀏覽器和服務器交互技術，基本思想是容許一個互聯網瀏覽器向一個遠程頁面/服務作異步的http調用，而且用接收的數據來局部更新當前頁面
  • ajax交互模型：
    • 同步：腳本會停留並等待服務器響應而後繼續

    • 異步：腳本容許頁面繼續其進程並處理可能的回覆

• 同步ajax有什麼影響

---

• 異步加載js的方案
  • defer：只支持ie
  • async：
  • 動態加載script標籤，加載完了回調

  /* 異步加載script方案 */
  
  function loadSctipt (url,callback) {
    var script = document.createElement('script');
    script.type = "text/Javascript";
    if(script.readyState) {   // 兼容IE瀏覽器
      script.onreadystatechange = function () {
        if(script.readyState === 'loaded' || script.readyState === 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {    // 其餘瀏覽器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.body.appendChild(script);
  };

---

• ajax請求(請求和響應)
  • 1.請求行:   xhr.open('get','index.php'); (get能夠不設置)
  • 2.請求頭:   xhr.setRequestHeader('ContentType',text/html); ===>告訴瀏覽器以何種方式解析
  • 3.請求主體:   xhr.send(null);
  • 1.獲取行狀態(包括狀態碼&狀態信息):   xhr.status & xhr.statusText
  • 2.獲取響應頭
    • 獲取指定頭信息:   xhr.getRequestHeader('Content-Type');
    • 獲取全部響應頭信息:   xhr.getAllRequestHeaders();
  • 3.響應主體:   xhr.responseText; || xhr.responseXML;

// 建立一個xhr實例
var xhr = new XMLHttpRequest();
// 發起http請求
xhr.open('get','index.php');
xhr.send(null);
// 接收服務器響應
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    // 接收到結果
    var result = xhr.responseText;
  }
};

• javascript的同源策略[^2]
  • 協議：http,ftp https
  • 主機名；localhost 127.0.0.1
  • 端口名：80:
  • http協議的默認端口：80
  • https:協議的默認端口是8083
  • 同源策略帶來的麻煩：ajax在不一樣域名下的請求沒法實現;若是說想要請求其餘來源的js文件，或者json數據，那麼能夠經過jsonp來解決
    [^2]:一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

---

• 跨域解決方案
  • 頂級域名相同的能夠經過domain.name來解決,即同時設置domain.name = 頂級域名
  • document.domain + iframe
  • window.name + iframe
  • location.hash + iframe
  • window.postMessage()
    參考資料:(http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html)
  • JSONP　---- JSON with Padding(只能以GET方式請求)
    • 原理:其本質是利用了<script src=""></script>標籤具備可跨域的特性，由服務端返回一個預先定義好的Javascript函數的調用，而且將服務器數據以該函數參數的形式傳遞過來，此方法須要先後端配合完成。

---

• jsonp跨區解決
  • img等標籤:支持數據發送，不能拿到服務端數據
  • link標籤:link[ref="stylesheet"]
  • script:

  var script = document.createElement('script');
  script.src = 'http://localhost:3000/?start=1&count=10';  // 服務端地址
  document.body.appendChild(script); // 發送請求
  /* 因爲腳本執行完成事後才能拿到數據 */
  // 1.
  script.addEventListener('load',function(){
    result = data;
  });
  // 2.被動的方式
  function callback(data) {
    result = data;
  };

---

• HTTP狀態消息
  • 200：請求已成功，請求所但願的響應頭或數據體將隨此響應返回。
  • 302：請求的資源臨時從不一樣的 URI響應請求。因爲這樣的重定向是臨時的，客戶端應當繼續向原有地址發送之後的請求。只有在Cache-Control或Expires中進行了指定的狀況下，這個響應纔是可緩存的
  • 304：若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。304響應禁止包含消息體，所以始終以消息頭後的第一個空行結尾。
  • 403：服務器已經理解請求，可是拒絕執行它。
  • 404：請求失敗，請求所但願獲得的資源未被在服務器上發現。
  • 500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這個問題都會在服務器端的源代碼出現錯誤時出現。

---

• js數組類型中的經常使用方法

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素。
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
shift()	刪除並返回數組的第一個元素
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
slice()	從某個已有的數組返回選定的元素
reverse()	顛倒數組中元素的順序。
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地數組，並返回結果。
valueOf()	返回數組對象的原始值

---

• Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象

---

• 運算符趕上未定義的變量
  • 若是其中一個數是NaN，則結果就是NaN
  • 若是乘積超過了ECMAScript設定的範圍，那麼就會返回Infinity、-Infinity
  • 若是參與乘法運算的某個操做數不是數值，js引擎會先調用Number()將這個數變成一個數值類型，

---

• POST請求使用的情形
  • 沒法使用緩存文件（更新服務器上的文件或數據庫）
  • 向服務器發送大量數據（POST 沒有數據量限制）
  • 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

---

• 嚴格模式
  • 全局變量顯式聲明；靜態綁定；禁止使用with語句；eval中定義的變量都是局部變量
  • 禁止this關鍵字指向全局對象；禁止在函數內部遍歷調用棧 arguments.callee
  • 嚴格模式下沒法刪除變量。只有configurable設置爲true的對象屬性，才能被刪除
  • 正常模式下，對一個對象的只讀屬性進行賦值，不會報錯，只會默默地失敗。嚴格模式下，將報錯。
  • 嚴格模式下，對一個使用getter方法讀取的屬性進行賦值，會報錯。
  • 嚴格模式下，對禁止擴展的對象添加新屬性，會報錯。
  • 嚴格模式下，刪除一個不可刪除的屬性，會報錯。
  • 正常模式下，若是對象有多個重名屬性，最後賦值的那個屬性會覆蓋前面的值。嚴格模式下，這屬於語法錯誤。
  • 正常模式下，若是函數有多個重名的參數，能夠用arguments[i]讀取。嚴格模式下，這屬於語法錯誤。
  • 正常模式下，整數的第一位若是是0，表示這是八進制數，好比0100等於十進制的64。嚴格模式禁止這種表示法，整數第一位爲0，將報錯。
  • 不容許對arguments賦值
  • arguments再也不追蹤參數的變化
  • 嚴格模式只容許在全局做用域或函數做用域的頂層聲明函數。也就是說，不容許在非函數的代碼塊內聲明函數；if else while for 沒法聲明函數
  • 嚴格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。

---

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

---

• 模塊化開發
  • 模塊化開發模式：瀏覽器端requirejs，seajs；服務器端node.js；ES6模塊化；fis、webpack等前端總體模塊化解決方案；grunt、gulp等前端工做流的使用

---

• 何檢測一個變量是一個String類型
  • typeof str
  • str.constructor
  • toString.call()

---

• 漸進加強和優雅降級之間的不一樣
  • 優雅降級: (graceful degradation，一開始就構建站點的完整功能，而後針對瀏覽器測試和修復)
  • 漸進加強: (progressive enhancement，一開始只構建站點的最少特性，而後不斷針對各瀏覽器追加功能)
  • 「優雅降級」和「漸進加強」都關注於同一網站在不一樣設備裏不一樣瀏覽器下的表現程度。關鍵的區別則在於它們各自關注於何處，以及這種關注如何影響工做的流程。

---

• 什麼是FOUC？你如何來避免FOUC？
  • 因爲css引入使用了@import 或者存在多個style標籤以及css文件在頁面底部引入使得css文件加載在html以後致使頁面閃爍、花屏,用link加載css文件，放在head標籤裏面

---

• 前端頁面的構成
  • html結構層：爲頁面搭建框架
  • css樣式層：修飾頁面
  • js交互層：利用腳本代碼爲頁面增長動態效果與交互

---

• HTML5新添加的標籤
  • 音頻、視頻、拖放、畫布、SVG、地理定位、應用緩存、表單元素

<!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> 
<basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite>
 <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> 
 <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6>
  <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label> 
  <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> 
  <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> 
  <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> 
  <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> 
  <ul> <var> <video> <wbr>

---

• position的值
  • absolute:相對於自身原來的位子定位
  • reletive:相對於有定位的父級或以上的盒子定位
  • fixed:相對於body定位

---

• div橫向排列的方法
  • 浮動
    • 前面的左浮動，最後的用overflow：hidden
    • 所有左浮動
  • 定位
  • display：inline-block；(可是很差，中間仍是有邊隙)

---

• 數據傳輸類型：GET | | POST
  • 從計算機數據類型傳輸（即信號傳輸）的話，分紅CRC循環冗餘碼傳輸，差錯校驗等
  • 文件數據類型傳輸，大多數都是二進制的形式
  • js與後臺交互的傳輸數據類型通常用字符串，數組，但更可能是json來傳輸數據

---

• 面向對象模式：
  • 就是面向對象編程：
    • 三大做用(封裝性、面向對象編程、描述數據)
    • 三大特性（多態、繼承、封裝）
      1. 封裝
      2. 繼承:基於原型鏈的繼承(其餘都是經過類的形式繼承)==>即拿來主義(1.原型式繼承;2.組合式繼承)

      // 1.組合式繼承
      var o = {num : 123};
      var obj = {age : 18};
      for (var k in o) {
        obj[k] = o[k]
      };
      
      //應用
      Object.prototype.extend = function(obj) {
        for(var k in obj) {
          this[k] = obj[k];
        }
      }
      
      // 2.原型繼承(不提倡，由於太慢)
      經過修改原型對象來實現繼承
      多繼承很難維護，提倡單繼承

      1. 多態:用設計模式來模擬實現多態;js中由於他的動態特性，自己就支持
    • 原型鏈
  • 面向對象是對面向過程的封裝(咱們仍然作的是面向過程)
  • 對象的本質就是鍵值對的集合，值類型稱之爲屬性，函數稱之爲方法
  • 把複雜的東西打包(方便維護，方便代碼模塊化，錯誤調試等);在開發大型項目的時候維護的時間會比開發的時候還大
  • 面向過程是用函數來封裝的；

---

• 面向對象建立模式：
  • 單例模式
  • 工廠模式
  • 寄生模式
  • 觀察者模式

---

• 原型鏈
  • 對象：foo、obj、Object.prototype（其他爲函數對象）
  • 實例對象的 __proto__ 指向相對應的函數原型對象(.prototype)
  • 函數對象
    • __proto__ => Function.prototype
    • prototype => 相應的原型對象
  • 原型對象
    • Foo.prototype.__proto__ => Function.prototype
    • Function.prototype => Object.prototype
    • Object.prototype => null
    • constructor => 各自的構造函數

實例對象	構造函數	原型對象
基於構造函數實例化的對象	自定義構造函數	自定義構造函數原型對象
foo	Foo	Foo.prototype
__proto__	__proto__	__proto__
	prototype	constructor
	內置 函數對象	內置 函數原型對象
	Function	Function.prototype
	__proto__	__proto__
	prototype	constructor
基於Object實例化的對象	內置 對象	內置 對象原型對象
obj	Object	Object.prototype
__proto__	__proto__	__proto__
	prototype	constructor

---

• 代碼的優化
  • 代碼的重用
  • 對內：模塊化；對外：繼承
  • 避免全局變量（命名空間，閉包，模塊化MVC（數據層、表現層、控制層））
  • 拆分函數，避免函數的臃腫

---

• 閉包
  • 塊級做用域:js執行
  • 邊解釋邊執行。腳本語言的特性。在執行的時候預解析已經完了，就提高了變量
  • 定義的變量被函數包裹着，被外界沒法訪問，就是閉包
  • 在js中閉包要解決的就是如何訪問(沙箱模式:把須要的變量掛在到window暴露出去)
  • 無限遞歸的時候內存不夠；由於每次調用都會生成一個新的變量；用閉包解決，將須要的值用函數包裹，只調用一次外界並接收，以後只調用內部函數；缺點:每次只能返回一個值；所以咱們讓返回值變成對象，打包將咱們要的值用對象的形式所有返回(比返回數組有優點)
  • 如何解決上述只讀的方式，如何寫？

  set_key: function(params){
    key = params;
  }

  • 沙箱是一個經典的應用場景
  • 使用閉包完成一些功能的時候能夠隱藏一些數據的特性(createCache函數)

---

• **_display:inline解決ie的雙邊距問題**

---

• 覽器的內核
  • IE: trident內核
  • Firefox：gecko內核
  • Safari:webkit內核
  • Opera:之前是presto內核，Opera現已改用Google Chrome的Blink內核
  • Chrome:Blink(基於webkit，Google與Opera Software共同開發)

---

• 利用多個域名來存儲網站資源會更有效
  • CDN緩存更方便
  • 突破瀏覽器併發限制
  • 節約cookie帶寬
  • 節約主域名的鏈接數，優化頁面響應速度
  • 防止沒必要要的安全問題

---

• 對網頁標準和標準制定機構重要性的理解
  • 網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

---

• cookies，sessionStorage和localStorage的區別
  • sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。
  • Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。
  • 除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

---

• src與href的區別
  • src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
  • src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
  • 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
  • href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，

---

• px和em的區別
  • px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小
  • 瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

---

• BFC
  • BFC（塊級格式化上下文），一個建立了新的BFC的盒子是獨立佈局的，盒子內元素的佈局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題
  • BFC是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外元素的佈局，這個渲染區域只對塊級元素起做用

---

• Doctype的做用？嚴格模式與混雜模式的區別
  • <!DOCTYPE>用於告知瀏覽器該以何種模式來渲染文檔
  • 嚴格模式下：頁面排版及JS解析是以該瀏覽器支持的最高標準來執行
  • 混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向後兼容

---

• window.top.document.compatMode查看當前模式

---

• 清除浮動的方式
  • 給父盒子一個高度
  • 在父盒子的下面添加一個一樣高度的盒子
  • 在父盒子的下面添加一個沒有高度的盒子,並加樣式clear:both;
  • 添加一個overflow:hidden;的樣式
    • 只 父盒子 添加:上下margin會合並(大的有效:100+20=100)
    • 父盒子 及 中間沒有高度的盒子添加:上下margin所有生效(100+20=120)
    • 只給下面的盒子添加該屬性: margin不生效;同時該法能夠作向右填充的效果
  • 添加一個clearfix的類:僞元素法;

  .clearfix::before,
  .clearfix::after{
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }

---

• 讓盒子居中的方式
  • 圖片居中:
    • 1)父盒子display:table;2)子盒子display:table-cell;vertical-align:middle;
    • 2)圖片下加一個行內塊級元素(span),設置屬性:img{vertical-align;} span{height:100%;display:inline-block;vertical-align: middle;}
  • 盒子居中:
    • 定位:--> 50% --> 負向移動小盒子的50%;

    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    <!-- margin:-100px, 0, 0,-100px; --> <!-- 子盒子大小的一半 -->

---

• 手機端實現0.5px

border: 1px solid red;
transform: scale(0.5) translate(-50%,-50%);

---

• 僞類最經常使用於哪裏(::before,::after{content:'';display:block;})

---

• 僞元素最經常使用於哪裏(:empty、:target)
  • 樣式的控制

---

• 匿名函數常加一個名
  • 方便遞歸調用
  • 方便在錯誤信息裏面能夠看到哪裏報錯(匿名函數只報行號)

---

• 如何獲取一給函數的形參列表

function foo(id,name,age,gender) {

};
var arr = /.+\((.*)\)/.exec(foo.toString);
var newArr = arr[1].split(',');
// newArr裏存的是形參的字符
// console對象的時候默認將其打印成tostring的形式

---

• 接口化開發

請求地址即所謂的接口，一般咱們所說的接口化開發，實際上是指一個接口對應一個功能，而且嚴格約束了請求參數和響應結果的格式，這樣先後端在開發過程當中，能夠減小沒必要要的討論，從而並行開發，能夠極大的提高開發效率，另一個好處，當網站進行改版後，服務端接口只須要進行微調。

---

• 遍歷數組
  • every要求每個元素都知足條件
  • some要求某個元素知足條件
    return arr.some(i => i>5) // 條件爲真時候返回
  • each
  • forEach
  • 不能在循環中刪除或新增數組元素

  // 定義一個空數組
  var newArr = [];
  arr.forEach(i => {
    if(arr[i] !== m){
      newArr.push(arr[i]);
    }
  })

---

• 後臺傳輸的XML和JSON有什麼區別？如何解析及優缺點
  • XML使用DTD(document type definition)文檔類型定義來組織數據，
    • 優勢:格式統一，符合標準；容易與其餘系統進行遠程交互，數據共享方便
    • 缺點:文件龐大，格式複雜；解析繁瑣，不易維護；客戶端服務器解析方式不一致
  • JSON輕量級數據交互(javascript object notation)

---

• FF下實現outerHTML

function getOuterHtml(id) {
  var ele = document.getElementById(id);
  var newNode = document.createChild('div');
  document.appendChild(newNode);
  var clone = ele.cloneNode(true);
  newNode.appendChild(clone);
  return newNode.innerHTML;
}

---

• 多瀏覽器檢測經過什麼
  • navigator.userAgent //"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36"
  • 不一樣瀏覽器的特性 // addEventListener();

---

• Flash和ajax各自優缺點
  • ajax: 可搜索性；開放性；費用；易用性；易於開發
  • flash: 多媒體處理；兼容性；矢量圖形比SVG，canvas優點好；客戶資源調度好(麥克，攝像頭)

---

• promise與異步回調的方法
  • 必須按照接口規定的嚴格的方法編寫處理代碼。也就是說在(then或catch)之外的方法都不可使用。不像回調函數能夠自由定義回調的參數。這樣能夠將複雜的異步處理輕鬆的模塊化。

---

• 怎麼注入事件

---

• node的執行機制

---

• 事件代理機制

---

• 不建議給js寫擴展方法的緣由

---

• ---

---

• ---

---

• ---

---

• ES5新特性

console.log(Array.prototype);     // Array[0]
console.log(String.prototype);    // String
console.log(Object.prototype)     // Object
console.log(Function)  // none   function Function() { [native code] }
console.log(Number.prototype)     // Number
dom.getElementsByTagName()        // HTMLCollection[3]
dom.querySelectorAll()            // NodeList[3]

var form = document.forms[0];
console.log(form.elements);

/* HTMLFormControlsCollection[2]
    0:input
    1:input
    length:2
    password:input
    username:input
    __proto__:HTMLCollection */