class

一、class简介

传统的JS只有对象的概念，没有class类的概念，因为JS是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象。

ES6引入了class类这个概念，通过class关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言。

class Person{   //定义一个名为Person的类
    // 构造函数，用来接受参数
    constructor(x,y){
        this.x = x;    //this代表的是实例对象
        this.y = y;
    }
    todoSome(){  //这是个类的方法，不需要加function，有多个方法也不用逗号隔开
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;

二、静态方法和静态属性

静态方法和静态属性，是使用static关键字的属性和方法

2.1 静态方法

static classMethod(){
console.log('123456')
}

静态方法不会被子类继承，子类不能调用
静态方法中的this，指向的是类class，不是类的实例。因此静态方法只能通过类名来调用，不能通过实例来调用

let p = new Point();
p.classMethod(); // 报错

2.2 静态属性

static prop = 1 ; // 静态属性

静态属性不能被子类继承，子类不能调用
静态属性只能通过类名来调用，不能通过类的实例来调

三、class继承extends

import classtest from "./classtest";  //先引入父类
class Man extends classtest{
    constructor(x,y){   //构造函数尽量与父类参数保持一致
        super();   //利用super()关键字，这个必须放在子类构造函数中的第一位置
        this.x = x;
        this.y = y;
    }
}
export default  Man;

四、注意事项：

1、在类中定义方法时候，不可以给方法加上function关键字，因为JS中构造函数是用function定义的，两个隔开。

2、所有方法不要用逗号隔开，否则会报错。

module

1，什么是模块化

表现形式：js中引入其他的js文件

扫描二维码关注公众号，回复： 14887668 查看本文章

作用：简化html结构，增加代码的独立性和复用性

2. ES6 Modules模块化实现

导入

var name = '小明'  
var age = 18
var flag = true

function sum(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum(20, 30));
}

// 1.导出方式一:
export {
  flag, sum
}

// 2.导出方式二:
export var num1 = 1000;
export var height = 1.88


// 3.导出函数/类
export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('在奔跑');
  }
}
//默认导出  注意 只能写一个
export default function (argument) {
  console.log(argument);
}

导出

// 1.导入的{}中定义的变量
import {flag, sum} from "./aaa.js";

if (flag) {
  console.log('小明是天才, 哈哈哈');
  console.log(sum(20, 30));
}

// 2.直接导入export定义的变量
import {num1, height} from "./aaa.js";

console.log(num1);
console.log(height);

// 3.导入 export的function/class
import {mul, Person} from "./aaa.js";

console.log(mul(30, 50));

const p = new Person();
p.run()

// 4.导入 export default中的内容
import addr from "./aaa.js";

addr('你好啊');

// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'

console.log(aaa.flag);
console.log(aaa.height);

type = “module” 你的浏览器会帮你模块化

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

- class可以用过extends关键字来继承
- ES6继承，子类构造函数中必须使用super()。因为ES6继承是先将父类实例对象的属性和方法，加到this上面，然后再调用子类的构造函数修改这个this
- 如果子类没有定义constructor方法，super()会默认添加上
- 子类会继承父类的方法和属性，但是静态方法和属性必须通过子类的类名来调用

ES6 class详解 + module详解