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

JavaScript es6 class类的理解。

2024-09-27 18:11:38   217人阅读

在本篇文章我将会把我对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类的理解。


联系
我们