ES6 基础之类与继承

标签

HTML

正则表达式

Json

包管理工具

vite

CSS

XPath

JavaScript

Jquery

less

ES6

Vue

React

Layui

editor.md

sea.js

Zepto.js

mysql.js

mssql.js

NodeJs

Express

前端template

YAML

杂项

外部链接

ES6 基础之类与继承

[TOC]

### javascript中类和构造函数的使用方式

声明的方法就是一个类的构造函数，通过<mark>prototype</mark>给类添加成员

```js
function showInfo(name) {
    this.name = name;
}
showInfo.prototype.showName = function () {
    console.log(this.name)
}
var a = new showInfo("李白");
a.showName();
//输出：李白
var a = new showInfo("杜甫");
a.showName();
//输出：杜甫
showInfo.content = function(){} //类似静态方法
```

### ES6中的类和构造函数

ES6类的构造函数constructor()，静态方法需要在方法名前面加关键字static，静态方法不能通过实例化方式访问，只能通过类名调用

```js
class showInfo{
    //构造函数
    constructor(name){
        this.name = name;
    }
    showName(){
        console.log(this.name)
    }
    //静态方法
    static shwoContent(){
        console.log("")
    }
}
let a = new showInfo("杜牧");
a.showName()
//输出：杜牧
a.shwoContent()
//输出：TypeError: a.shwoContent is not a function
showInfo.shwoContent()
//输出：远上寒山石径斜，白云生处有人家。停车坐爱枫林晚，霜叶红于二月花。
```

### ES6中的类的继承

类的继承要使用关键字`extends`，调用父类在子类的构造函数下使用`super()`方法,静态方法的继承调用同样是使用类名调用

代码需要延用上面的<mark>showInfo</mark>类
```js
class Persons extends showInfo{
    constructor(name,addr){
        super(name);//super用来调用父类
        this.addr = addr;
    }
    showAddr(){
        console.log(this.addr)
    }
}

let b = new Persons("杜牧","唐代")
b.showName();
//输出：杜牧
b.showAddr();
//输出：唐代
Persons.shwoContent();
//输出：远上寒山石径斜，白云生处有人家。停车坐爱枫林晚，霜叶红于二月花。
```