ES6中新增的class

参考一：了解JS中的类
参考二：Babel如何编译class上
参考三：Babel如何编译class下

总结:
1.class与其他面向对象编程语言中的类是不同的，它只是单纯的一个声明构造函数的语法糖，简化了原型和继承的实现，使得语法更加优雅，代码结构层次更加清晰，健壮

// es6实现类
class Person{
	constructor(id,cb){ // 定义实例上的属性和方法
		this.id = id 
		this.cd = cb
		
		// 隐含操作
		// this.__proto__ = Person.prototype
		// this.__proto__.constructor = Person
		// return this
	}
	fn(){} // 定义原型上的方法，即Person.prototype.fn = fn
	fn2=function(){} // 定义实例上的方法
	age=1 // 定义实例属性
}
// es5实现类
function Person(id,cb){
	this.id = id
	this.cb = cb
	this.age = 1
	this.fn2 = function(){}
}
Person.prototype.fn = function(){}

// es6实现继承
class Man extends Person{
	constructor(id,cb,sex){
		super(id,cb) // 继承
		this.sex = sex 
		
		// 隐含操作
		// this.__proto__ = new Person()
		// this.__proto__.constructor = Man
		// return this
	}
}
// es5实现继承
function Man(id,cb,sex){
	Person.call(this,id,cb)
	this.sex = sex
}
Man.prototype =new Person()

2.class只能通过new调用，不能当作普通函数调用，且实例原型上的属性方法不可遍历

3.使用static可定义类上的静态属性和方法，实例不可访问

// es6
class Person{
	static id = 1
	static sayHello(){ alert('hello')}
}
Person.sayHello()

// es5
function Person(){}
Person.sayHello = function(){ alert('hello')}
Person.id = 1

4.使用get/set定义原型上属性存取操作函数

// es6
class Person{
	get name(){
		return 'jack'
	}
	set name(newVal,oldVal){
		this.name = newVal
		console.log(`new:${newVal},old:${oldVal}`)
	}
}

// es5
function Person(){}
Person.prototype={
	get name(){
		return 'jack'
	}
	set name(newVal,oldVal){
		this.name = newVal
		console.log(`new:${newVal},old:${oldVal}`)
	}
}

5.class到function的Babel编译

// es6 
class Person{
	constructor(name){ // instance.name
		this.name = name
	}
	sayName(){ return this.name} // prototype.sayName
	id=1008 // instance.id
	static sayHello(){ return 'hello' } // constructor.sayHello
	get name(){ return 'jack' } // prototype.name(getter/settter)
	set name(newVal,oldVal){
		this.name = newVal
		console.log(`new:${newVal},old:${oldVal}`)
	}
}

// es6 to es5 by Babel
var Person = (function(){
	function Person(name){
		_classCallCheck(this,Person)
		this.name = name
	}
	_createClass(
		Person,
		[	// prototype
			{ key:'sayName', value:function sayName(){...} },
			{ key:'id', value: 1008},
			{ key:'name', get:function(){...}, set: function(){...}}
		],
		[	// constructor
			{ key:'sayHello', value: function sayHello(){...} }
		]
	);
	return Person
})(); 

function _classCallCheck(instance,constructor){
	if(!instance instanceof constructor) throw new Error(`Cannot call a class as a function`)
}
var _createClass = (function(){
	function def(target,props){
		for(var i = 0;i<props.length;i++){
			var desc = props[i]
			desc.enumerable = !!desc.enumerable // 默认不可遍历
			desc.configurable = true
			if('value' in desc) desc.writable = true
			Object.defineProperty(target,desc.key,desc)
		}
	}
	return function(Constructor,protoProps,staticProps){
		if(protoProps) def(Constructor.prototype,protoProps)
		if(staticProps) def(Constructor,staticProps)
		return Constructor
	}	
})()