es6中class类的使用

Posted Angel爽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6中class类的使用相关的知识,希望对你有一定的参考价值。

       在es5中我们是使用构造函数实例化出来一个对象,那么构造函数与普通的函数有什么区别呢?其实没有区别,无非就是函数名称用首字母大写来加以区分,这个不用对说对es5有了解的朋友都应该知道。

       但是es5的这种方式给人的感觉还是不够严谨,于是在es6中就换成了class,就是把es5中的function换成了class,有这个单词就代表是个构造函数,然后呢对象还是new出来的,这一点并没有变化。

   类的使用

从里面的代码我们可以看到除了function变成了class以外,其它的跟es5一样

class Coder{
    name(val){
        console.log(val);
    }
}
 
let shuang= new Coder;
shuang.name(‘shuang‘);

  类的传参

        在es6中的对象的属性都是写在constructor里面,方法都是在原型身上。在这里面的代码用constructor约定了两个参数,然后用add()方法把参数相加,这个地方跟以前不太一样,所以需要多注意一下。

class Coder{
    name(val){
        console.log(val);
        return val;
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }
 
    add(){
        return this.a+this.b;
    }
}
 
let shuang=new Coder(1,2);
console.log(shuang.add());

     class的继承

 class的继承就是用extends

class shuang extends Coder{
 
}
 
let shuang=new shuang;
shuang.name(‘Angel爽‘);

   声明一个shuang的新类,用extends继承了Coder,调用里面的name方法,发现也是可以输出的。

以上是关于es6中class类的使用的主要内容,如果未能解决你的问题,请参考以下文章

ES6 浅谈class继承机制

ES6中class的实现原理

ES6新特性:使用新方法定义javascript的Class

重学ES6:ES5和ES6中Class类的相同与不同

JavaScript es6 class类的理解。

ES6系列_15之class类的使用