当前位置:编程学习 > JAVA >>

javascript学习5——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;  
        }  
    }  
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,