Outline
In the ES6, class (category) is introduced as a template objects, defined by class keyword class.
It is the essence of class function .
It can be seen as a syntactic sugar, so that the wording of the prototype of an object more clearly, like object-oriented programming syntax.
The use of class
Small demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//1、创建类 class 创建一个 明星的类
class Star {
//类的共有属性写在constructor
constructor(username,age){
this.username = username;
this.age = age;
}
// 在类中添加共有的方法（函数）
sing(song){
console.log(this.username+"和"+song)
}
//类里面所有的函数不需要写function
// 多个函数方法之间不需要添加逗号分隔
}
//2、利用类创建对象 new
var llj = new Star('张杰',18)
var wj = new Star('郑爽',16)
console.log(llj);
console.log(wj);
llj.sing("王力宏");
wj.sing("那英")
</script>
</body>
</html>
to sum up:
- class keyword to create a class, the class name is the best capitalized.
- Class has a constructor function which can receive the passed parameters and returns to the instance object. (This point is new instances)
- As long as the constructor function is to generate new instances it will automatically call this function inside the class, if we do not write this function, the class will automatically generate this function.
- Examples of new generation can not be omitted.
- Finally, note that syntax specification, create a class, followed by the class name do not add parentheses, generate instances of the class name behind the increase in parentheses, constructors not need to add function
Class inheritance
In real life inherit: inherited his father, the child inherited his father's surname.
Inheritance procedures: subclasses inherit the attributes and methods of the parent class.
extends keyword
grammar:
<script>
// 父类 Father
class Father{
// 父类
}
// 通过 extends 关键字继承
// 子类 Son
class Son extends Father{
//子类继承父类
}
</script>
example：
// 父亲类 Father
class Father {
constructor（）{
}
money(){
console.log("我有1000元")
}
}
//子类 Son 通过 extend 继承 Father
class Son extends Father{}
var son = new Son();
console.log（son.money()）;// 我有1000元
super keyword
super keyword is used to access and call functions on the object parent. You can call the constructor of the parent class, you can also call a normal function of the parent class.
grammar:
class Father{
say(){
return '我是father';
}
}
class Son extends Father{ // 子类继承了父类的属性和方法
say(){
//super.say() // super 调用父类的普通方法
return super.say() + '的son'；
}
}
var damao = new Son();
console.log(damao.say());//我是father 的son
example：
class Father{
constructor(x,y){
//这里的this 指向是自己的constructor
this.x = x;
this.y = y;
}
sum(){
console.log(this.x + this.y);
}
}
class Son extends Father{
constructor(x,y){
//这里的this 指向是自己的constructor,不能被父类接收
//this.x = x;
// 所以需要用到super关键字,调用父类里面的构造函数constructor
//super关键字必须放到this 前面
super(x,y);
this.x = x;
this.y = y;
}
sub(){
console.log(this.x - this.y);
}
}
var son = new Son(5,3);
son.sum(); // 8
son.sub(); //2
to sum up:
- Inherit the property or method to find principles: the principle of proximity
- If instantiable subclass inherits a method of output, there is no look at the subclass of this method, as executed if the first subclass.
- Inheritance, if the child does not go to class to find whether the parent class method, as if on the implementation of the parent class inside.
- Subclasses in the constructor super, must be placed in front of this (you must first call the constructor of the superclass, then the constructor that subclass)
Bowl, please rest good to me!
