ES6——面向对象-基础

ES6面向对象：

    1、出现了class关键字、构造器和类分开了

    2、class里面直接加方法

    3、继承 —— extends

 

1、之前的面向对象

// 方法1：
    // User 是类 也是 构造函数
    function User(name, pass){
        this.name = name;
        this.pass = pass;
    }
    User.prototype.showName = function(){
        alert(this.name);
    };
    User.prototype.showPass = function(){
        alert(this.pass);
    };
    var user = new User('zzz','123');
    user.showName(); // zzz
    user.showPass(); // 123

2、ES6中的面向对象

// 方法2：（ES6）方法再也不用外挂了  
    class User{
        constructor(name, pass){
            this.name = name;
            this.pass = pass;
        }
        showName(){
            alert(this.name);
        };
        showPass(){
            alert(this.pass);
        }
    }
    var user = new User('zzz','123');
    user.showName(); // zzz
    user.showPass(); // 123

3、之前的面向对象中的继承

继承:
    方法1：
    之前：（call()）
    function User(name, pass){
        this.name = name;
        this.pass = pass;
    }
    User.prototype.showName = function(){
        alert(this.name);
    };
    User.prototype.showPass = function(){
        alert(this.pass);
    };

    function vipUser(name, pass, level){
        User.call(this, name, pass);//使用 call 方法调用父构造函数
        this.level = level;
    }
    vipUser.prototype = new User();
    vipUser.prototype.constructor = vipUser;//??????????????????
    vipUser.prototype.showLevel = function(){
        alert(this.level);
    };
    var v = new vipUser('blue','123',3);
    v.showName(); // blue
    v.showPass();// 123
    v.showLevel();// 3

注意：

    call()方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

4、ES6面向对象中的继承

继承
    方法2：
    class VIPUser extends User{
        constructor(name, pass, level){
            super(name, pass);
            this.level = level;
        }
        showLevel(){
            alert(this.level);
        }
    }
    var v1 = new VIPUser('blue', '2341', 3);
    v1.showName();  // blue
    v1.showPass();  // 2341
    v1.showLevel(); // 3