ES6中class类笔记

我总是记不住，可能真的是杂念太多了，理解不来这些东西，先记下来放到这里

class的基础语法

• 注意：类名的首字母必须大写

// Cat是类
// name是Cat类的属性
class Cat {
	name = "hello kitty";
}	

// 生成对象实例
const smallCat = new Cat();

// 使用typeof查看类的类型
typeof Cat; 

类的constructor方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

也就说只要调用new Cat(), 那么相当于执行Cat类中constructor方法，如果没有定义，会自动生成一个空的方法;

class Cat {
}

// 等同于
class Cat {
  constructor() {}
}

添加实例属性

生成多个对象，对象都有自己的名字, constructor内部可以使用this来访问实例,来给实例添加属性（this.name就是实例的属性）

class Cat {
	constructor(name){
		this.name = name;
	}
}

const smallCat = new Cat("hello kitty");
const bigCat = new Cat("tiger");

添加实例方法
在类内部添加函数，注意不要带function ，实例方法内部也可以通过this来访问当前实例

class Cat{
	constructor(name){
		this.name = name;
	}

	sound(voice){
		console.log(voice);
	}
}

const smallCat = new Cat("hello kitty");
smallCat.sound("喵喵喵");

类的静态方法

静态方法是类的自身的方法，可以通过类名来访问,实例无法访问类的静态方法，通常用来定义类的默认就存在的并且不会改变的东西

class Cat{
	constructor(name){
		this.name = name;
	}

	static footer(){
		console.log(4);
	}
}

//写法等同于：
Cat.footer = function(){
	console.log(4);
}

类的继承

Class 可以通过extends关键字实现继承,子类必须在constructor方法中调用super方法，否则新建实例时会报错。
这是因为子类必须先通过父类的构造函数完成构建，得到与父类同样的实例属性和方法，再加上子类自己的实例属性和方法, 如果存在相同的属性或者方法，则子类会覆盖父类的属性或方法

// 父类
class Animal{
	constructor(){
		this.age = 2;
	}
}

// 子类
class Cat extends Animal{
	constructor(name){
		super();
		this.name = name
	}

	sound(voice){
		console.log(voice);
	}
}

把子类的name属性和sound方法也封装到Animal类中
super必须在子类的constructor中第一时间调用,因为子类必须先通过父类的构造函数完成构建, (类的静态方法，也可以被子类继承)

下面这个是copy别人ES6的代码

// pages/class/class.js
Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    // es6代码演示

    // 比较常见的设计模式, (发布订阅模式， 命令模式)

    // 1.单例模式
    // js实现单例模式方法
    // 单例的意思就是，只有一个对象，全局是唯一的
    const window= {
      scrollY: "",
      document: {},
      setInterval: function(){},
      location: function(){},
      alert: function(){}
    };

    // 2.es5工厂模式
    // 一般来说，工厂模式的构造函数首字母路必须大写
    // 构造函数是用来创建多个实例的
    function Node(){

      // this指向的实例
      this.children = {};

      this.offsetWidth = 100;
      this.offsetHeight = 100;

      //this.addEventListener = function(){}
    }

    // 通过原型写构造函数的方法
    Node.prototype.addEventListener = function(){
      console.log("执行了绑定的事件")
    }

    // 创建对象
    const div = new Node();
    //div.addEventListener();

    // 3.es6工厂模式
    // es6引入了类的概念
    // 首字母必须大写
    class NodeEs6{

      children = {};

      offsetWidth = 100;

      offsetHeight = 100;

      addEventListener(node){
        console.log( node +  ":执行了es6绑定的事件")
      }
    }

    // 创建es6类的对象
    const div1 = new NodeEs6();
    //div1.addEventListener("div1");

    const div2 = new NodeEs6();
    //div2.addEventListener("div2");


    // base 基类/父类
    class Animal{
      
      // 父类的构造函数
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      eat(food){
        console.log("吃:" + food);
      }

      // 静态方法也叫作类的方法
      // static修饰过的方法叫做类的方法， 也叫静态方法
      // 和Cat.sleep意思的相等的
      static sleep() {
        console.log("睡觉")
      }
    }

    // ---------------------------------
    // 猫类
    // extends是类的继承关键字
    class Cat extends Animal{

      // 构造函数, 构造函数是在每次创建对象时候都会调用
      // 通过构造函数可以实现动态的实例属性
      constructor(name){
        this.name = name;
        this.age = 2;
      }

      // 实例的方法,通过类创建的对象来调用
      eat(){
        console.log("吃鱼")
      }
    }

    const kitty = new Cat("kitty", 2);
    const tiger = new Cat("panhu");
    console.log(kitty)
    //console.log(tiger)

    kitty.eat("鱼")

    // 静态方法也是可以继承的
    Cat.sleep();

    // -----------
    // 狗类
    class Dog extends Animal{
      constructor(name) {
        // super()就是执行父类的constructor的方法
        super(name);

        this.voice = "汪汪汪";
      }

      eat() {
        console.log("吃鱼")
      }
    }

    // 创建狗的对象
    const erha = new Dog("erha");
    console.log(erha.name)

    // 静态方法也叫作类的方法
    Cat.sleep = function(){
      console.log("睡觉")
    }


    // 类的本质类型
    console.log(typeof Cat)
  }

  

  
})