美文网首页
ES6 Class"类"

ES6 Class"类"

作者: GoFzy | 来源:发表于2019-04-01 11:31 被阅读0次

一、传统方法与ES6"类"

  JavaScript语言的传统方法是通过构造函数定义并生成新对象,如:

function User(name,pass){
    this.name = name;
    this.pass = pass;
}
User.prototype.showName = function(){
    console.log(this.name);
}
var u1 = new User('jack','123');
u1.showName();
执行结果

  上述写法与传统的面向对象语言(比如C++)的写法就有很大的差异,而ES6中就引入了Class(类)的概念作为对象的模板,通过class关键字可以定义类。不过需要注意的是新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。
  上述代码通过ES6的"类"改写后,就是这样:

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    showName(){
        console.log(this.name);
    }
}
var u1 = new User('jack','123456');
u1.showName();
执行结果
  上面的代码定义了一个"类",可以看到里面有一个constructor方法,这就是构造函数,而this关键字则代表实例对象。也就是说,ES5的构造函数User对象ES6的User类的构造方法。除了构造方法以外,User类还定义了一个showName的方法,注意:定义"类"的方法时,前面不需要加上function这个保留字,同时方法之间不需要逗号隔开。

二、Class的继承

  Class可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承更加清晰和方便:

class User{
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    showName(){
        console.log(this.name);
    }
}
class VipUser extends User {
    constructor(name,pass,level){
        super(name,pass);
        this.level = level;
    }
    showLevel(){
        console.log(this.level);
    }
}
var v1 = new VipUser('jack','123456','3');
v1.showName();
v1.showLevel();
执行结果
  上述代码中,super作为函数调用时代表父类的构造函数。ES6要求,子类的构造函数必须执行一次super函数。在执行过程中,super虽然代表了父类User的构造函数,但是返回的是子类VipUser的实例,即super内部的this指向的是VipUser,因此super()在这里相当于User.prototype.constructor.call(this)。需要说明的是:作为函数时,super()只能在子类的构造函数当中,否则会报错。
  除此以外super还可以作为对象在普通方法中指向父类的原型对象;在静态方法中指向父类:
class A {
    p(){
        return 2;
    }
}
class B extends A {
    constructor(){
        super();
    }
    show(){
        console.log(super.p());
    }
}
var b = new B();
b.show();

  上面代码中,子类B中的super.p()就是当作一个对象来使用。这时super在普通方法之中指向A.prototype,所以super.p()就相当于A.prototype.p()
  注意:由于super作为对象使用时是指向父类的原型对象,所以定义在父类实例上的方法或属性是无法通过super调用的。比如我们在A类的构造函数中添加一个属性attr:

class A {
    constructor(){
        this.attr = 'attr';
    }
    p(){
        return 2;
    }
}
A.prototype.x = 'x';
class B extends A {
    constructor(){
        super();
    }
    show(){
        console.log(super.attr);
        console.log(super.x);
        console.log(super.p());
    }
}
var b = new B();
b.show();
执行结果

相关文章

  • ES6 class与继承

    class是什么 class是定义类的方法。ES6之前用构造函数的方式定义类,ES6引入了class。 class...

  • 深入理解JS面向对象 - JavaScript实现继承的五种方式

    一、类与实例 1. 类的声明 传统function类的声明 ES6中的class声明 1.1 ES6 class与...

  • 2JavaScript设计模式--class/extends

    ES6语法 类 class ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • react组件

    es6 的class类的继承 运用es6 class继承 通过继承React.Component类来定义一个组件

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 深入理解ES6中class的this指向

    在ES6中,引入了类似其他语言的类的写法:即class(类),作为类对象模板。ES6 的class可以看作一个语法...

  • ES6 class类

    在ES6以前,没有类的概念,所有的面向对象都是基于原型实现的。ES6中可以通过class定义类,但是class的本...

  • ES6 class类

    ES6 class类知识点梳理 大概从几个方面来讲解ES6 class类和传统的构造函数的区别。 必须要有cons...

  • class to es5

    1.Class 众所周知js是没有class的,但是es6却给了我们“类”的概念;我们先写一个es6的类: 查看其...

网友评论

      本文标题:ES6 Class"类"

      本文链接:https://www.haomeiwen.com/subject/hdpmbqtx.html