js 面向对象（oop）笔记

清疚 2022-05-30 03:50 252阅读 0赞

特点：

1.  抽象：抓住核心问题
2.  封装：不考虑内部的实现，只考虑功能的使用
3.  继承：从已有的对象上，继承出新的对象
    
     *  多重继承
     *  多态

对象的组成

1.  方法——–函数：过程 、动态的
2.  属性——–变量：状态 、静态的

混合的构造函数和原型的方式：构造函数加属性，原型加方法  
构造函数写法：首字母大写

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>面向对象的选项卡</title>
      <style> .box{ margin:0 auto; width: 300px; height: 300px; border:1px solid; } .box div{ display: none; } .box .active{ display: block; } </style>
    </head>
    <body>
      <div class="box">
        <header>
          <a href="javascript:void 0">11</a>
          <a href="javascript:void 0">22</a>
          <a href="javascript:void 0">33</a>
        </header>
        <footer>
          <div class="active">11</div>
          <div>22</div>
          <div>33</div>
        </footer>
      </div>  
      <script> // var oA = document.getElementsByClassName('box')[0].getElementsByTagName('a'); // var oDiv = document.getElementsByClassName('box')[0].getElementsByTagName('div'); // for (var i=0;i<oA.length;i++){ // oA[i].index=i; // oA[i].onclick=tab; // } tab.prototype.tclick=function(_this){ console.log(this) console.log(_this) for(var j = 0;j<this.oDiv.length;j++){ this.oDiv[j].className=''; } this.oDiv[_this.index].className='active'; } function tab(id){ var _this = this; this.container=document.getElementsByClassName(id)[0]; this.oA = this.container.getElementsByTagName('a'); this.oDiv = this.container.getElementsByTagName('div'); for(var i=0; i<this.oA.length; i++){ this.oA[i].index=i; this.oA[i].onclick=function(){ _this.tclick(this) } } } new tab('box') </script>
    </body>
    </html>

json 形式的面向对象

1.  只适合单体
2.  有的人管他叫命名空间

var obj = {
          a:1,
          say(){
            console.log(this.a)
          }
        }
        obj.say()

继承

function A(){ 
        console.log(12)
    }
    A.prototype.show(){
        console.log('show方法')
    }
    //继承
    function B(){ 
        A.call(this);//改变this指向，实现属性继承
    }
    //方法继承,这种继承改的是指针的指向，B添加方法A也会添加方法，如果要给B独立的方法，需要遍历A的方法赋值给B
    B.prototype=A.prototype;