es6新特性之 class 基本用法解析

javaScript 语言中，生成实例对象的传统方法是通过构造函数,与传统的面向对象语言（比如 C++ 和 Java）差异很大，ES6 提供了更接近传统语言的写法，引入了 class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

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不可以

 1. 一般写法（es5 与es6）

//一.ES5写法：function Animate(name){  this.name = name;}Animate.prototype.getname = function(){  console.log(this.name)}var p =new Animate("lity");p.getname();//二.ES6,面向对象的写法,calss,class Person{  //constructor()：构造方法是默认方法，new的时候回自动调用，如果没有显式定义，会自动添加  //1.适合做初始化数据  //2.constructor可以指定返回的对象  constructor(name,age){  　　 this.name = name;  　　 this.age = age;　　}  getval(){    console.log(`你是${this.name},${this.age}岁`);  }}      var c1 = new Person("lity",20); c1.getval();   

 ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到

注意 ：class 类的本质还是一个函数,类本身就指向构造函数。

typeof Person  //functionPerson === Person.prototype.constructor // true

我们使用Object的一些属性或者方法检测一下 用es6 写的实例对象

//1.查看实例对象c1的__proto__是否指向Person的原型(Person.prototype) console.log(c1.__proto__==Person.prototype)//true console.log(c1.__proto__)//原型对象的所有方法 //2.isPrototypeOf:检测实例对象是否是某个函数的原型  console.log(Person.prototype.isPrototypeOf(c1));//true//3.constructor:查看某个对象的构造函数   console.log(c1.constructor); //4.hasOwnProperty:检测某个属性是否是自己的属性；不是原型对象上的属性和方法   console.log(c1.hasOwnProperty("name"))//true; //5.in：通过in可以检测属性是否在自己中(this)或者是原型中存在    console.log("getval" in c1)//原型上存在，true    console.log("name" in c1)//constructor(自己上存在)，true //6.自定义检测属性是否是存在    function hasproperty(attr,obj){       return obj.hasOwnProperty(attr)&&(attr in obj);    }    console.log(hasproperty("name",c1));//true;