【JavaScript的ES6语法】4、ES6面向对象-基础

一、面向对象的基础

1、类的定义

在ES4和ES5中的面向对象，写法十分的臃肿，例如下面一个User对象：

function User(name,pass){
    this.name=name;
    this.pass=pass;
}
User.prototype.showName=function(){
    console.log(this.name);
};
User.prototype.showPass=function(){
    console.log(this.pass);
};
var user1=new User('jack','a1234');
user1.showName();
user1.showPass();

效果：

原来的面向对象都有什么缺点呢？首先，ES4和ES5中类和构造函数基本上是一个东西，根本无法区分类和构造函数。第二，类的定义是拆开了写的，例如上面的User的类定义和方法不是在一个代码体里面写的，这种写法很游离，没有类的完整性。

在ES6中，类的写法如下：

class User{
    constructor(name,pass){
        this.name=name;
        this.pass=pass;
    }
    showName(){
        console.log(this.name);
    }
    showPass(){
        console.log(this.pass);
    }
}
var user1=new User('jack','a1234');
user1.showName();
user1.showPass();

我们可以直接定义一个类，该类的所有属性和方法都在一个代码体中定义，并且可以使用constructor定义构造方法。效果：

总结：ES6的面向对象特点：
（1）新增了class关键字来定义类，构造器单独定义；
（2）可以在class中直接定义方法。

2、类的继承

与Java一样，我们可以在JS中继承一个已有类，拥有父类的所有属性和方法，并且可以在新的子类增加新的属性和方法。在老版中的继承写法如下：

function User(name,pass){
    this.name=name;
    this.pass=pass;
}
User.prototype.showName=function(){
    console.log(this.name);
};
User.prototype.showPass=function(){
    console.log(this.pass);
};

function VipUser(name,pass,level){
    User.call(this,name,pass);
    this.level=level;
}
VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function(){
    console.log(this.level);
};
var user2=new VipUser('jack','a1234','A级');
user2.showName();user2.showPass();
user2.showLevel();

效果：

可以看到，老版本中的继承有很多缺点，首先是老版本没有所谓的“继承”的说法，而是通过call复制和调用其他对象的构造，然后重新定义其他方法，还要矫正constructor，十分不规范和麻烦。在ES6中，我们可以简单的通过“extends”继承关键字，来继承其他对象：

class User{
    constructor(name,pass){
        this.name=name;
        this.pass=pass;
    }
    showName(){
        console.log(this.name);
    }
    showPass(){
        console.log(this.pass);
    }
}

class VipUser extends User{
    constructor(name,pass,level){
        super(name,pass);
        this.level=level;
    }
    showLevel(){
        console.log(this.level);
    }
}
var user2=new VipUser('jack','a1234','A级');
user2.showName();user2.showPass();
user2.showLevel();

这里的super是声明使用父类的构造函数。效果：

以上就是ES6面向对象的更新内容，下一篇我们来学习怎么来使用它的面向对象。

参考：深入解读ES6系列视频教程（kaikeba.com提供）
转载请注明出处：https://blog.csdn.net/acmman/article/details/114438270