Js类的一些基础概述

58 阅读3分钟

class类的演变

    //1.函数
    function Add(name){
        this.name = name;
    }
    
    Add.prototype.sayName = function(){
        return this.name;
    }
    let example = new add('实例');
    //2.ES6下的class
    class Add{
        //函数中定义的属性在constructor构造函数中表示
        constructor(name){
            this.name = name;
        }
        //函数原型上的方法直接通过类的方法表示
        sayName(){
            return this.name;
        }
    }
    let example = new Add('实例');
    //3.class的继承
        情况一:
            class Point{
                constructor(x,y){
                    this.x = x;
                    this.y = y;
                }
                toString(){
                    return 1;
                }
            }
            
            class Student extends Point{
                    //直接继承父类的构造函数
                }
                
         情况二:
            class Add{
                constructor(name){
                    this.name = name;
                }
                sayName(){
                    return this.name;
                }
            }

            class Sum extends Add{
                constructor(name,age){
                    super(name);
                    //子类中有其他语句时,必须要有super
                    //super函数必须在其他语句之前执行
                    //需要为父类传入参数
                    this.age = age;
                }
            }

            let example = new Sum("张三",18);
    //4.static的使用
        基础用法:static方法和属性都不能被实例对象使用,只能被类自身调用
            class StaticDemo{
                static demo = 'someValue';
                static demoMethod(){
                        return 'static'
                    }
            }
            
            console.log(StaticDemo.demo);//'someValue'
            console.log(StaticDemo.demoMethod());
            //'static'
            
            let s1 = new StaticDemo();
            s1.demoMethod();//error
            
        情况一:子类和父类相互使用static,同样根据原型链上的访问方式
            class Tripe{
                static customName = 'Tripe';
                static calculate(n=1){
                        return n*3;
                    }
                }
                
            class SquaredTriple extends Tripe{
                static longDescription;
                static des = 'static';
                static calculate(n){
      return super.calculate(n)*super.calculate(n);
                }
            }
            
            //访问父类的static方法和属性
                console.log(Tripe.customName);//'Tripe'
                console.log(Tripe.calculate());//3
                console.log(Tripe.calculate(6));//18
                
            //访问子类的static方法和属性
                console.log(SquaredTriple.calculate(3));
                //81
                //子类中对方法进行了重写,且子类通过super调用父类的方法
             
                console.log(SquaredTriple.longDescription);
                //undefined
                //若只定义,未初始化,则为undefined
                 
                 
                 console.log(SquaredTriple.customName);
                 //'Triple'
                 //若子类中没有对应属性,也会根据原型链去父类中寻找对应的属性
                 const tp = new Triple();
                 console.log(tp.calculte());//error
                 //实例不能调用static的方法和属性
                 
        情况二:静态属性和方法中通过this去调用其他的静态属性和方法
            class StaticMethodCall{
                static staticMethod(){
                    return 'Static method';
                }
                static anotherStaticMethod(){
                    return this.staticMethod() + 'from';
                }
            }
            
            console.log(StaticMethodCall.anotherStaticMethod());
            //'Static method from'
            
         情况三:静态属性访问时,也会根据原型去访问
             class StaticMethodCall{
                static customName = 'Tripe';
                static calculate(n=1){
                        return n*3;
                    }
             }
             
             class Example extends StaticMethodCall{
                 static customName1 = 'example';
             }
             
             console.log(Example.customName1);
             //'example'
             console.log(Example.calculate());
             //3

class中的方法和关键字

   1.constructor
        1.1:可以在class内部进行初始化,但必须在class内部方法定义之前进行初始化
        1.2:如果你的类是基类且不提供constructor,则默认constructor是空的,
        1.3:一个类中,如果有constructor,则只能有一个
        1.4:如果是派生类且其中的一些属性来自父类,constructor中必须含有super且在其他语法执行前
        1.5:构造器函数中可以使用super关键字来调用父类的方法或属性
       
    2.extends
        2.1使用extends继承基类(父类),生成派生类(子类)
        2.2继承基类上原型的方法和构造函数
       
    3.public(默认,公有字段)
        3.1 publi static 
        3.2 公有实例可以在基类的构造过程中使用Object.defineProperty添加,也可以在子类构造函数的super()函数结束后添加
        3.3 当初始化字段时,this指向的是类正在构造中的实例
        3.4 子类调用父类的方法时,可以在子类中通过super来访问父类的原型
        3.5 没有初始化的字段被默认初始化为undefined
       
    4.static
        4.1 staticclass中定义方法和属性
        4.2 static定义的方法和属性不能通过创建的实例访问,只能通过class类本身访问

    5.5.1 函数声明会提示,类声明不会提示
        5.2 {}是类的类体,用来定义类成员、方法、构造函数
        5.3 类都执行在严格模式下