首页 > 代码库 > JavaScript es6 class类的理解。

JavaScript es6 class类的理解。

在本篇文章我将会把我对JavaScript  es6新特性class类的理解。本着互联网的分享精神,我就将我自己的理解分享给大家。

使用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);

将es的构造函数转换为类

以上方法确实没有什么问题,但是相对于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(‘zeng liang‘); console.log(manager.info); console.log(manager.changePassword(456))

立即执行类的写法

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

 

JavaScript es6 class类的理解。