es6——新增的数据类型 class

es5 的面向对象方法

{
    function Father(name1) {
        this.name1 = name1
    }
    Father.prototype.say1 = function () {
        console.log(`i am ${this.name1}`);
    }

    function Son(name1, name2) {
        Father.call(this, name1)
        this.name2 = name2
    }
    Son.prototype = Father.prototype
    Son.prototype.say2 = function () {
        console.log(`${this.name1}'s father is ${this.name1}`);
    }

    let son = new Son('bob', 'lucy')
    son.say1() // i am bob
    son.say2() // lucy's father is bob
}

es6 的 class 面向对象

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

            print(){
                console.log('my name is ' + this.name + ', ' + this.age + ' years old.');
            }
        }

        let person=new Person2('bob',20);

        console.log(person);//Person {name: "bob", age: 20}
        person.print();//my name is bob, 20 years old.
    }

	// 变量接受 class
    {
		let Person3 = class {
            constructor(name,age){
                this.name=name;
                this.age=age;
            }

            print(){
                console.log('my name is ' + this.name + ', ' + this.age + ' years old.');
            }
        }

        let person=new Person3('bob',20);

        console.log(person);//Person {name: "bob", age: 20}
        person.print();//my name is bob, 20 years old.
	}
	
	// 立即执行的 class
	{
      let Dog5 = new class {
        constructor (json) {
          this.name = json.name
          this.age = json.age
          this.hobbies = json.hobbies
        }

        doSomething (something) {
          console.log(`${this.name}今年${this.age}岁了，爱好${this.hobbies}，现在要去${something}`)
        }
      }({ name: 'miss', age: 20, hobbies: '主播' })

      Dog5.doSomething('打游戏')// miss今年20岁了，爱好主播，现在要去打游戏
    }
    
    // getter setter 拦截
    {
        class Dog6 {
            constructor(propValue) {
                this.propValue = propValue
            }
            get prop() {
                console.log('getter', this.propValue);
                return this.propValue
            }
            set prop(val) {
                console.log('setter', val);
                this.propValue = val
            }
        }

        let list = new Dog6('hello')
        list.prop = 'world' // setter world
        console.log(list.prop) // getter world / world
    }
    
    // static 静态方法和属性：不会继承，而是通过类直接调用
    {
      class Dog7 {
        static something = 'hello'

        static do () {
          console.log(Dog7.something)
        }
      }

      Dog7.do()// hello
      let dog = new Dog7()
      dog.do()// 报错
    }

	// 继承
	{
      class Dog7 {
        static something = 'hello'

        static do () {
          console.log(Dog7.something)
        }
      }

      class Dog8 extends Dog7 {
        static do1 () {
          console.log('world')
        }
      }

      Dog8.do()// hello
      Dog8.do1()// world
    }
    
    //注意继承在 constructor 中使用 this，以及在子方法中调用父方法，需要使用 super
    {
      class Dog5 extends Dog4 {
        constructor (json) {
          // 只有调用了 super 后才可以使用 this 关键字，并对 Dog4 传入 json
          super(json) 
          this.name = json.name
        }
        
        interview (who) {
          super.doSomething('玩耍') // doSomething() 是 Dog4 的方法，用 super 调用
          console.log(`${this.name}的朋友是${who}`)
        }
      }
	}

es6 class 与es5的面向对象的区别：

1. 写法不同，使用关键字 class
2. 当 new 一个实例，默认有一个 constructor 方法，且默认返回实例对象（this）,也可以返回另一对象
3. 类的所有方法都在 prototype 属性上，但是不可枚举，且每方法结束不能使用分号
4. 类的调用必须通过 new 一个实例，且类的内部默认使用严格模式
5. 不存在变量提升，必须先声明，再调用
6. class 的 this 默认指向当前类
7. class 的静态方法，使用关键字 static，不需 new，直接通过类来调用
8. 实例属性和静态属性的写法，实例属性在类的内部直接使用等式（=）写法，也可以写在 constructor 方法里，静态属性只需在实例属性前加一个关键字 static 即可
9. 类的继承使用关键字 extends，继承机制与 es5 完全不同，
   • es5 的继承原理：先 new 子类的实例对象 this，再通过将父类的方法和属性添加到子类的 this 上(parents.call(this))
   • es6 的继承原理：先创造父类的实例对象 this，所以要构造函数 constructor 访问父类的属性使用 this，必须先调用 super() 方法；再通过子类的 constructor() 来修改 this
10. 类的继承可以继承原生的构造函数，es5 不可以
11. class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有 [[construct]]，不能使用 new 来调用。