Class类的使用及概念

一、类的概念

类是一个模板,它描述一类对象的行为和状态。在ES5是用构造函数来描述的,而到ES6之后则是用class来描述的

二、Class

要使用Class去定义一个类,用法如下:

class Person{
}
console.log(new Person())//输出的结果:Person{}
console.log(typeof Person)//输出的结果:function

结果可见Person有构造函数的作用,但是这要比

三、构造方法

class Person{

    constructor(){//构造函数,析构函数
        this.name = "";
        this.age=0;
        console.log("我是构造函数")
    }
}
var p = new Person()
console.log(p)

可见每一个类中都有一个constructor属性,其对应的是ES5中构造函数的本身。其内的属性和方法,都是挂载在this指针上面的,都是将来的实例属性和方法。

四、实例属性和实例方法

4.1 实例属性和类属性:
class Computer{
    //类属性 tic type = "";//类属性只能通过类的关键字来访问修改, 类的方法是通过自己来调用的
    constructor(){
        this.price = '7999'//实例属性 对象属性 实例方法是类的对象来调用的
    }

    static sayHello(){
        console.log("大家好,我是类方法")
    }

    sayGoodBay(){
        console.log("大家好,我是实例方法")
    }
}
4.2 实例方法
  • 什么是实例方法?
    能被new出来的实列所访问的方法

  • 传统构造函数中定义实列的方法和方式

      function Animal (name, age) {

          this.name = name;

          this.age = age;

      }

      Animal.prototype.sounds = function () {

          console.log('yayaya')

      }

      const a1 = new Animal('dog', 3);

      a1.sounds()//输出结果:yayaya

五、静态属性和静态方法

5.1 静态属性

*什么是静态属性:

通过 “构造函数” 直接访问到的属性;

  • 传统构造函数定义静态的属性的方法
 function Animal (name, age) {

   this.name = name;

   this.age = age;
}

Animal.sounds = 'yayaya';

console.log(Animal.sounds)// yayaya

const a1 = new Animal('dog', 3);

console.log(a1.sounds)// undefined

console.log(a1.name)//dog

console.log(a1.age)//3

  • Class中定义静态属性

在Class中定义静态属性中通过****关键字修饰就是静态属性

class Animal {

    constructor(name, age) {

        this.name = name;

        this.age = age;

    }

    static sounds = 'yayaya';

}

console.log(Animal.sounds)//yayaya

const a2 = new Animal('cat', 2);

console.log(a2.sounds)//undefined

console.log(a2.name)//cat

console.log(a2.age)//2
5.2 静态方法

静态方法就是类本身的方法,也是挂载道构造函数上的方法,new 出来的 实例 访问不到

*传统定义的静态方法:


function Animal (name, age) {

    this.name = name;

    this.age = age;

}

Animal.sounds = function () {

    console.log('yayaya')

}

Animal.sounds() //yayaya

const a1 = new Animal('dog', 3);

a1.sounds()// 报错:a1.sounds is not a function
  • Class内部定义的静态方法:

在class类内部,定义静态属性和静态方法都是通过static关键字来修饰!

class Animal {

    constructor(name, age){

        this.name = name;

        this.age = age;

    }

    static sounds () {

        console.log('yayaya')

    }

}

Animal.sounds() //yayaya

const a2 = new Animal('cat', 2);

a2.sounds() // 报错:a2.sounds is not a function

六、This关键字

6.1 四个注意点
  1. ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象
  2. 类里面的共有属性和方法一定要加this指向
  3. 类里面的指向问题,通常都是this指向它定义的地方
  4. 如果this是在类外面定义的,那么它回默认指向window,也就是全局
6.2 this 具有如下特点
  1. 箭头函数没有自己的this。箭头函数的this是相同情况下function的上一级作用域的运行环境。
  2. 不同时也没有自己的arguments、super、new.target,这点和this一样。
  3. 因为没有this,所以不能当构造函数。
  4. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

七、Super 关键字

super是es6新出的关键字,它既可以当作函数使用,也可以当作对象使用,两种使用方法不尽相同

7.1 super用作函数使用的时候,代表父类的构造函数,es6规定在子类中使用this之前必须先执行一次super函数,super相当于Father.prototype.constructor.call(this)
class Father{
    constructor(){
        this.a = 1;
    }
}
class Son extends Father{
    constructor(){
        super();
    }
}

7.2 super用作对象的时候,在普通方法中指向父类的原型对象,在静态方法中指向父类
  • 子类中使用super无法访问Father的实例属性a,可以访问原型对象上的p
class Father {
    constructor() {
        this.a = 1;
    }
    p() {
      console.log(thia.a);
        console.log('hello');
    }
}
class Son extends Father {
    constructor() {
        super();
     this.a = 2;
        super.p();//'2 hello'   Father.prototype.p()方法内部的this指向的是子类实例
        super.a;//undefined
    }
}

八、类的继承

  • class 可以通过 extendx 关键实现继承,这要比原型链继承要清晰和方便的多
class Person{

    constructor(){//构造函数,析构函数
    //默认返回实例对象 this
        this.name = "";
        this.age=0;
        console.log("我是构造函数")
    }
}


class Student extends Person{
    constructor(){
        super()
        console.log("我是Person的子类")
    }
}

console.log(new Student())

子类必须在 constructor 方法中调用super方法,否则新建实例时会报错,子类就得不到 this 对象。这是因为子类自己的 this 对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工。如果不调用 super 方法,子类就得不到this对象。

ES5 的继承,实质是先创造子类的实例对象 this,然后再将父类的方法添加到 this 上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到 this上面(所以必须先调用super方法),然后再用子类的构造函数修改 this。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值