ES6之class

19组清风

发布于 2021-11-15 15:01:59

3190

发布于 2021-11-15 15:01:59

文章被收录于专栏：Web Front End

1. set and get关键字。 1. 只读属性。 2. 私有属性访问限制。 2. 静态方法:static关键字。 > Tip:class关键字目前仅支持static声明静态方法，静态属性仍需要类.xx实现。 3. 继承:extends关键字。 > 其实extends关键字相当于ES5原型继承和构造继承的结合体。内部实现原理： 1. 子类constructor中call调用父类-构造继承。 2. 子类.prototype = new 父类-原型继承。 3. 继承父类实例方法-可以通过子类.xx调用父类构造方法。 4. super():ES6的继承extends必须要在父类的constructor中显示的调用super(params),params是传递给父类构造函数的参数。 5. 静态方法和属性牢记是不可被继承的。复制代码

对于面向对象编程而言，更关注类的声明、属性、方法、静态方法、继承、多态、私有属性。

// ES5声明类

let Animal = function (type) {
    this.type = type
    this.walk = function () {
        console.log(`I am walking`)
    }
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')

let Animal = function (type) {
    this.type = type
}

Animal.prototype.walk = function () {
    console.log(`I am walking`)
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')

// ES6中的类 class其实就是ES5的语法糖
class Animal {
    constructor(type) {
        this.type = type
    }
    // walk是挂载在原型上的方法
    walk() {
        console.log(`I am walking`)
    }
}
let dog = new Animal('dog')
let monkey = new Animal('monkey')

// set and get
class Animal {
    constructor(type, age) {
        this.type = type
        this._age = age
    }
    get age() {
        return this._age
    }
    set age(val) {
        this._age = val
    }
}

// 仅get 只读属性
class Animal {
    constructor(type, age) {
        this.type = type
        this._age = age
    }
    get age() {
        return this._age
    }
}
// innerHTML简单封装
class CustomHTMLElement {
    constructor(element) {
        this.element = element
    }
    get html() {
        return this.element.innerHTML
    }
    set html(value) {
        this.element.innerHTML = value
    }
}
// 利用get和set简单封装私有属性访问限制
let age = 1
class Animal {
    constructor(type) {
        this.type = type
    }
    get age() {
        return age
    }
    set age(val) {
        if (val > 0 && val < 10) {
            age = val
        }
    }
}

// 静态方法 
// ES5中挂载在方法（类上） ES6通过static声明
let Animal = function (type) {
    this.type = type
    this.walk = function () {
        console.log(`I am walking`)
    }
}
// 通过类.xx 调用静态方法
Animal.eat = function (food) {
    console.log(`I am eating`)
}
class Animal {
    constructor(type) {
        this.type = type
    }
    walk() {
        console.log(`I am walking`)
    }
    // static标记实例属性 
    static eat() {
        console.log(`I am eating`)
    }
}

// 继承
// ES5中的原型继承和构造继承 以及组合继承
// 定义父类
let Animal = function (type) {
    this.type = type
}
// 定义方法
Animal.prototype.walk = function () {
    console.log(`I am walking`)
}
// 定义静态方法
Animal.eat = function (food) {
    console.log(`I am eating`)
}
// 定义子类
let Dog = function () {
    // 初始化父类 构造继承
    Animal.call(this, 'dog')
    this.run = function () {
        console.log('I can run')
    }
}
// 原型继承
Dog.prototype = Animal.prototype
// ES6的extends关键字实现了原型和构造继承的结合体。
复制代码

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020年09月08日，如有侵权请联系 cloudcommunity@tencent.com 删除

面向对象编程