es6中的class

6.7class

【1】问题:旧的js中,构造函数和原型对象是分开定义的,不符合“封装”的概念

【2】解决:今后只要在ES6中创建一种新的类型,包含构造函数+原型对象,都可以使用class创建

【3】定义:class是程序中专门集中保存一种类型的所有子对象的统一属性结构和方法定义的程序结构。

【4】如何定义class:3句话

​ i:用class{}包裹原构造函数+原型对象方法
​ ii:原构造函数名升级为整个class的名字,所有构造函数统一更名为"constructor"

​ iii:原型对象中的方法,不用再加prototype前缀,也不用=function,直接简写为: 方法名(){ … …}

直接放在class{}内的方法定义,其实还是保存在原型对象中的。

【5】如何使用class:和使用原来的构造函数完全一样

var 对象名=new class名(属性值,...);

【6】本质

​ i:构造函数中的属性,依然会成为子对象的自有属性

​ ii:直接定义在class中的方法,依然保存在子对象的原型对象中

​ iii:子对象依然使用_ proto _指向原型对象

【7】如果多个子对象共用的相同的属性值,应该放在哪里?

​ i:旧的js中,是和共有方法一起放在原型对象中的

​ ii:ES6中,虽然直接在class中定义的方法都默认保存在原型对象中,但是在class中直接定义的属性,却不会成为共有属性,而是成为每个子对象的自有属性,不会保存在原型对象中。

​ 想要定义共有的属性,是放在静态属性中保存的:static 属性名=属性值,且对于共有属性的访问只能使用 类型名.静态属性名进行访问

​ 静态属性原理:标有static的静态属性,都是保存在构造函数对象身上。因为构造函数在程序中不会重复!所以,静态属性,也不会重复!任何是否,任何地点,访问一个类型的静态属性,永远访问的都是同一份!

【8】示例

 // class创建类型
        class Student{
            constructor (name,age){
                this.name=name,
                this.age=age
            }
            // 想要创建一个子对象的共有属性,就放入静态属性中
            static className="初一1班";
            intr(){
                // 访问静态属性必须使用class名.className,而不能用this.
                console.log(`名字是${this.name},年龄是:${this.age},班级:${Student.className}`)
            }
        }
        var ll=new Student("lilei",18);
        console.log(ll);
        console.dir(Student);
        ll.intr();
        console.log(Student.className)

【9】两种类型间的继承:

​ i:问题: 两种class之间包含部分相同的属性结构和方法定义

​ ii:解决: 两种class类型间继承

​ iii:如何: 2大步:

​ 1).额外创建一个父级class,2件事:

​ ①父级class的构造函数中包含子类型class中相同部分的属性结构定义

​ ②父级class的原型对象中包含子类型class中相同部分的方法定义

​ ③既然父级class中保存了相同的属性结构和方法定义,则子类型class中,就可以删除所有重复的属性结构和方法定义

​ ④问题: 子类型class的子对象缺少必要的属性,而且有些共有方法也无法使用了!

​ 2).让子类型class继承父类型的class,2步:

​ ①设置子类型的原型对象继承父类型的原型对象: class 子类型 extends 父类型{ ... }

​ 原理: 只是设置子类型的原型对象继承父类型的原型对象,只能保证孙子对象可以使用爷爷类型原型对象中的共有方法!暂时无法为孙子对象补全缺少的自有属性.

​ ②使用super关键字,调用爷爷类型的构造函数。

​ 原理: super是专门指向爷爷类型构造函数的关键字。调用super()等于爷爷类型的构造函数。调用爷爷类型的构造函数,等效于执行爷爷类型的构造函数中共有的"this.xx=xxx"语句,即可为孙子对象弥补缺少的共有属性结构。

​ iv:结果:

​ 1). 孙子对象可使用3处保存的方法: 自己的,父级class的,爷爷class的

​ 2).孙子对象中拥有两处规定的属性:父类型构造函数+爷爷类型构造函数。

【10】示例:使用类型间继承,实现飞机大战游戏中敌机和降落伞类型的定义,并创建敌机对象和降落伞对象

        class Enmay{
            constructor(x,y){
                this.x=x,
                this.y=y
            }
            fly(){
                console.log(`飞到了${this.x},${this.y}`);
            }
        }
        class plane extends Enmay{
            constructor(x,y,score){
                super(x,y),
                this.score=score
            }
            getScore(){
                console.log(`击落一架飞机,得分${this.score}`)
            }
        }
        class san extends Enmay{
            constructor(x,y,award){
                super(x,y),
                this.award=award
            }
            getAward(){
                console.log(`击落一架降落伞,得到奖励${this.award}`)
            }
        }
        var p1=new plane(10,20,5);
        var s1=new san(100,200,"a life");
        p1.fly();
        p1.getScore();
        s1.fly();
        s1.getAward();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值