编程思想

**面向过程：**分析出解决问题所需的步骤，然后用函数把这些步骤一一实现，使用的时候再一个一个一次的调用就可以了

**面向对象：**把事务分解成为一个个对象，然后由对象之间分工合作

面向对象的特性：

• 封装性
• 继承性
• 多态性

类和对象

对象

对象时一个具体的事物

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象

• 属性：事物的特征，在对象中用属性来表示
• 方法：事物的行为，在对象中用方法来表示

类

创建类案例

constructor(){} 构造函数

class Star{
    constructor(uname,age){
        this.uname = uname;
    	this.age = age;
    }
    // 共有方法 不需要加function
    run(){
        console.log('ruaaaaa');
    }
}
var demo01 = new Star('yuadh',10);

注意点

• ES6 没有变量提升，所以必须先定义类，才能通过类实例化对象
• 类里面的共有属性和方法一定要加 this 使用

this 的指向是谁调用对象this就指向谁

继承性

类的继承

class Father{
    constructor(){
        
    }
    run(){
        console.log('ruaaaa');
    }
}
class Son extends Father{
 	//继承了父类的方法   
}

super

可以调用父类中的调用函数

class Father{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    sum(){
        console.log(this.x+this.y);
    }
}
class Son extends Father{
    constructor(x,y){
        super(x,y);
    }
}
var demo = new Son(4,5);
demo.sum();

且super关键字还可以 使用父类中的方法 Father.say()

注意点

• super调用父亲的构造函数，必须先调用父类的构造方法，再使用子类构造方法

  class Son extends Father{
      constructor(x,y){
          //super 父类构造方法必须放在子类构造方法前面
          super(x,y);
          this.x=x;
          this.y=y;
      }
  }
  

js面向对象案例

步骤

1. 功能写好大致框架

   //功能需求
   // 1.点击tab栏，可以实现切换效果
   // 2.点击 + 号，可以添加tab项和内容项
   // 3.点击 x 号，可以删除tab项和内容项
   // 4.双击tab或内容项文字，可以修改文字内容
   
   // 抽象对象：tab项 
   // 切换功能 、添加功能、删除功能、修改功能
   class Tab {
       constructor(id) {
               this.main = document.querySelector(id);
               // 获取tab项和内容项集合
               this.lis = this.main.querySelectorAll('li');
               this.sections = this.main.querySelectorAll('sections');
               this.init();
       }
       //给每一个对象绑定一个事件
       init() {
           for (var i = 0; i < this.lis.length; i++) {
               this.lis[i].index = i;
               this.lis[i].onclick = function() {
                   console.log(this.index);
               }
           }
       }
       toggleTab() {
   
       }
       addTab() {
   
       }
       removeTab() {
   
       }
       editTab() {
   
       }
   }
   
   new Tab('#tab');
   

2. 实现切换功能

   //此功能的调用对象是 单个lis[i]项 this.lis[i].onclick = this.toggelTab
   toggleTab(){
      that.clearClass();
      this.className = 'liactive';
      that.sections[this.index].className = 'conactive'; 
   }
   clearClass() {
       for (var i = 0; i < this.lis.length; i++) {
           this.lis[i].className = "";
           this.sections[i].className = "";
       }
   }