Class关键字
class
关键字是ES6的新特性
例如
若创建一个动物类
则需要:
class Animal{
}
(有Java的感觉了…)
构造器
用constructor
创建构造器 其意义和Java的构造函数相同(如果你会Java的话…)
每个类中都有一个构造器 若没有手动指定 那么默认每个类中有个看不见的空构造器
构造器的作用是每当new这个类的时候首先执行构造器中的代码 常用于初始化赋值
class Animal{
// 类中的构造器
constructor (name,age)
{
this.name=name;
this.age=age;
}
}
实例属性和静态属性
function Person(name,age)
{
this.name=name;
this.age=age;
}
console.log(p1.name) // 实例属性
console.log(p1.age) // 实例属性
或是:
class Animal{
// 类中的构造器
constructor (name,age)
{
this.name=name; // 实例属性
this.age=age; // 实例属性
}
}
console.log(a1.name)
console.log(a1.age)
function Person(name,age)
{
this.name=name;
this.age=age;
}
// 在这里address属性直接挂载给了构造函数 所以是静态属性
Person.address="XX路"
console.log(Person.address)
或是 用static
修饰:
class Animal{
// 类中的构造器
constructor (name,age)
{
this.name=name; // 实例属性
this.age=age; // 实例属性
}
// 在class内部通过static修饰的属性即【静态属性】
static address="XX路"
}
console.log(Animal.address)
(Java练习生表示很轻松 but前端可能需要花时间理解一下这些概念)
实例方法和静态方法
实例方法 即挂载到原型对象prototype
上的方法
比如:
function Person(name,age)
{
this.name=name;
this.age=age;
}
// 实例方法
Person.prototype.speak=function()
{
console.log("Person的实例方法")
}
p1.speak();
或是:
class Animal{
constructor (name,age)
{
this.name=name;
this.age=age;
}
woof()
{
console.log("woof woof woof!")
}
}
a1.woof();
function Person(name,age)
{
this.name=name;
this.age=age;
}
// 静态方法
Person.speak=function()
{
console.log("Person的实例方法2")
}
Person.speak();
或是:
class Animal{
constructor (name,age)
{
this.name=name;
this.age=age;
}
static woof()
{
console.log("woof woof woof!")
}
}
Animal.woof();
实例方法在调用时 通过创建出的对象调用
而静态方法在调用时 只能直接通过类调用
注意点:
继承(extends)
有两个类 分别是狗和猫:
// 狗
class Dog
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
const d1=new Dog("狗",2)
console.log(d1)
// 猫
class Cat
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
const c1=new Cat("猫",1)
console.log(c1)
出现冗余代码
此时 可以抽取它们的共有构造作为父类
在class类中 可使用extends
关键字以实现子类继承父类
子类在创建时 会使用父类的构造函数
像这样:
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
// 狗
class Dog extends Animal
{
}
const d1=new Dog("狗",2)
console.log(d1)
// 猫
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
console.log(c1)
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
say()
{
console.log("bbbbb...")
}
}
class Dog extends Animal
{
}
const d1=new Dog("狗",2)
d1.say();
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
c1.say();
super函数
若一个子类通过extends关键字继承了父类 那么 必须在子类的constructor内调用super()
super是一个函数 是父类的构造器(constructor)的引用 可以将super视为父类的构造器
super可以传递参数
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
// 狗
class Dog extends Animal
{
constructor(name,age)
{
super(name,age) // 将参数通过super传给父类
}
}
const d1=new Dog("狗",2)
console.log(d1)
// 猫
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
console.log(c1)
子类独有属性
当子类有某个属性 而其父类的其它子类没有该属性
那么此时 可定义子类的独有属性
将参数传给子类的构造器中 然后用this关键字指定即可
需要注意的是:独有的属性必须放在super的后面
// 父类
class Animal
{
constructor(name,age)
{
this.name=name;
this.age=age;
}
}
// 在class类中 可使用extends关键字以实现子类继承父类
// 狗
class Dog extends Animal
{
constructor(name,age,id)
{
super(name,age)
this.id=id; // 独有的属性必须放在super的后面
}
}
const d1=new Dog("狗",2,"001")
console.log(d1)
// 猫
class Cat extends Animal
{
}
const c1=new Cat("猫",1)
console.log(c1)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。