JavaScript es6 class类的理解。

本着互联网的分享精神，在本篇文章我将会把我对JavaScript  es6 class类的理解分享给大家。

JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖。 类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。

使用es写一个类（构造函数）

在es5中大家一般都这么写一个类（构造函数）

另外需要注意，class类不会被提升。

// 创建一个User构造函数
function User(name, age) {
    this.name = name;
    this.age = age;
}
// User构造函数的静态方法。
User.getClassName = function () {
    return 'User';
};
// User构造函数的动态方法
User.prototype.changeName = function (age) {
    this.age = age
};
Object.defineProperty(User.prototype, 'info', {
    get (){
       return 'name: ' + this.name + '|' + 'age: ' + this.age
    }
});
// 创建一个Manager 构造函数
function Manager(name, age, password) {
    User.call(this, name, age);  //将User函数call到Manager函数内
    this.password = password
}
// 继承User的静态方法
Manager.__proto__ = User;
// 调用继承User的getClassName 方法。
console.log(Manager.getClassName());
// 继承User动态方法
Manager.prototype = User.prototype;
// 创建一个新的动态方法 changePassword
Manager.prototype.changePassword = function (pwd) {
    this.password = pwd
};
//实例化Manager 构造函数。
var manager = new Manager('zhang', 22, '123');
manager.changeName('23');
console.log(manager.info);

将es5的构造函数转换为es6的类

以上方法确实没有什么问题，但是相对于es6的class来讲没有那么优雅，下面我就用es6的语法让代码优雅一点。

其实本质上都是一样的，只不过是一个语法糖。

/**
 * Created by 张佳伟 on 2017/5/2.
 */
'use strict';
// function  User(name, age) {
//     this.name = name;
//     this.age = age;
// }
class User {
    // 构造函数 现在叫类 本质是一样的，其实就是一个语法糖。
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // User.getClassName = function () {
    //     return 'User';
    // };
    // 静态方法
    static getClassName() {
        return 'User';
    }

//     User.prototype.changeName = function (name) {
//     this.name = name;
// };
//    动态方法，相当于es中的prototype
    changeName(name) {
        this.name = name;
    }

//     User.prototype.changeAge = function (age) {
//     this.age = age;
// };
    changeAge(age) {
        this.age = age;
    }

//     Object.defineProperty(User.prototype, 'info', {
//     get (){
//         return 'name: ' + this.name + '|' + 'age: ' + this.age
//     }
//     });
    get info() {
        return 'name:' + this.name + '|age:' + this.age;
    }
}
;
// function  Manager(name, age, password) {
//     User.call(this, name, age);
//     this.password = password;
// }
//继承静态方法
// Manager.__proto__ = User;
// //继承prototype原型方法
// Manager.prototype = User.prototype;
// 继承这里省事吧，一步就到位了
class Manager extends User {
    constructor(name, age, password) {
        super(name, age);      //这个我下面会将，这里先暂时理解为call，但是注意他和call可不一样。
        this.password = password;
    }

    changePassword(password) {
        return this.password = password;
    }

    get info() {
        var info = super.info; //这个是父类的info，当然你也可以重写info这个方法。那就是删掉这句代码，在写上新的就行拉~
        return info
    }
}
// console.log(typeof User, typeof Manager);
var manager = new Manager('leo', 22, '123');
// manager.changeName('铅笔');

console.log(manager.info);
console.log(manager.changePassword(456))

立即执行类的写法

'use strict';
// 立即执行的类
let User = new class User {
    constructor(name){
        this.name = name;
    }
}('铅笔')
console.log(User)

super  

super 关键字用于调用一个对象的父对象上的函数。

super的语法

super([arguments]); // 调用 父对象/父类 的构造函数
super.functionOnParent([arguments]); // 调用 父对象/父类 上的方法

在构造函数中使用时，super关键字单独出现，必须在可以使用this关键字之前使用。此关键字也可用于调用父对象上的函数。

class Polygon {
    constructor(height, width) {
        this.name = 'Polygon';
        this.height = height;
        this.width = width;
    }
    sayName() {
        console.log('Hi, I am a ', this.name + '.');
    }
}

class Square extends Polygon {
    constructor(length) {
        this.height;
        // ReferenceError，super 需要先被调用！

        /*
         这里，它调用父类的构造函数的 length, 
         作为Polygon 的 width和 height.
         */
        super(length, length);

        /*
         注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
         忽略这, 这将导致引用错误。
         */
        this.name = 'Square';
    }

    get area() {
        return this.height * this.width;
    }

    set area(value) {
        this.area = value;
    }
}

调用父类上的静态方法

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'