javascript学习5——javascript面向对象（上）
日期：2014-05-16 浏览次数：20468 次
javascript学习5——javascript面向对象（下）
对象字面量
这里介绍一种对象字面量作为另一种语法则更清晰便于阅读：
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，可是结果是：这样的：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
