ES6 Class基本使用和继承
Class基本使用和继承
内容大纲：
1、Class的使用和构造方法
2、类的实例
3、类的继承、this和super关键字
4、案例分享（便于理解class类）
一、Class的使用和构造方法
1.1 Class 类概述
ES6 引入了 Class（类）这个概念，作为对象的模板。可以通过 class 关键字定义类。
class 的本质是一个 function函数。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
1.2 Class 类的基础用法
// 定义一个类
class Example {
constructor(a,b) {
this.a = a;
this.b = b;
};
};
注意：
- 虽然class类 相当于一个function但是不用像创建一个function一样在函数名后面加括号，加了反而错了
- class 类声明不能重复
1.3 Class 类的构造方法（constructor 方法）
// constructor 方法是类的默认方法，创建类的实例化对象时被调用。
class Example{
constructor(){
console.log('hello world');
}
}
new Example(); // hello world
// constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
class Example{
}
// 等同于
class Example{
constructor(){
}
}
// 即 定义了一个空的类Example，JavaScript 引擎会自动为它添加一个空的constructor方法。
二、类的实例
2.1 类的实例化
// 定义一个类
class Example {
//代码块
};
// 实例化一个类
var example = new Example();
2.2 实例属性和实例方法
// 实例属性：定义在实例对象（ this ）上的属性。
class Example {
a = 2;
constructor () {
console.log(this.a);
}
}
// 实例方法
class Example {
constructor() {
this.sum = (a, b) => {
console.log(a + b);
}
}
}
注意：
Class 的实例化必须通过 new 关键字。也就是使用new命令，如果忘记加上new，像函数那样调用Class，将会报错。
class Example {}
var example = Example();
// Class constructor Example cannot be invoked without 'new'
2.3 静态属性
静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。
class Example {
}
Example.b = 2;
Example.b // 2
ES6 中规定，Class 内部只有静态方法，没有静态属性。
现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。
class Example {
// 新提案(新写法)
static a = 2;
}
// 目前可行写法(老写法)
Example.b = 2;
注意：
- 类的静态属性，写法是在实例属性的前面，加上static关键字（不能忽略）。
- 新写法是显式声明（declarative），而不是赋值处理，语义更好。
2.4 静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Example{
static sum(a, b) {
console.log(a+b);
}
}
Example.sum(1, 2); // 3
Example类的sum方法前有static关键字，表明该方法是一个静态方法，可以直接在Example类上调用，而不能在Example类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
三、类的继承、this和super关键字
3.1 Class 类的继承
Class 类通过 extends 实现类的继承。
class Father {
}
class Child extends Father {
}
注意：
类的继承 子类可以继承到父类的属性和方法 但是父类无法使用子类的属性和方法
3.2 this关键字
class Student{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
};
};
var s1 = new Student('张三',28,'女');
console.log(s1.name,s1.age,s1.sex);
// this 谁调用指向谁
3.3 super关键字
子类 constructor 方法中必须有 super ，且必须出现在 this 之前。
class Father {
constructor() {}
}
class Child extends Father {
constructor() {}
// or
// constructor(a) {
// this.a = a;
// super();
// }
}
var test = new Child(); // Uncaught ReferenceError: Must call super
// constructor in derived class before accessing 'this' or returning
// from derived constructor
调用父类构造函数,只能出现在子类的构造函数。
class Father {
}
class Child extends Father {
constructor(){
super();
}
}
// 子类Child的构造函数之中的super()，代表调用父类的构造函数。
// 这是必须的，否则 JavaScript 引擎会报错。
调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类
class Father {
test() {
return 2;
}
}
class Child extends Father {
constructor(){
super();
// 调用父类普通方法
console.log(super.test()); // 2
}
}
let b = new B();
// 子类Child当中的super.test()，就是将super当作一个对象使用。
// 这时，super在普通方法之中，指向Father.prototype，
// 所以super.test()就相当于Father.prototype.test()。
四、案例分享
练习题：猜数字游戏：一个类A有两个实例变量v、num，v有一个初值100。定义一个方法guess，对A类的实例变量v，用num进行猜。如果大了则提示大了，小了则提示小了。等于则提示猜测成功。需要有用户界面。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>documenttitle>
<style>
div{
width: 200px;
height: 30px;
border: 1px solid #000;
margin-top: 2px;
}
style>
head>
<body>
<h4>数字游戏h4>
<hr>
<input type="text" id="num">
<button id="btn">猜一下button>
<div id="txt">div>
body>
<script>
// 取到随机数v
var v = Math.floor(Math.random() * 100);
// 声明一个实例A
class A {
constructor(num) {
this.v = v;
// console.log(this.v);
this.num = num;
// console.log(this.num);
};
// 写一个函数用于判断
guess() {
var str = '';
if (this.v > this.num) {
str = '猜小了';
} else if (this.v < this.num) {
str = '猜大了';
} else { //猜对了
str = '猜对了';
};
return str;
};
};
// 绑定按钮点击事件
btn.onclick = function () {
// 得到输入框输入数字
var a = document.getElementById('num').value;
// 调用类 类的函数
var s1 = new A(a);
var result=s1.guess();
// 传出数值到div盒子中显示到页面上
document.getElementById('txt').innerText = result;
};
script>
html>
小小案例奉上，帮助理解知识点内容。注意看知识点，一定能学会的