Class基本使用方法和继承

Class基本使用方法和继承

前言：

当我们在学习class的时候，我们有没有想过为什么要用类？类的概念又是什么？

概括性的来说：
类相当于一个模板，把具有共同属性共同方法的共性抽离出来，方便以后的调用。

类的概念：
具有相同属性和行为的一类群体，总称为类。

1、class的使用语法

• 通过关键字class可以定义类

/*
//声明类 类名一般开头大写
class 类名{
		方法名(){
		//方法体
		}
}
var 变量名=new 类名()
*/


//例如(可直接复制使用)
//先声明一个类
class A{
//constructor方法是类的默认方法
	 constructor(a) {
        this.a = a;
    }
	//自定义一个方法
	read(){
		console.log('学习')
	}
	//实例化一个对象
	var san= new A();
	//调用class里面的方法
	san.read()//学习
}

注意

• 不可重复声明
• 类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。
• 类中方法不需要 function 关键字。
• 方法间不能加分号。

2、constructor构造方法

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

• constructor相当于初始化属性,创建类的实例化对象时被调用。

   class A{
   	}
   	//等同于
   	class A{
   		constructor(){ }
}

3、实例化方法

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

4、实例化属性

• 实例属性：定义在实例对象（ this ）上的属性。

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

5、静态方法

• 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

6、静态属性

• 静态属性：class 本身的属性，即直接定义在类内部的属性不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

class Example {
    static a = 2;
     constructor() {
    console.log(Example.a); // 2
  }
}

7、类的实例

• class 的实例化必须通过 new 关键字，如果忘记，直接调用class将会报错

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'
//正确写法
let exam1 =new Example(); 

注意：
一定要通过关键字new实例化一个对象

8、类的继承

• 通过关键字 extends 实现类的继承。
• 可继承父级的方法以及属性

//父类
class F{
    dss(){
        console.log('哈哈哈')
    }
}

//子类
class S extends F{
}
//实例化
var s= new S();
s.dss()//哈哈哈

注意：
父级不能继承子的方法以及属性

8.1 super关键字

• super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

8.2this关键字

• 简单来说就是，谁调用这个函数就指向谁

如果你想了解更多关于this与super的总结点击下面链接

https://www.cnblogs.com/hasse/p/5023392.html.

后言：

附上整个class的小案例

//声明类 类名一般开头大写
class Student{
    static a=2

    // 构造方法  每当实例化个对象时构造方法就会被调用
    constructor(name,age,sex){
        console.log('构造方法'+Student.a)
        // this谁调用就指向谁
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    // 方法
    read() {
        console.log('cctv'+this.name)
    }
}


// 实例化一个对象
var s=new Student('三',14,'女');
// 调用属性以及方法
s.read();
console.log(s.name)//三
console.log(s.age)//14
console.log(s.sex)//女

// 实例化一个对象
var s1=new Student('张二',12,'男');
// 调用属性以及方法
s1.read();
console.log(s1.name)//张二
console.log(s1.age)//12
console.log(s1.sex)//男