网站首页 javascript技术

js--中的面向对象

发布时间：2016-10-16 03:21查看次数：3341

object.rar       源码示例:


js--中的面向对象

<script type="text/javascript">
//面向过程风格
    // window.onload = function(){
    //     var aBut = document.getElementsByTagName('button');
    //     var aTags= document.getElementsByClassName('tags');
               
    //     for(var i=0;i<aBut.length;i++){
    //         aBut[i].index = i ;            //给每个标签加上索引
 //            aBut[i].onclick = function(){
 //                 var index = this.index; 
 //                 for(var y=0;y<aTags.length;y++){
 //                    aTags[y].style.display = 'none';
 //                 }
 //                 aTags[index].style.display = 'block';
 //            }
    //           }
    // }
//面向对象风格
//面向对象风格中需要用的继承,闭包参数(C++中的provate 私有)
//
window.onload =function(){
  new initTags('button','tags');
}
//1.建立原先
function initTags(button,tags){
        var self = this;          //先把对象存储闭包参数 或者私有属性

         self.aBut = document.getElementsByTagName(button);

         self.aTags = document.getElementsByClassName(tags);

        for (var i = 0; i < self.aBut.length; i++) {
                self.aBut[i].index = i;       //一样加上索引
                //加事件
                self.aBut[i].onclick = function(){
                  var but = this;
                  self.showTags(but);
                } 
           }   

}
//2.继承方法
initTags.prototype.showTags = function(button){
                 var self = this;           //这里的This 指向自身的构造方法 都用this容易混淆
                 var index = button.index; 
                 for(var y=0;y<self.aTags.length;y++){
                    self.aTags[y].style.display = 'none';
                 }
                 self.aTags[index].style.display = 'block';
};

//总结 this 容易出错的地方 一个是在事件中 这个THIS指的是事件自身这个对象,一个是在时钟THIS指向的WINdow
//这些地方需要把 对象存起来

</script>

知识点: 闭包 THIS   私有属性