Class 类的支持

一.什么是类？

Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。

但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有Class。不过，ES6引入了Class这个概念，作为对象的模板。通过class关键字，你就可以为所欲为定义类。

二.Es6之前是如何使用类的

1、构造函数方式

　　用构造函数模拟"类"，在其内部用this关键字指代实例对象。

基本语法：

function 类名(){
     this.属性名;//公共属性
     var 属性名;//私有属性
    /*凡是定义类的公共属性和公共方法都要使用this*/
    //定义类的公共函数
    this.函数名=function(){
            ..... 
    }
    //定义类的私有函数
    function 函数名(){
　　　　......
    }
}

1.1.构造函数生成实例的执行过程：

1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;

2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。

3.执行构造函数的代码。

4.返回新对象（后台直接返回）;

1.2.构造函数的优点是：

我们可以根据参数来构造不同的对象实例 ，

缺点是每次构造实例对象时都会生成bark方法，造成了内存的浪费。

2.原型方式

function Animal(){}
Animal.prototype.name = '大毛'
Animal.prototype.color = "黄色"
Animal.prototype.bark = function(){
	document.write("it's name3 is "+this.name+" 颜色："+this.color);
}
function Cat(){}
Cat.prototype = new Animal(); 
var cat1 = new Cat()
document.write(cat1.name);
cat1.bark();

//var cat2 = new Cat()
//document.write(cat1.bark == cat2.bark)

原型方式的缺点就是不能通过参数来构造对象实例 (一般每个对象的属性是不相同的) ，

优点是所有对象实例都共享bark方法（相对于构造函数方式），没有造成内存浪费 。
 

3.构造函数+原型方式

//现在有一个"动物"对象的构造函数。
function Animal(name){
	this.name = name
}
Animal.prototype.bark = function(){
	document.write("hello, name is " + this.name);
}
var animal = new Animal('三毛')
document.write(animal.name);
animal.bark();

优点：用构造函数来定义类属性（字段）。用原型方式来定义类的方法。我们就既可以构造不同属性的对象，

也可以让对象实例共享方法，不会造成内存的浪费

三.ES6引入了Class（类）这个概念

3.1通过class关键字可以定义类

//类的定义
class Animal {
//ES6中新型构造器,用来接收参数
constructor(name) {
	this.name = name;
}
//实例方法
sayName() {
	document.write('My name is '+this.name);
   }
}
let animal = new Animal('dummy')
animal.sayName();
console.log(typeof Animal)
console.log(Animal === Animal.prototype.constructor)

注：

1.在类中声明方法的时候，千万不要给该方法加上function关键字

2.方法之间不要用逗号分隔，否则会报错

3.2类的所有实例共享一个原型对象

//类的定义
class Animal {
//ES6中新型构造器,用来接收参数
constructor(name) {
	this.name = name;
}
    //实例方法
sayName() {
	document.write('My name is '+this.name);
}
}
var animal1 = new Animal('dummy')
var animal2 = new Animal('John')
document.write(animal1.__proto__ === animal2.__proto__)

注：它们的原型都是Person.prototype，所以proto属性是相等的

3.3class不存在变量提升

//ES5可以先使用再定义,存在变量提升
new A();
function A() {
}
//ES6不能先使用再定义,不存在变量提升 会报错
new B(); //B is not defined
class B {
}

3.4类的继承

//类的定义
class Animal {
//ES6中新型构造器
constructor(name) {
	this.name = name;
}
//实例方法
xxx() {......}
}
//类的继承
class Programmer extends Animal {
constructor(name) {
	//直接调用父类构造器进行初始化
	super(name);
}
xxx() {......}
}

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。

OK，收工！如果可以实现记得点赞分享，谢谢老铁～