es6类的相关知识

最新推荐文章于 2024-10-06 04:03:15 发布

SeeUa

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量123

点赞数

分类专栏： js 文章标签： javascript

原文链接：https://blog.csdn.net/xiaxiaoxian/article/details/79621825?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159616316819724835812486%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159616316819724835812486&biz_id=0&utm_med

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考：https://blog.csdn.net/xiaxiaoxian/article/details/79621825?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159616316819724835812486%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=159616316819724835812486&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-5-79621825.first_rank_ecpm_v3_pc_rank_v2&utm_term=es6%E7%B1%BB&spm=1018.2118.3001.4187

类的基本定义和生成实例：

// 类的基本定义和生成实例
     class Parent{ //定义一个类
        constructor(name='xiaxaioxian'){  //这里进行类的传参定义和默认参数定义 构造函数constructor()
          this.name= name;
        }
     } 
 
// 生成一个实例
     let g_parent = new Parent();
     console.log(g_parent); //{name: "xiaxaioxian"}
     let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数的name属性值
     console.log(v_parent);  // {name: "v"}

继承

 // 继承
    class Parent{ //定义一个类
        constructor(name='xiaxaioxian'){
          this.name= name;
        }
    } 
 
    class Child extends Parent{  //继承是通过extends来继承的
 
    }
 
    console.log('继承',new Child()) // 继承 {name: "xiaxaioxian"}

继承传递参数

// 继承传递参数
    class Parent{ //定义一个类
        constructor(name='xiaxaioxian'){
          this.name= name;
        }
    } 
 
    class Child extends Parent{
      constructor(name = 'child'){ // 子类重写name属性值
        super(name); // 子类向父类修改 super一定放第一行  关键字super()
        this.type= 'preson';
      }
    }
 
    console.log('继承',new Child('hello')) // 带参数覆盖默认值  继承{name: "hello", type: "preson"}

ES6重新定义的ES5中的访问器属性

class Parent{ //定义一个类
        constructor(name='xiaxaioxian'){
          this.name= name
        }
 
        get longName(){ // 属性
          return 'mk' + this.name
        }
 
        set longName(value){
          this.name = value
        } 
        // get, set 是类的访问器属性通过get可以获取数据，因为get有return返回值，
        // 通过set来设置属性 这两个函数是同名的区别再用用的时候赋值不赋值
    }
 
    let v = new Parent(); 
    console.log('getter',v.longName)   // getter mkxiaxaioxian
 
    v.longName = 'hello';
    console.log('setter',v.longName)   // setter mkhello

类的静态方法：

class Parent{ //定义一个类
      constructor(name='xiaxaioxian'){
        this.name= name
      }
      static tell(){ // 静态方法:通过类去调用，而不是实例
        console.log('tell')
      }
    }
 
 
    Parent.tell(); // tell

类的静态属性：

// 静态属性
    class Parent{ //定义一个类
      constructor(name='xiaxaioxian'){
        this.name= name
      }
 
 
      static tell(){ // 静态方法:通过类去调用，而不是实例
        console.log('tell')  // tell
      }
    }
 
 	//这里没有new一个对象实例，所以可以直接用类.属性来打印静态属性
    Parent.type = 'test'; // 定义静态属性
    console.log('静态属性',Parent.type) // 静态属性 test
 
 	//这里new了一个对象实例，所以不能直接用实例.属性来输出静态属性和静态方法
    let v_parent = new Parent();
    console.log(v_parent); // {name: "xiaxaioxian"}  没有tell方法和type属性