6.24
阿新 • • 發佈：2017-06-24
head clas 共享 img 不同 cat var src ons 
一、閉包
在下列的代碼裏，我想實現的是，當點擊 <ol>中各個<li>時，頁面會彈窗顯示四個不同的數字，但是實際的結果是，在不同的<li>上點擊時，彈出的窗口顯示的數字都是4。 原因：在這個例子裏面，alert(i)的this是window,（原因是，alert對應的的作用域是對應的<li>，而它的方法裏面alert的作用域是window） 所以在鼠標點擊這個事件調用函數之前，早在頁面加載的過程中，for循環已經完成，得到的i都是值為4 所以為了使得原來的需求能夠實現，我們可以使用函數閉包，將變量i加入到事件處理器onclick的函數閉包之中，實現如下： <!DOCTYPE html><html><head><title>test</title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/></head><body><ol><li>第一項</li><li>第二項</li><li>第三項</li><li>第四項</li></ol><scripttype="text/javascript">window.onload=function() {varlis=document.getElementsByTagName(‘li‘);for(vari=0; i<lis.length; i++) { lis[i].onclick=function(i) {returnfunction() { alert(i); } } (i);//利用IIFE實現函數閉包，將i作為參數傳入即可} }</script></body></html> 二、原型和原型鏈 一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object ，Function 是JS自帶的函數對象。下面舉例說明 functionf1(){};varf2 = function(){};varf3 = newFunction(‘str‘,‘console.log(str)‘); varo3 = newf1();varo1 ={};varo2 =newObject(); console.log(typeofObject); //functionconsole.log(typeofFunction); //functionconsole.log(typeofo1); //objectconsole.log(typeofo2); //objectconsole.log(typeofo3); //objectconsole.log(typeoff1); //functionconsole.log(typeoff2); //functionconsole.log(typeoff3); //function 在上面的例子中 o1 o2 o3 為普通對象，f1 f2 f3 為函數對象。怎麽區分，其實很簡單，凡是通過 new Function() 創建的對象都是函數對象，其他的都是普通對象。f1,f2,歸根結底都是通過 new Function()的方式進行創建的。Function Object 也都是通過 New Function()創建的。 functionf1(){}; console.log(f1.prototype)console.log(typeoff1. prototype) //Objectconsole.log(typeofFunction.prototype) //Function，這個特殊console.log(typeofObject.prototype) //Objectconsole.log(typeofFunction.prototype.prototype) //undefined 從這句console.log(f1.prototype) //f1 {} 的輸出就結果可以看出，f1.prototype就是f1的一個實例對象。就是在f1創建的時候,創建了一個它的實例對象並賦值給它的prototype，基本過程如下： vartemp = newf1(); f1. prototype= temp; 所以，Function.prototype為什麽是函數對象就迎刃而解了，上文提到凡是new Function ()產生的對象都是函數對象，所以temp1是函數對象。 vartemp1 = Function (); Function.prototype= temp1; varperson = function(name){this.name =name }; person.prototype.getName= function(){returnthis.name; }varzjh = newperson(‘zhangjiahao’); zjh.getName();//zhangjiahao 從這個例子可以看出，通過給person.prototype設置了一個函數對象的屬性，那有person實例（例中：zjh）出來的普通對象就繼承了這個屬性。具體是怎麽實現的繼承，就要講到下面的原型鏈了。 三．原型鏈 JS在創建對象（不論是普通對象還是函數對象）的時候，都有一個叫做__proto__的內置屬性，用於指向創建它的函數對象的原型對象prototype。以上面的例子為例： console.log(zjh.__proto__ === person.prototype)//true 同樣，person.prototype對象也有__proto__屬性，它指向創建它的函數對象（Object）的prototype console.log(person.prototype.__proto__ === Object.prototype)//true 繼續，Object.prototype對象也有__proto__屬性，但它比較特殊，為null console.log(Object.prototype.__proto__)//null 我們把這個有__proto__串起來的直到Object.prototype.__proto__為null的鏈叫做原型鏈。如下圖：6.24