万象更新 Html5 - es6 类: class

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - es6 类: class

示例如下:

es6\src\class\main.js

/**
 * 本例用于演示类与继承
 * es6 暂时无接口,静态属性
 */

// 先看看之前 es5 中如何定义类和属性
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.hello = function () {
    return `hello: ${this.name} ${this.age}`;
}
let obj = new Person("webabcd", 40);
console.log(`${obj.hello()} ${obj.name} ${obj.age}`);
// 可以通过 delete 删除对象的属性
delete obj.age; // 删除属性
console.log(obj.age); // undefined


// 演示 es6 中的类的基本应用
// 导入 ./a 中的 Person 类,并命名为 Person_A
import Person_A from './a';
// 通过 es5 为指定的类添加指定的方法
Person_A.prototype.hello2 = function() {
    return "hello2: " + this.name;
}
// 通过 es6 为指定的类添加指定的方法
Object.assign(Person_A.prototype,{
    hello3:function() {
        return "hello3: " + this.name;
    },
    hello4:function() {
        return "hello4: " + this.name;
    }
})
// 通过 es5 为指定的类添加指定的属性
Person_A.prototype.prop1 = "abc";
// 实例化并使用 Person_A 对象
let obj_a = new Person_A("webabcd", 40);
obj_a.nickname = "wanglei";
console.log(`${obj_a.hello()} ${obj_a.name} ${obj_a.age} ${obj_a.hello2()} ${obj_a.hello3()} ${obj_a.hello4()} ${obj_a.nickname} ${obj_a.prop1}`);


// 演示 es6 中的类与继承
// 导入 ./b 中的 Person 类,并命名为 Person_B
import Person_B from './b';
let obj_b = new Person_B("webabcd", 40);
console.log(obj_b.hello());


// 演示 es6 中的静态方法
// 导入 ./c 中的 Person 类,并命名为 Person_C
import Person_C from './c';
// es6 中暂无静态属性,但是可以通过 es5 为指定的类添加指定的静态属性
Person_C.prop1 = "abc";
Person_C.prop2 = 100;
// 调用类的静态方法和静态属性(注:类有一个默认的静态属性“name”,它返回的是类名称)
console.log(`${Person_C.prop1} ${Person_C.prop2} ${Person_C.hello()} ${Person_C.name}`);
// 输出结果 abc 100 hello: sub hello: super Person$2


// 演示 es5 中的 prototype 的使用
export * from './prototype';

es6\src\class\a.js

// 类
class Person {
    // 构造函数
    constructor(name, age) {
        // 定义类的属性 name, age
        this.name = name;
        this.age = age;
    }

    // 类方法
    hello() {
        return `hello: ${this.name} ${this.age}`;
    }

    // getter 和 setter
    // 约定 getter/setter 名字的前面加 “_” 为类的私有变量
    // getter 不可单独出现,setter 可以单独出现
    // getter 与 setter 必须同级出现(不能一个在基类,一个在子类)
    get nickname() {
        return this._nickname;
    }
    set nickname(val) {
        this._nickname = val;
    }
}

// 导出指定的类
export default Person;

es6\src\class\b.js

// 基类
class Life {
    constructor(name) {
        console.log("super class");
        this.name = name;
    }

    hello() {
        return "hello: " + this.name;
    }
}

// 子类
class Person extends Life {
    constructor(name, age) {
        // 调用基类构造函数
        super(name);

        console.log("sub class");
        this.age = age;
    }

    // 重写基类方法(如果需要调用基类方法,则调用 super.hello() 即可)
    hello() {
        return `hello: ${this.name} ${this.age} ${super.hello()}`;
    }
}

// 导出指定的类
export default Person;

es6\src\class\c.js

// 基类
class Life {
    // 静态方法
    static getName() {
        return "super";
    }
    // 静态方法(调用本类的其他静态方法用 this.getName() 即可)
    static hello() {
        return "hello: " + this.getName();
    }
}

// 子类
class Person extends Life {
    // 重写基类静态方法(调用基类的静态方法用 super.hello() 即可)
    static hello() {
        return `hello: sub ${super.hello()}`;
    }
}

// 导出指定的类
export default Person;

源码 https://github.com/webabcd/Html5
作者 webabcd

posted @ 2024-09-24 11:28  webabcd  阅读(3)  评论(0编辑  收藏  举报