ES6之面对对象 class类

⏯⏯目录

 

✨一,class的用法

💤💌举例:类添加属性constructor()

💦💨 举例:class类添加方法

🔉🔊📢 二,static静态成员

 ✅✅三,继承  extends关键字

👓👓 四,supper 关键字

🧧🧧 五,getter  ssetter 关键字

 六,作者结语

🎈🎈🚀时间游走,岁搁浅,斑驳的影子映着千言万语


一,class的用法

JavaScript 语言中,生成实例对象的传统方法是通过构造函数,ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

定义:使用class关键字声明类,constructor为构造方法,❗❗注意一个类中必须有constructor(),如果没有显示定义,会默认添加一个空的方法。this关键字代表实例化对象

💤💌举例:类添加属性constructor()

class Person{
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
        console.log(p1);
        console.log(p1.realname);
        console.log(p1.age);

💦💨 举例:class类添加方法

class Person{
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
            say(str){
                console.log(this.realname+'会说'+str);
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
        console.log(p1);
        console.log(p1.realname);
        console.log(p1.age);
        p1.say('普通话')

🔉🔊📢 二,static静态成员

定义:类,相当于实例的原型,所有在类中定义的方法,都会被实例继承,。但是如果在方法前,加上一个static关键字,就表示该方法不会被实例化继承,而要直接通过原型来调用

💫🕳举例:没有在info前添加static关键字前

class Person{
            info='人的信息'
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
            say(str){
                console.log(this.realname+'会说'+str);
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
console.log(p1.info);
//人的信息

🚩🚩添加static关键字后,使用实例化对象p1调用info

 class Person{
           static info='人的信息'
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
            say(str){
                console.log(this.realname+'会说'+str);
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
console.log(p1.info);//用实例去调用,结果打印undefined

 添加static关键字后,使用原型对象Person调用info

 class Person{
           static info='人的信息'
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
            say(str){
                console.log(this.realname+'会说'+str);
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
console.log(Person.info);//使用原型对象调用,

 ✅✅三,继承  extends关键字

定义:class类可以通过extends关键字实现继承,让子类继承父类的属性方法。Es6规定,除了私有属性,父类所有属性和方法都可以被子类继承,包括静态方法。

继承原则:继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,有就执行子类,没有执行父类,父类没有,报错或undefined。(采用就近原则)

💦💦举例:

class Person{
           static info='人的信息'
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
            say(str){
                console.log(this.realname+'会说'+str);
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
console.log(Person.info);
class Myperson extends Person{
    constructor(realname,age){
// super(realname,age)
    }
}
const M1=new Myperson('小四',8);
console.log(M1.realname);//打印结果报错

🏀🏀 原因:ES6规定,子类必须在constractor()方法中调用supper(),否则会报错。

 class Person{
           static info='人的信息'
            constructor(realname,age){//构造函数
                this.realname=realname;
                this.age=age;
            }
            say(str){
                console.log(this.realname+'会说'+str);
            }
        }
        //实例化对象
        const p1=new Person('小三',19);
// console.log(Person.info);
       class Myperson extends Person{
    constructor(realname,age){
    super(realname,age)//调用supper关键字,用来访问父类上的函数
    }
}
     const M1=new Myperson('小四',8);
     console.log(M1.realname);

👓👓 四,supper 关键字

定义:用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数。

注意:子类在函数中使用supper,必须放在this前,不然报错。

           子类在继承中,必须在constructor()中调用supper(),不然报错

举例:

  const p1=new Person('小三',19);
// console.log(Person.info);
       class Myperson extends Person{
    constructor(realname,age,sex){
        this.sex=sex
    super(realname,age)

    }
}
     const M1=new Myperson('小四',8,'男');
     console.log(M1.realname,M1.sex);

const p1=new Person('小三',19);
// console.log(Person.info);
       class Myperson extends Person{
    constructor(realname,age,sex){
    super(realname,age)
this.sex=sex
    }
}
     const M1=new Myperson('小四',8,'男');
     console.log(M1.realname,M1.sex);

🧧🧧 五,getter  ssetter 关键字

get()在调用的时候执行  

set()在赋值的时候执行

举例:

class Num{
			 num = 1;
			 //当flag 属性调用的时候 执行
			 get flag(){
				return this.num*10;
			 }
			 // set 当flag属性 赋值的时候回执行
			 set flag(num){
				this.num = num;
			 }
			 
		 }
		 const N1= new Num();
		  console.log(N1.flag);//10
		  N1.flag = 3;
		  console.log(N1.flag);//30

 六,作者结语

🎈🎈🚀时间游走,岁搁浅,斑驳的影子映着千言万语

再见啦

 写的不好,望海涵😁👀

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值