ES6 class类
2021-10-07 本文已影响0人
微语博客
在ES6以前,没有类的概念,所有的面向对象都是基于原型实现的。ES6中可以通过class定义类,但是class的本质也是函数,ES6的类更像是语法糖。class让对象原型的写法更加清晰、更像面向对象编程的语法。
class类定义
类表达式可以为匿名或命名类。
let Person = class{
constructor(name){
this.name = name;
}
}
let Person = class Person{
constructor(name){
this.name = name;
}
}
let person = new Person("Cherry");//实例化
类不可重复声明,否则会报错。类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。
prototype属性
对象的原型属性,在ES6中任然存在,用于覆盖方法初始化时添加方法。
let Person = class Person{
constructor(name){
this.name = name;
};
greet(){
console.log("Hello"+this.name);
}
}
Person.prototype.greet = function (){
console.log("你好"+this.name);
}
new Person("Cherry").greet();//你好Cherry
添加方法
let Person = class Person{
constructor(name){
this.name = name;
};
greet(){
console.log("Hello"+this.name);
}
}
Object.assign(Person.prototype,{
say(){
console.log("this is "+this.name+" method");
}
})
new Person("Cherry").say();//this is Cherry method
其它属性
静态属性
class Person{
static city = "Guangzhou";//静态属性,类的固定属性
}
console.log(Person.city);//Guangzhou
//或者直接添加给类
Person.city = "Shenzhen";
console.log(Person.city);//Shenzhen
//通过实例对象访问
console.log(new Person().city);//undefined
公共属性
class Person{
//
}
Person.prototype.id = 1230;//原型链上的属性
let person1 = new Person();
let person2 = new Person();
console.log(person1.id);//1230
console.log(person2.id);//1230
console.log(person1 == person2);//false
实例属性
class Person{
age = 18;//实例对象this上的属性
constructor(age){
this.age = age;
}
}
console.log(new Person(20).age);//20
name属性
class Person{}//name属性返回当前类名
console.log(Person.name);//Person
constructor方法
constructor 方法是类的默认方法,创建类的实例化对象时被调用,相当于构造方法。
class Person{
constructor(){
console.log("触发了此方法");
}
}
new Person();//触发了此方法
返回指定对象
class Person{
constructor(){
return window;//指定返回了window对象,不指定默认返回的this
}
}
console.log(new Person() === window);//true
静态方法
class Person{
static sayHi(){
console.log("我是静态方法");
}
}
Person.sayHi();
原型方法
class Person{
sayHi(){
console.log("我是原型方法");
}
}
let person1 = new Person();
let person2 = new Person();
person1.sayHi();//我是原型方法
person2.sayHi();//我是原型方法
实例方法
class Person {
constructor() {
this.sayHi = () => {
console.log("我是实例方法");
}
}
}
new Person().sayHi();//我是实例方法
getter与setter
class Person{
constructor(name){
this.name = name;
}
get name(){
console.log("this is getter");
return this._name;
}
set name(name){
console.log("this is setter");
this._name = name;
}
}
let person = new Person("Cherry");//this is setter
console.log(person._name);//Cherry
getter 与 setter 必须同级出现,而且setter必须有参数。
类的继承
通过关键字extends可以实现类的继承。
class Father{
constructor(){
console.log("this is Father class");
}
}
class Child extends Father{
constructor(){
super()
console.log("this is Child class");
}
}
new Child();//this is Father class this is Child class
子类必须有super关键字实现继承,且要出现this前面,而且只能在子类构造方法中调用父类构造方法。
调用父类普通方法
class Father{
constructor(){
}
info(){
console.log("父类的普通方法");
}
}
class Child extends Father{
constructor(){
super();
super.info();//super.方法名调用父类普通方法
}
}
new Child();//父类普通方法
调用父类静态方法
class Father{
static info(){
console.log("父类的静态方法");
}
constructor(){
}
}
class Child extends Father{
constructor(){
super();
}
static test(){
super.info();//在子类静态方法中调用
}
}
Child.test();//父类的静态方法
类的继承是面向对象编程的基础,而继承只能出现在class类中,原始对象不能被继承。