JS类和继承

49 篇文章 23 订阅
28 篇文章 0 订阅

JS中的class其实就是一个函数,class是关键字,后面是类名,一般以大写开头,然后是大括号

1:构造函数是实例化时执行的逻辑。constructor就是构造函数,里面的this.name中的this指向new出来的实例(当前实例),如3中的xialuo就是new出来的一个实例,执行了3后,this就等于xialuo这个实例对象了。括号里的name,number就是形参,而3中括号里的'夏洛'和2017102就是实参,new一个实例的时候需要把实参传进去,这样这个xialuo就变成真实的对象了,它有自己独立的name属性,值为夏洛,它也有自己独立的number属性,值为2017102。所谓类的对象,就是根据什么Student这一个类(图纸)所制造出来的实例。

2:sayHi是类中的方法,可以通过this.(属性名)获取实例对象(当前实例)的这个属性,this就是对象本身,为什么这里的this就是实例对象本身呢,因为4表示xialuo这个实例对象调用了sayHi这个方法,根据this指向一条规则,谁调用了这个方法,this就指向谁,所以这时候sayHi方法里的this.name能拿到xialuo的name属性。

3:new一个实例出来,将Student这一个类(图纸)实例化(将一个Student大类变成一个真实的xialuo这个具体的学生了),执行这句代码后,xialuo相当于这样一个具体对象

xialuo = {
  name:'夏洛',
  number:'2017102',
  classroom:401,
  __proto__:原型对象
}

4:因为xialuo是Student类的实例对象,所以可以调用Student类里的方法sayHi,可以通过方法实现一些“动作”。

继承

//父类
class People{
	constructor(name) {
		this.name = name
	}
	eat(){
		console.log(`${this.name} eat something`)
	}
}
//子类Student
class Student extends People{
	constructor(name,number) {
		super(name)
		this.number = number
	}
	sayHi(){
		console.log(`姓名:${this.name},学号:${this.number}`)
		//console.log('姓名:' + this.name + ',学号:' + this.number)
	}
}

//子类Teacher
class Teacher extends People{
	constructor(name,major) {
		super(name)
		this.major = major
	}
	teach(){
		console.log(`${this.name} 教授 ${this.major}`)
	}
}
//Student实例
var xialuo = new Student('夏洛',2017102)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()
//Teacher实例
var wang = new Teacher('王老师','语文')
console.log(wang.name)
console.log(wang.major)
console.log(wang.number)//undefined
wang.teach()
wang.eat()
wang.sayHi()//报错

class Animal {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}
class Cat extends Animal {
  
}
const maomao = new Cat('maomao', 12)
console.log(maomao.name)  // maomao
console.log(maomao.age)  // 12
/************************************************************************/
class Animal {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}
class Cat extends Animal {
  constructor(name, age){
    super(name)
  }
}
const maomao = new Cat('maomao', 12)
console.log(maomao.name)  // maomao
console.log(maomao.age)  // undefined
/************************************************************************/
class Animal {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}
class Cat extends Animal {
  constructor(name, age){
    super(name, age)
  }
}
const maomao = new Cat('maomao', 12)
console.log(maomao.name)  // maomao
console.log(maomao.age)  // 12

在子类中,如果不写构造函数,则表示,继承父类的构造函数,但一旦在子类中写了constructor构造函数,就表示你要在子类中重写构造函数,那么父类的构造函数和子类就没有任何关系了,除非,在constructor中使用super方法,super方法里的参数才能继承父类构造函数的逻辑。一旦子类中constructor的参数在constructor里没有写逻辑,也没有写在super里,调用该属性就会报undefined。

类的构造函数中有个super,它类似于ES5语法中的call继承,当做函数使用的时候,代表的是父类的构造函数,ES6要求,子类的构造函数必须执行一些super

  • super()代表的是父类的构造函数 但是返回的是子类的实列,内部的this指向的是子类的实列 // 相当于People(父类).prototype.constructor.call(this);

不是这个类的属性,这个类的实例去使用它,会打印undefined,不是这个类的方法,这个类的实例去调用它,会报错。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端吕小布

您的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值