js class定义及使用
什么是class
程序中专门集中保存
一种类型的所有子对象
的统一属性结构和方法定义
的程序结构
如何定义class
js
的原生的定义方式:
function Student(name,age){
this.name= name ;
this.age = age;
}
Student.prototype.intr= function(){
console.log(`我叫${this.name};我今年${this.age}岁`)
}
var person = new Student('张三',18)
person.intr(); //我叫张三;我今年18岁
注:定义在全局对象上
使用class定义:
- 用
class{}
包裹原构造函数+原型对象方法 原构造函数名
升级为整个class
的名字,所有构造函数统一更名为constructor
- 原型对象中的方法,不用再加
prototype
前缀,也不用=function,直接简写为: 方法名(){ ... ...}
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
intr() { // 自动放入原型对象中
console.log(
`我叫${this.name}, 我${this.age}岁`);
}
}
var person = new Student('张三', 18)
person.intr(); //我叫张三;我今年18岁
注:定义在脚本
问题:在class{}内的方法定义保存在哪里?
结果:都保存在原型对象上;其本质都是一样的,打印person 之后出现的数据结构都是一样的。
问题:如果多个子对象共用的相同的属性值,应该放在那里?该如何访问
共有属性放置:static className="高一(2)班"
共有属性访问:Student.className
class{
constructor(name, age) {
this.name = name;
this.age = age;
}
static className="高一(2)班" // static 共有属性名=属性值
intr() { // 自动放入原型对象中
console.log(
`我叫${this.name}, 我${this.age}岁`,${Student.className});
}
}
}
class 中 extends 和 super 的使用:
class people{
constructor(name,sex,age){
this.name= name;
this.sex= sex;
this.age= age;
}
peopleAction(){
console.log(`我叫${this.name},我是${this.sex},我今年${this.age}岁`)
}
}
class men extends people{
constructor(name,sex,age,noBirthBaby){
super(name,sex,age)
this.noBirthBaby = noBirthBaby;
}
action(){
console.log(`我叫${this.name},我是${this.sex},我今年${this.age}岁,我${this.noBirthBaby}生娃`)
}
}
var tom = new men('Tom','男','5','不会')
tom.peopleAction() //我叫Tom,我是男,我今年5岁 --使用父类的方法
tom.action() //我叫Tom,我是男,我今年5岁,我不会生娃
var Mill = new men('Mill','女','21','会')
Mill.action() //我叫Mill,我是女,我今年21岁,我会生娃
转载自:https://juejin.cn/post/7070128588007145509