## 對象的過程 描述new一個對象的過程 ①創建一個新對象 ``` var obj = new Object(); ``` ②讓Person中的this指向obj，并執行Person的函數體 ``` var result = Person.call(obj); ``` ③執行代碼，即對this賦值 ``` obj.__proto__ = Person.prototype; ``` ④返回this【判斷Person的返回值類型，如果是值類型，返回obj。如果是引用類型，就返回這個引用類型的對象】 ``` if (typeof(result) == "object") person = result; else person = obj; ``` ***** ***** ## 原型 ①所有的引用類型(數組，對象，函數)，都具有對像特性，即可自由擴展屬性（除了null） ②所有的引用類型(數組，對象，函數)，都有一個__proto__(隱式原型)屬性，屬性值也是一個普通對象 ③**所有的函數**，都有一個prototype(顯式原型)屬性，屬性值也是一個普通對象 ④所有的引用類型(數組,對象，函數)，__proto__屬性值指向它的構造函數的“prototype”屬性值 ⑤當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的__proto__(即它的構造函數的prototype)中尋找 ***** ***** ## 同步和異步 ### 同步和異步的區別是什么？ ①同步會阻塞代碼執行，而異步不會 ②alert是同步，setTimeout是異步 ### 何時需要異步 ①在可能發生等待的情況下 ②等待過程中不能像alert一樣阻塞程序運行 ③因此，所以的”等待的情況”都需要異步 前端使用異步的場景 ①定時任務：setTimeout，setInterval ②網絡請求：ajax請求，動態加載 ③事件綁定 ## 數組API ### forEach 遍歷所有元素 ``` var arr=[1,2,3] arr.forEach(function(item,index){ //遍歷數組的所有元素 console.log(index,item) }) ``` ### every 判斷所有元素是否都符合條件 ``` var arr=[1,2,3] var result=arr.every(function(item,index){ //用來判斷所有的數組元素，都滿足一個條件 if(item<4){ return true; } }) console.log(result); ``` ### some 判斷是否至少一個元素符合條件 ``` var arr=[1,2,3] var result=arr.some(function(item,index){ //用來判斷所有的數組元素，只要有一個滿足條件即可 if(item<2){ return true; } }) console.log(result); ``` ### sort 排序 ``` var arr=[1,4,2,3,5] var arr2=arr.sort(function(a,b){ //從小到大排序 return a-b //從大到小排序 //return b-a }) console.log(arr2) ``` ### map 對元素重新組裝，生成新數組 ``` var arr=[1,2,3,4] var arr2=arr.map(function(item,index){ //將元素重新組裝，并返回 return '<b>'+item+'</b>' }) console.log(arr2) ``` ### filter過濾符合條件的元素 ``` var arr=[1,2,3] var arr2=arr.filter(function(item,index){ //通過某一個條件過濾數組 if(item>=2){ return true; } }) console.log(arr2) ``` ### 判斷是否在可視區域 ``` $(window).scroll(function () { var a = document.getElementById("eq").offsetTop; if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) { alert("div在可視范圍"); } }); ``` ### 判斷頁面到底部 網頁可見區域寬： document.body.clientWidth; 網頁可見區域高： document.body.clientHeight; 網頁可見區域寬： document.body.offsetWidth (包括邊線的寬); 網頁可見區域高： document.body.offsetHeight (包括邊線的寬); 網頁正文全文寬： document.body.scrollWidth; 網頁正文全文高： document.body.scrollHeight; 網頁被卷去的高： document.body.scrollTop; 網頁被卷去的左： document.body.scrollLeft; 網頁正文部分上： window.screenTop; 網頁正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區高度： window.screen.availHeight; 屏幕可用工作區寬度：window.screen.availWidth; ``` scrollTop + clientHeight == scrollHeight。 ``` ``` $(window).scroll(function(){ 　　var scrollTop = $(this).scrollTop(); 　　var scrollHeight = $(document).height(); 　　var windowHeight = $(this).height(); 　　if(scrollTop + windowHeight == scrollHeight){ 　　　　alert("已經到最底部了！"); 　　} }); ``` /** * 函數節流方法 * @param Function fn 延時調用函數 * @param Number delay 延遲多長時間 * @return Function 延遲執行的方法 */ ``` var throttle = function (fn, delay) { var timer = null; return function () { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } }; window.onresize = throttle(testFn, 200, 1000);