浅析ES6类和对象

1. 类：描述一个抽象的事物，泛指某一大类；
   对象：描述一个具体的事物，特指某一个，通过实例化获取一个具体的对象

2. 面向对象的思维特点：将对象共用的的属性和方法抽取出来，封装成一个模板（类），然后对类进行实例化，获取累的对象。

3. 对象：在生活总，万物皆对象，对象是一个具体的事物；在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。对象由属性和方法构成。
   3.1 属性：事物的特征
   3.2 方法：事物的行为

4. 类：在ES6中，可以用class声明一个类，然后用这个类来实例化对象。

5. 创建类、生成实例 （类必须用new来实例化对象）
   语法： class Name { class body }
   生成实例：var xx = new Name();

   	class Star {}
   	var ldh = new Star()
   

6. 类constructor构造函数： 用于参数传递，返回实例对象。

   class Star {
   	constructor(name) {
   		this.name = name;
   	}
   }
   var ldh = new Star('刘德华');
   console.log(ldh.name);//刘德华
   

7. 类中添加公有方法
   语法：class Name{ constructor{} method1(){} }

   class Star {
   	constructor(name) {
   		this.name = name;
   	}
   	sing(song){
   		console.log(`${this.name}唱${song}`)
   	}
   }
   var ldh = new Star('刘德华');
   ldh.sing('忘情水');//刘德华唱忘情水
   

8. 类的继承
   语法：

   class Father{//父类
   }	
   class Son extends Father{//子类继承父类
   }
   

   class Father{//定义一个父类
   	money(){
   		console.log(100)
   	}
   }
   class Son extends Father{//子类继承父类
   }
   var son = new Son();
   son.money();//100
   

9. super: 用于访问和调用父类的构造函数或普通函数
   *因为this指向当前实例，不使用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) {
   		this.x = x;
   		this.y = y;
   	}
   }
   var son = new Son(1,2);
   son.sum(); //报错
   

   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 son = new Son(1,2);
   son.sum(); //3
   

10. 子类调用父类的普通函数： 如果子类和父类有同一个方法，子类调用时，根据就近原则，会执行子类的方法

    class Father { //定义一个父类
    	say(){
    		console.log('我是爸爸')
    	}
    }
    class Son extends Father { //子类继承父类
    	say(){
    		console.log('我是儿子')
    	}
    }
    var son = new Son(1,2);
    son.say(); //我是儿子
    

    class Father { //定义一个父类
    	say(){
    			return '我是爸爸';
    		}
    	}
    	class Son extends Father { //子类继承父类
    		say(){
    			console.log(super.say()+'的儿子')
    		}
    	}
    	var son = new Son(1,2);
    	son.say(); //我是爸爸的儿子
    

11. super必须在子类this之前调用 （必须先调用父类的构造方法，再调用子类的构造方法）

    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);
    		this.x = x;
    		this.y = y;
    	}
    	sub(){
    		console.log(this.x - this.y)
    	}
    }
    var son = new Son(1, 2);
    son.sum(); //3
    son.sub(); //-1
    

*在es6中，类没有变量提升，必须先定义类，再实例化对象
*类里面的共有属性和方法一定要加this使用
*this的指向

<button>点击</button>
<script type="text/javascript">
	var that = this;
	class Father {
		constructor(x, y) {
			//constructor中的this指向创建的实例对象
			that = this;
			this.x = x;
			this.y = y;
			this.btn = document.querySelector('button');
			this.btn.onclick = this.sum;
		}
		sum() {
			//方法中的this指向方法的调用者
			console.log(that.x + that.y)
		}
	}
	class Son extends Father { //子类继承父类
		constructor(x, y) {
			super(x, y);
			this.x = x;
			this.y = y;
		}
		sub(){
			console.log(this.x - this.y)
		}
	}
	var son = new Son(1, 2);
	var father = new Father(1, 2);