对象字面量
这里介绍一种对象字面量作为另一种语法则更清晰便于阅读:
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;
}
}
补充:web前端 , JavaScript ,