ES6 class类

作者: 微语博客 | 来源:发表于2021-10-07 23: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类中,原始对象不能被继承。

    相关文章

      网友评论

        本文标题:ES6 class类

        本文链接:https://www.haomeiwen.com/subject/uzrtoltx.html