JavaScript入门教程前端入门教程

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类中,原始对象不能被继承。

上一篇下一篇

猜你喜欢

热点阅读