摘要：確定離開和操作的用法實例操作符判斷基本數據類型檢測對象的繼承關系，左操作數是對象，右操作數是構造函數可以準確判斷左對象是右對象的實例頁面的三種彈窗警告框確認框提示框請指出和的區別共同點這兩種事件都代表的是頁面文檔加載時觸發。

js&jq涉及內容眾多，分為上下兩部分進行整理，該部分為上部分。

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好;

參與項目，快速高質量完成實現效果圖，精確到1px;

與團隊成員，UI設計，產品經理的溝通;

做好的頁面結構，頁面重構和用戶體驗;

處理hack，兼容、寫出優美的代碼格式;

針對服務的優化、擁抱最新前端技術。

  

    
Month
    
Savings
  
  

    
January
    
$100
  

首先通過題目給的table id 獲得該對象;
tableObj.rows.length; 獲得行數;
tableObj.rows[x].cells[y].innerText 可以獲得x行y列的值;
遍歷table

function show(){
    var    tableRowInfo ="";
    tableObj = document.getElementById("t");
    for(var i =0 ;i
2、獲取頁面html標簽的個數
var elementArr = document.getElementsByTagName("*")
var tagNameArr = []
for(var i= 0,len=elementArr.length;i
3、DOM事件流包括哪幾個階段
事件流，從頁面接收事件的順序；IE的事件流叫做事件冒泡；Netscape的事件流叫做事件捕獲；
“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段
document.addEventListener(type, handler, false);//true事件捕獲模式，false事件冒泡模式
4、html元素添加事件的方法
原生方法：
//1


//2
var btn = document.getElementById("myBtn")
btn.onclick = function(){}

//3
btn.addEventListener("click",function(){},false)//false在冒泡階段調用事件處理程序

IE：btn.attachEventListener("click",function(){},false)
5、用js代碼完成，body里面生成100個div，內容是1-100自身序號，顏色按照紅、黃、藍、綠交替變色，10行10列
// CSS 
#box { position:relative; }
#box div { width: 60px; height: 60px; position: absolute; }

// HTML 


// JavaScript 

apply()/call()求數組最值
var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458
18、比較typeof與instanceof？

相同點：JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空，或者是什么類型的。
typeof的定義和用法：返回值是一個字符串，用來說明變量的數據類型。
細節：
1.typeof 一般只能返回如下幾個結果：number,boolean,string,function,object,undefined。
2.typeof 來獲取一個變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因為如果 a 不存在（未聲明）則會出錯。
3.對于 Array,Null 等特殊對象使用 typeof 一律返回 object，這正是 typeof 的局限性。

Instanceof定義和用法：instanceof 用于判斷一個變量是否屬于某個對象的實例。

a instanceof b?alert("true"):alert("false"); //a是b的實例？真:假

var a = new Array(); 
alert(a instanceof Array);  // true
alert(a instanceof Object)  // true
如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類。

function test(){};
var a = new test();
alert(a instanceof test)   // true
細節：
1.如下，得到的結果為‘N’,這里的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型對象。
if (window instanceof Object){ alert("Y")} else {  alert("N");}  // "N"
19、如何理解閉包？

定義和用法：當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變量，如果返回的這個函數在外部被執行，就產生了閉包。
表現形式：使函數外部能夠調用函數內部定義的變量。
根據作用域鏈的規則，底層作用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這里明顯count 是函數內部的flag2 的那個count 。

    var count=10;   //全局作用域 標記為flag1
    function add(){
        var count=0;    //函數全局作用域 標記為flag2
        return function(){
            count+=1;   //函數的內部作用域
            alert(count);
        }
    }
    var s = add()
    s();//輸出1
    s();//輸出2

變量的作用域
要理解閉包，首先必須理解Javascript特殊的變量作用域。
變量的作用域分類：全局變量和局部變量。
特點：
1、函數內部可以讀取函數外部的全局變量；在函數外部無法讀取函數內的局部變量。
2、函數內部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！
使用閉包的注意點

1、濫用閉包，會造成內存泄漏：由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。
2、會改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。
20、什么是跨域？跨域請求資源的方法有哪些？


什么是跨域？
由于瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況：

網絡協議不同，如http協議訪問https協議。

端口不同，如80端口訪問8080端口。

域名不同，如qianduanblog.com訪問baidu.com。

子域名不同，如abc.qianduanblog.com訪問def.qianduanblog.com。

域名和域名對應ip,如www.a.com訪問20.205.28.90.



跨域請求資源的方法：
1、porxy代理

    定義和用法：proxy代理用于將請求發送給后臺服務器，通過服務器來發送請求，然后將請求的結果傳遞給前端。

    實現方法：通過nginx代理；

    注意點：1、如果你代理的是https協議的請求，那么你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查，否則你的請求無法成功。

2、CORS 【Cross-Origin Resource Sharing】
    定義和用法：是現代瀏覽器支持跨域資源請求的一種最常用的方式。

    使用方法：一般需要后端人員在處理請求數據的時候，添加允許跨域的相關操作。如下：


res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":"http://localhost",
    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, Content-Type"
});
(3)、jsonp
定義和用法：通過動態插入一個script標簽。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面后會立即執行（沒有阻塞的情況下）。

特點：通過情況下，通過動態創建script來讀取他域的動態資源，獲取的數據一般為json格式。


缺點：

　　1、這種方式無法發送post請求（這里）

　　2、另外要確定jsonp的請求是否失敗并不容易，大多數框架的實現都是結合超時時間來判定。
        
21、談談垃圾回收機制方式及內存管理

定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程中使用的內存。
原理：垃圾收集器會定期（周期性）找出那些不在繼續使用的變量，然后釋放其內存。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔周期性的執行。
實例如下：

function fn1() {
    var obj = {name: "hanzichi", age: 10};
}
function fn2() {
    var obj = {name:"hanzichi", age: 10};
   return obj;
}
var a = fn1();
var b = fn2();
fn1中定義的obj為局部變量，而當調用結束后，出了fn1的環境，那么該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程中，返回的對象被全局變量b所指向，所以該塊內存并不會被釋放。


垃圾回收策略：標記清除(較為常用)和引用計數。
標記清除：
　　定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記為："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視為準備回收的變量。
　　到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。
引用計數：
　　定義和用法：引用計數是跟蹤記錄每個值被引用的次數。
　　基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數為0時，被視為準備回收的對象。


內存管理
1、什么時候觸發垃圾回收？
垃圾回收器周期性運行，如果分配的內存非常多，那么回收工作也會很艱巨，確定垃圾回收時間間隔就變成了一個值得思考的問題。

IE6的垃圾回收是根據內存分配量運行的，當環境中的變量，對象，字符串達到一定數量時觸發垃圾回收。垃圾回收器一直處于工作狀態，嚴重影響瀏覽器性能。

IE7中，垃圾回收器會根據內存分配量與程序占用內存的比例進行動態調整，開始回收工作。

2、合理的GC方案：(1)、遍歷所有可訪問的對象; (2)、回收已不可訪問的對象。
3、GC缺陷：(1)、停止響應其他操作；
4、GC優化策略：(1)、分代回收（Generation GC）;(2)、增量GC


開發過程中遇到的內存泄露情況，如何解決的？
1、定義和用法：
內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言采用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。我們知道，瀏覽器中也是采用自動垃圾回收方法管理內存，但由于瀏覽器垃圾回收方法有bug，會產生內存泄露。

2、內存泄露的幾種情況:
1.意外的全局變量引起的內存泄露
function leak(){  
  leak="xxx";//leak成為一個全局變量，不會被回收  
}
2.閉包引起的內存泄露

3.沒有清理的DOM元素引用

4.被遺忘的定時器或者回調 5）子元素存在引起的內存泄露

(1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在內存泄露。


實例如下：

    



解決方法如下：


    


(2)、由于是函數內定義函數，并且內部函數--事件回調的引用外暴了，形成了閉包。閉包可以維持函數內局部變量，使其得不到釋放。
實例如下：
function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
        //Even if it"s a empty function
    }
}
解決方法如下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it"s a empty function
    }
    obj=null;
}
22、如何判斷一個變量是對象還是數組？
判斷數組和對象分別都有好幾種方法，其中用Object.prototype.toString.call()兼容性最好。
23、定時器的執行順序或機制。
因為js是單線程的，瀏覽器遇到setTimeout或者setInterval會先執行完當前的代碼塊，在此之前會把定時器推入瀏覽器的待執行事件隊列里面，等到瀏覽器執行完當前代碼之后會看一下事件隊列里面有沒有任務，有的話才執行定時器的代碼。 
所以即使把定時器的時間設置為0還是會先執行當前的一些代碼。
24、Javascript中callee和caller的作用？

caller是返回一個對函數的引用，該函數調用了當前函數；caller返回調用者，指向當前函數的直接父函數
callee是返回正在被執行的function函數，也就是所指定的function對象的正文。callee是被執行的function對象，他是arguments的一個屬性，就是指向當前函數b的父函數a
callee, caller不建議使用，因為這兩個屬性在嚴格模式(use strict)下都不存在。

25、Web Storage與Cookie相比存在的優勢：
(1)、存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。

(2)、存儲內容不會發送到服務器：當設置了Cookie后，Cookie的內容會隨著請求一并發送的服務器，這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

(3)、更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操作更為簡便。cookie需要自己封裝。

(4)、獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂。

26、瀏覽器緩存有哪些，通常緩存有哪幾種
http緩存

websql

cookie

localstorage

sessionstorage


27、document.write和innerHTML的區別：
document.write是直接寫入到頁面的內容流，如果在寫之前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉之后重新調用該函數，會導致頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentElement.innerElement。

innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪

28、xml和json的區別，請用四個詞語來形容
JSON相對于XML來講，數據的體積小，傳遞的速度更快些

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互

XML對數據描述性比較好；

JSON的速度要遠遠快于XML    


29、new操作符到底到了什么
var Func=function(){};  

var func=new Func ();  

new共經過了4幾個階段

1、創建一個空對象
    var obj=new Object();  


2、設置原型鏈
    obj.__proto__= Func.prototype;  


3、讓Func中的this指向obj，并執行Func的函數體。
    var result =Func.call(obj); 
    

4、判斷Func的返回值類型：

    如果是值類型，返回obj。如果是引用類型，就返回這個引用類型的對象。

    if (typeof(result) == "object"){  
        func=result;  
    }else{  
        func=obj;;  
    }      

(1) 創建一個新對象；
(2) 將構造函數的作用域賦給新對象（因此 this 就指向了這個新對象） ；
(3) 執行構造函數中的代碼（為這個新對象添加屬性） ；
(4) 返回新對象。
30、簡述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。

31、sessionStorage 、localStorage 和 cookie 之間的區別
共同點：用于瀏覽器端存儲的緩存數據

不同點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie后，數據會發送到服務器端，造成一定的寬帶浪費；

    web storage,會將數據保存到本地，不會造成寬帶浪費；

(2)、數據存儲大小不同：Cookie數據不能超過4K,適用于會話標識；web storage數據存儲可以達到5M;

(3)、數據存儲的有效期限不同：cookie只在設置了Cookid過期時間之前一直有效，即使關閉窗口或者瀏覽器；

    sessionStorage,僅在關閉瀏覽器之前有效；localStorage,數據存儲永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage在不同的瀏覽器窗口中不共享，即使是同一個頁面；