javascript学习5——javascript面向对象（下）

来源：互联网发布：java 汉字unicode编码编辑：程序博客网时间：2024/06/06 04:44

对象字面量

这里介绍一种对象字面量作为另一种语法则更清晰便于阅读：

this

通过下面的例子，可以加深我们的理解。

<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 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文件，用来进行测试：

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);

建立测试页面如下：

<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()方法

所以，我们修改代码如下：

//外面一定要再用funciton(){}围起来，因为clickLink.sayGoodBye.call相当于一个方法LS.addEvent(links[i],'click',function(){clickLink.sayGoodBye.call(clickLink)});

当然我们也可以在我们JS库里添加一个方法：如下：

function bindFunction(obj,func){return function(){func.apply(obj,arguments);}}window['LS']['bindFunction']=bindFunction;

方便以后我们进行调用。

然后调用语句：

LS.addEvent(links[i],'click',LS.bindFunction(clickLink,clickLink.sayGoodBye));

通过firefox调试我们可以看到：

javascript学习5——javascript面向对象（下）

对象字面量

this

call()和apply()方法

JS的异常处理