class 类

es6 新加了class类,类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,使用方法类似这样

class a{
    constructor(props){//如果是父类,不用写super
        super(props)
    }
    xxxx
}
  • 先说下super是做什么的,简单来说,就是有三种用法(一般都是第一种)。
  • 第一种
//super(props)
class sn{
      r(){
          alert(2)
    }
};
class  a extends sn{
      constructor(props){
            super(props);
            this.r()
      }
}
var s=new a();//结果是alert(2)
  • 第二种
//super()作为对象调用,指代父类
class sn{
      r(){
            alert(2)
      }
};
class  a extends sn{
      constructor(){
            super();
            super.r()
      }
}
var s=new a();//结果是alert(2)
  • 第三种
//super()作为函数调用,指代父类(sn)的构造函数
class sn{
      constructor(){
        alert(2)
      }
};
class  a extends sn{
      constructor(){
            super()
      }
}
var s=new a();//结果是alert(2)
  • 函数声明和类声明之间的一个重要区别是函数声明会[声明提升],类声明不会。你首先需要声明你的类,然后访问它,否则会抛出一个[ReferenceError]。

  • 类声明 默认的函数都是在prototype上面.

class Scc {}
class a extends Scc {
    constructor(props){
        super(props);
        this.sss=2
    }
    b(){
        console.log('this is b')
    }
}
console.log(a.prototype)//Scc {constructor: function, b: function}
console.log(new a().sss)// 2
  • static 静态方法
    类声明里面的函数通过实例化之后 才能调用,除非用static 静态方法,可以直接调用。静态方法不能通过实例调用,而是直接通过类来调用
class Scc {
    static a(){
        console.log('this is static a')
    }
}
console.log(Scc.a()) // 输出 this is static a
  • 使用 extends 创建子类
class Animal { 
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}
class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}
var d = new Dog('Mitzie');
// 'Mitzie barks.'
d.speak();

如果子类中的constructor中有用到this,必须在此之前调用super()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ES6 class类知识点梳理 大概从几个方面来讲解ES6 class类和传统的构造函数的区别。 必须要有cons...
    sunny519111阅读 3,311评论 0 1
  • class声明 class 是 ES6 模仿面向对象语言(C++, Java)提出的定义类的方法。形式类似 C++...
    faremax阅读 1,747评论 0 0
  • 简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。...
    codeSirCao阅读 1,765评论 0 0
  • 注:此篇文章是我参考阮一峰老师的[ECMAScript 6 入门]文章,自己记录的笔记,详细的内容请移步阮一峰老师...
    HW_____T阅读 3,471评论 0 1
  • 结束你,结束我们。 两天前,我结束了为期一年,我也不知道该怎么形容的感情,你可以说他不堪,黑暗,也可以说他幸福,无...
    灵灵灵灵小精灵阅读 1,216评论 0 0

友情链接更多精彩内容