JavaScript-类

面向过程和面向对象

1面向过程

分析解决问题的步骤，用函数把这些步骤一步一步实现，使用的时候再一步一步调用就可以
比如洗衣服：
1：收拾出来衣服
2：打开洗衣机
3：把衣服放进去
4：启动洗衣机
5：关闭洗衣机
6：打开洗衣机
7：拿衣服
8：晾干

2面向对象

把事物分解成一个个对象，由对象之间分工合作

人     洗衣机

优点：易维护，面向对象由封装，继承，多态特性，可以设计出低耦合的系统，使系统更加易于维护

缺点： 性能比面向过程低

3：对象

对象是由属性和方法组成的，是键值对的集合，是一个可以具体的事物

属性：事物的特征

方法: 事物的行为

// 1字面量创建对象
    var obj = {
      name:"张三",
      age:12
    }
    // console.log(obj)

    // 2:构造函数创建对象
    function Star(name,age){
      this.name = name
      this.age = age
    }

    // 一类对象
    var o = new Star('小刘',23)
    console.log(o)

类

在ES6中新增了类的概念，可以用class关键字声明一个类，之后以这个类来实例化对象

一类对象具有相同的属性和方法 通过类实例化一个具体的对象

创建类

语法：

//  1  使用class关键字
   class Person{
    //  
   }

  //  2: 利用类创建对象  注意new关键字
  var p = new Person()

类创建添加属性和方法

   class Star {
    //  共有的属性要写到构造器中    constructor 是构造器
     constructor(name,age){
        this.name = name
        this.age = age
     }
    //  注意  不加逗号
     sing(song){
       console.log(this.name + "唱" + song);
     }
     eat(){
       console.log(this.name + "吃大餐");
     }
   }

  //  利用类创建对象
  var s = new Star('刘德华',23);
  console.log(s)
  s.sing('冰雨');
  var zxy = new Star('张学友',20);
  console.log(zxy)
  zxy.sing('xxx')

1:通过class关键字创建类，类名首字母要大写

2：类里有constructor,可以用来接收传递过来的参数，返回实例对象

3：constructor 在new生成实例时，会被自动调用，就算我们不写constructor，类也会自动生成

4：多个函数之间不需要加逗号

5：创建实例new不能省略

6：类名后不要加小括号，创建实例类名后加小括号 构造器不要加function

类的继承

语法

//父类
class Father{

}
//子类继承父类
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);   //使用super调用了父类中的构造函数
  }
}

var son = new Son(3,4)
console.log(son)
son.sum()

注意：

1：继承中,实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的

继承中，如果子类里没有方法，就去查找父类有没有这个方法，如果有，就执行父类的方法 没有就报错

2：继承中，实例化子类调用属性 ，先看子类里有没有这个属性，如果有就访问输出

如果子类里没有，就去父类中找，有就访问输出 没有就输出undefined

3：如果子类想要继承父类的方法，同时在自己内部扩展自己的属性和方法 利用super调用父类的构造函数

super必须在子类this之前调用

this指向

类里面共有的属性和方法一定要加this使用

1：constructor中this指向的是new出来的实例对象

2：自定义的方法，一般也指向new出来的实例对象

3：绑定事件之后，this指向的就是触发事件的事件源

注意：

ES6中类没有变量提升，所以必须先声明类，才能通过类实例化对象

// Cannot access 'Star' before initialization
//  var s = new Star('张三',23);
//  console.log(s)

class Star{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
}

类的本质

类的本质 ：函数

// ES6 类
   class Person{}
   var p = new Person();
   console.log(typeof Person);  //function
   console.log(Person.prototype)//原型

案例：面向对象实现tab栏切换