⏯⏯目录
✨一,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
六,作者结语
🎈🎈🚀时间游走,岁搁浅,斑驳的影子映着千言万语
再见啦
写的不好,望海涵😁👀