16_class

class

知识点

// 1. 使用 class 声明类
// 2. constructor 定义构造函数初始化
// 3. extends 继承父类
// 4. super 调用父级构造方法
// 5. static 定义静态方法和属性
// 6. 父类方法可以重写

1. ES5 方法构造函数

function Phone(brand, price) {
    this.brand = brand
    this.price = price
}
Phone.prototype.call = function() {
    console.log('我被用来打电话')
}

2. ES6 方法构造函数

class Phone {
    static nation = '中国'
    // 构造方法,名字不可修改
    constructor(brand, price) {
        this.brand = brand
        this.price = price
    }
    // 方法必须使用该语法,不能使用 ES5的对象完整形式(带冒号那种)
    call() {
        console.log('我可以联系远方的她——' + Phone.nation)
    }
}

3. ES6构造函数继承

class Phone {
    static name = '华为'
    constructor(type, size) {
        this.type = type
        this.size = size
    }
    call() {
        console.log('我能打电话')
    }
}
// 继承
class superPhone extends Phone {
    constructor(type, size, color, price) {
        super(type, size)
        this.color = color
        this.price = price
    }
    
    phone() {
        console.log('我可以拍照')
    }
    playGame() {
        console.log('我可以打游戏')
    }
    // 重写父类方法
    call() {
        console.log('我可以视频通话')
    }
}
let s1 = new superPhone('iPhone', '12', '蓝', '8999')

4. get 和 set

class Phone {
    get price() {
        console.log('获取了价格')
        return '价格'
    }
    // 注意 set 方法必须有一个参数
    set price(newVal) {
        console.log('修改了价格')
    }
}
let s = new Phone()
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 解决的问题 更加清晰的书写继承,面向对象编程 基本语法 constructor 构造方法,this关键字代表构造对...
    光哥很霸气阅读 802评论 0 2
  • (一) set 数据结构 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。...
    woow_wu7阅读 1,094评论 1 1
  • 简介 JavaScript语言中,生成实例对象的传统方法是通过构造函数。 ES6引入了Class(类)这个概念,作...
    oWSQo阅读 385评论 0 0
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,583评论 16 22
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,619评论 0 11