ES6 - 面向对象+继承用法

ES6中新增加了class，extends关键字，这些可以及其方便且规范的实现面向对象和继承。这种新的实现方法和 java非常相似，学过java的小伙伴看起来应该很容易就能接受。好了，下面我们直接看例子

1.class

首先，我们先来看看之前我们是如何创建一个"类"

• 以前写法

function User(id,name){
			this.id=id;
			this.name=name;
		}
		// 添加公共方法
		User.prototype.showId=function(){
			console.log('id='+this.id);
		}
		User.prototype.showName=function(){
			console.log('name='+this.name);
		}
		//实例一个对象
		let user1 = new User('123456','东大瓜');
		user1.showId();   //id=123456
		user1.showName(); //name=东大瓜

这里我们创建了一个User构造函数，并给它添加了展示id和name的方法。
我们能看到，这样的结构比较散乱，属性和方法在结构上并没有写在一块，看起来还是有那么丢丢不舒服（ 如果这里看着还行，那实现继承的时候那就真的挺散乱的，下面会列举 ）

• 新写法

	class User{
			// 构造函数
			constructor(id,name){
				this.id=id;
				this.name=name;
			}
			showId(){
				console.log('id='+this.id);
			}
			showName(){
				console.log('name='+this.name);
			}
		}

		let user1 = new User('123456','东大瓜');
		user1.showId();   //id=123456
		user1.showName(); //name=东大瓜

你看，简洁吧，用class关键字直接定义一个类，属性和方法都在class的大括号里。
这里的 constructor（）{…} 代表一个构造函数，初始化属性。
然后此类的方法直接添加在下面即可，functionName () {…} ,之间不需要符号隔开，这是它的固定写法。

2.extends

同样，我们先来看下之前实现继承

• 以前写法（组合继承）

		//父类
		function User(id,name){
			this.id=id;
			this.name=name;
		}
		User.prototype.showId=function(){
			console.log('id='+this.id);
		}
		User.prototype.showName=function(){
			console.log('name='+this.name);
		}

		// 子类
		function VIPuser(id,name,level){
			// 执行超类的初始化
			User.call(this,id,name);
			this.level=level;
		}
		//父类的实例赋值给子类的原型
		VIPuser.prototype=new User();
		//跟新指针
		VIPuser.prototype.constructor=VIPuser;
		
		//再来创建自己的方法
		VIPuser.prototype.showLv=function(){
			console.log('Lv='+this.level);
		}

		let vip1=new VIPuser('123456','东大瓜vip',99);
		vip1.showId();    //id=123456
		vip1.showName();  //name=东大瓜vip
		vip1.showLv();    //Lv=99

这里我们新建一个VIPuser类并继承于User类，新增了一个“vip等级level”属性，和一个自己的方法。
首先我们来看看子类的继承这块：

// 执行超类的初始化
User.call(this,id,name);

1. 先让父类的构造函数执行一次，并把当前指向转为子类的实例，
2. 再把父类的实例赋值给子类的原型，
3. 然后跟新下子类constructor的指向，
4. 最后才来添加自己的方法。

这就真的是挺繁琐，然后再来看看ES6的写法

• 新写法

	  //父类
	  class User{
			// 构造函数
			constructor(id,name){
				this.id=id;
				this.name=name;
			}
			showId(){
				console.log('id='+this.id);
			}
			showName(){
				console.log('name='+this.name);
			}
		}

		//子类
		class VIPuser extends User{
			constructor(id,name,level){
				super(id,name);
				this.level=level;
			}
			showLv(){
				console.log('Lv='+this.level);
			}
		}

		let vip1=new VIPuser('123456','东大瓜vip',99);
		vip1.showId();    //id=123456
		vip1.showName();  //name=东大瓜vip
		vip1.showLv();    //Lv=99

关键在于这块

	class VIPuser extends User{
			constructor(id,name,level){
				super(id,name);
				//自己的新属性
				this.level=level;
			}
			showLv(){
				console.log('Lv='+this.level);
			}
		}

简洁明了！
新建一个类然后想要继承于谁直接 extends 父类 然后大括号，
大括号里面还是先 constructor（）{…} 构造函数，不过这里注意一点，进去构造函数首先 super(id,name);
super代表超类，这里和java的写法一样的。先把父类的属性继承下来（ 和以前的写法 User.call(this,id,name); 功能一样 ），把父类的属性拿下来后就可以添加自己的新方法了

新增的class，extends真的十分强大好用，代码看起来也舒服多了