对象字面量
这里介绍一种对象字面量作为另一种语法则更清晰便于阅读:
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').οnclick=myFun;
<!--如果这样写的话,会报错,因为相当于是把windows.myFun的执行结果赋给a标签的onclick,因为-->
/*window没有style会报错。*/
/*document.getElementById('a').οnclick=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].οnclick=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调试我们可以看到: