ES6之面对对象 class类

Ednburgh-

已于 2022-08-02 11:15:31 修改

阅读量326

点赞数 9

文章标签： es6 javascript 开发语言 c++

于 2022-07-21 15:38:25 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/125910952

版权

⏯⏯目录

✨一，class的用法

💤💌举例：类添加属性constructor（）

🧧🧧 五，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