首頁 > 開發者 > JavaScript
對象字面量這裡介紹一種對象字面量作為另一種文法則更清晰便於閱讀： this 通過下面的例子，可以加深我們的理解。[html] <script type="text/javascript"> function myFun(){ this.style.color='red'; } </script> </head> <body> <a href="#" id="a">測試用的連結</a> <!--把指令碼放到這裡是因為要先載入a標籤，要不然會出錯。--> <script type="text/javascript"> <!--這種情況下，this表示執行這個myFun的執行個體，也就是這個a標籤--> document.getElementById('a').onclick=myFun; <!--如果這樣寫的話，會報錯，因為相當於是把windows.myFun的執行結果賦給a標籤的onclick，因為--> /*window沒有style會報錯。*/ /*document.getElementById('a').onclick=myFun();*/ </script> </body> 我們再來看一個例子我在前面的部落格中有提到建立自己的JS庫，下面我們在自己的JS庫裡添加一個方法，如下：[javascript] // JavaScript Document (function(){ window['LS']={}; function $() { var elements=new Array(); for(var i=0;i<arguments.length;i++) { var element=arguments[i]; if(typeof(element)=='string') { element=document.getElementById(element); } if(arguments.length==1) { return element; } elements.push(element); } return elements; }; window['LS']['$']=$; function getElementsByClassName(className,tag) { var allTags=document.getElementsByTagName(tag); var matchingElements=new Array(); className=className.replace(/\-/g,"\\-"); var regex=new RegExp("(^|\\s)"+className+"(\\s|$)"); var element; for(var i=0;i<allTags.length;i++) { element=allTags[i]; if(regex.test(element.className)) { matchingElements.push(element); } } return matchingElements; } window['LS']['getElementsByClassName']=getElementsByClassName; //向某一對象上添加事件。 function addEvent(node,type,listener) { if(!(node=$(node))) return false; if(node.addEventListener) { node.addEventListener(type,listener,false); return true; } else if(node.attachEvent) { node['e'+type+listener]=listener; node[type+listener]=function(){node['e'+type+listener](window.event);}; node.attachEvent('on'+type,node[type+listener]); return true; } return false; } window['LS']['addEvent']=addEvent; })(); 我們再建立一個JS檔案，用來進行測試：[javascript] function doubleClick() { this.message='這是期望看到的內容。'; } doubleClick.prototype.sayGoodBye=function(){ return confirm(this.message); } function initPage() { var clickLink=new doubleClick(); var links=document.getElementsByTagName('a'); for(var i=0;i<links.length;i++) { LS.addEvent(links[i],'click',clickLink.sayGoodBye); // 我認為上面那句話就相當於下面這句話。 // links[i].onclick=clickLink.sayGoodBye; } } LS.addEvent(window,'load',initPage); 建立測試頁面如下：[html] <title>無標題文檔</title> <!--這兩個也是有順序的哦--> <script type="text/javascript" src="LS.js"></script> <script type="text/javascript" src="context.js"></script> </head> <a href="#">測試用的連結1</a> <a href="#">測試用的連結2</a> <a href="#">測試用的連結3</a> <body> </body> 我們本來是想當單擊超連結的時候，彈出一個confirm，可是結果是：這樣的：我們通過firefox的firebug來看一下：this不是我們想要的，這裡的this是a標籤。那麼我們要怎麼才能讓this指向doubleClick對象呢？看下面。call()和apply()方法 所以，我們修改代碼如下：[javascript] //外面一定要再用funciton(){}圍起來，因為clickLink.sayGoodBye.call相當於一個方法 LS.addEvent(links[i],'click',function(){clickLink.sayGoodBye.call(clickLink)}); 當然我們也可以在我們JS庫裡添加一個方法：如下：[javascript] function bindFunction(obj,func) { return function() { func.apply(obj,arguments); } } window['LS']['bindFunction']=bindFunction; 方便以後我們進行調用。 然後調用語句：[javascript] LS.addEvent(links[i],'click',LS.bindFunction(clickLink,clickLink.sayGoodBye)); 通過firefox調試我們可以看到： JS的異常處理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
