es6添加删除class_ES6中的class的使用

js的传统生成一个类的方法，需要定义一个构造函数，然后通过new的方式生成。

functionCat() {this.name = 'kitty';this.color = 'yellow';

}var cat = new Cat();

js中只有对象，没有类。这样的写法和传统面向对象语言差异很大，很容易让新手感到困惑。

一、定义类

ES6添加了类，作为对象的模板。通过class来定义一个类：

//定义类

class Cat {

constructor() {this.name = 'kitty';this.color = 'yellow';

}//不需要加分号隔开，否则会报错,而且不用加上function关键字

getNames() {

console.log('name:' + this.name);

}

}//使用new操作符得到一个实力对象

let cat = new Cat()

其实ES6的类，完全可以看作构造函数的另一种写法。

class Cat {//...

}typeof Cat //"function"

Cat === Cat.prototype.constructor //true//类的数据类型就是函数，类本身就只想构造函数

而且构造函数的prototype属性，在ES6的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面：

class Cat {

constructor () {//...

}

like () {//...

}

eat(){//...

}

}//等同于

Cat.prototype ={

constructor () {},

like () {},

eat () {}

}

let miao= newCat()

miao.constructor=== Cat.prototype.constructor //true

二、严格模式

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。

考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

三、constructor 方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

四、类的实例对象

用new命令生成类的实例对象

class Cat {//...

}var cat = Cat ( 'kitty' , 'blue');//报错

var cat = new Cat ( 'kitty' , 'blue'); //正确

实例的属性定义在原型上

//定义类

class Cat {

constructor() {this.name = 'kitty';this.color = 'yellow';

}

getNames() {

console.log('name:' + this.name);

}

}//使用new操作符得到一个实例对象

let cat = newCat()

cat.getNames()//name:kitty

cat.hasOwnProperty('name')//true

cat.hasOwnProperty('getNames')//false

cat.__proto__.hasOwnProperty('getNames')//true

和ES5一样，类的所有实例共享一个原型对象

let cat1 = newCat();

let cat2= newCat();

cat1.__proto__=== cat2.__proto__

五、Class 表达式

let dogClass =class Dog {

getClassName() {returnDog.name;

}

}

let dog= newdogClass();

dog.getClassName()//Dog

不存在变量提升

定义类不存在变量提升，只能先定义类后使用，跟函数声明是有区别的。

//-----函数声明-------//定义前可以先使用，因为函数声明提升的缘故，调用合法。

func();functionfunc(){}//-----定义类---------------

new Cat(); //报错，Cat is not defined

class Cat{}

六、this的指向

类的方法内部如果如果含有this,它默认指向类的实例。但是，必须非常小心，如果单独使用，有可能会报错。

class Cat {

eatFish ( kind= 'fish'){this.print (`Hello ${fish}`);

}

print(str){

console.log(str)

}

}

let cat= newCat();

const { eatFish }=cat;

eatFish;//TypeError: Cannot read property 'print' of undefined

上面代码中，eatFish方法中的this, 默认指向Cat类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print() 方法而导致错误。

所以，可以在构造方法中绑定this，这样就不会找不到print方法了。

class Cat {

constructor () {this.eatFish = this.eatFish.bind(this);

}//...

}

或者使用箭头函数

class Cat {

constructor () {this.eatFish = (kind = 'fish') =>{this.print(`Hello ${name}`)

}

}

}

七、extends继承

使用extends 关键字实现类之间的继承。这比在ES5中使用继承要方便很多。

//定义类父类

class Parent {

constructor(name,age){this.name =name;this.age =age;

}

speakSometing(){

console.log("I can speek chinese");

}

}//定义子类，继承父类

class Child extends Parent {

coding(){

console.log("coding javascript");

}

}var c = newChild();//可以调用父类的方法

c.speakSometing(); //I can speek chinese

如果子类中有constructor构造函数，则必须使用调用super。

//定义父类

class Parent {

constructor(name,age){this.name =name;this.age =age;

}

speakSometing(){

console.log("I can speek chinese");

}

}//定义子类，继承父类

class Child extends Parent {

constructor(name,age){//不调super()，则会报错 this is not defined

//必须调用super

super(name,age);

}

coding(){

console.log("coding javascript");

}

}var c = new Child("job",30);//可以调用父类的方法

c.speakSometing(); //I can speek chinese

子类必须在constructor方法中调用super方法，否则新建实例时会报错(this is not defined)。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。