Class属性与方法
实例方法
通过类的实例对象调用方法
class People{
say(){
console.log("Hello");
}
}
var p = new People();
p.say()实例属性
实例属性指的是类的实例对象可调用的属性
class People{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name,this.age);
}
}
var p = new People("iwen",20);
p.say()
console.log(p.name,p.age);静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。
如果在一个方法前，加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”
class Person {
static classMethod() {
console.log("Hello");
}
}
Person.classMethod() // Hello
var p = new Person();
p.classMethod() // p.classMethod is not a function温馨提示
注意，如果静态方法包含 this 关键字，这个 this 指的是类，而不是实例。
class People {
static getSay() {
this.say();
}
static say() {
console.log('hello');
}
say() {
console.log('world');
}
}
People.getSay() // hello静态属性
静态属性指的是 Class 本身的属性，即 Class.propName
class People{}
People.status = "等待"
console.log(People.status);私有方法和私有属性
现有的解决方案
私有方法和私有属性，是只能在类的内部访问的方法和属性，外部 不能访问。这是常见需求，有利于代码的封装，但 ES6 不提供，只 能通过变通方法模拟实现 在方法前面添加下划线（"_"）代表就是静态方法(这只是一种约束， 不是语法规范)
class People {
// 公有方法
say() {
return this._hi()
}
// 私有方法
_hi() {
return "hi"
}
}
var p = new People();
console.log(p.say());实时效果反馈
1. 下列代码，运行结果是什么：
class People { static getSay() { this.say(); } static say() { console.log('hello'); } say() { console.log('world'); } } People.getSay()
A hello
B world
C null
D undefined
Class最新提案
类的静态属性
现在有一个提案提供了类的静态属性，写法是在实例属性的前面， 加上 static 关键字
class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myStaticProp); //42
}
}
var my = new MyClass();私有方法和私有属性
目前，有一个提案，为 class 加了私有属性。方法是在属性名之前， 使用 # 表示
class Counter {
#count = 0;
increment() {
this.#count++;
}
#sum() {
console.log(this.#count++);
}
}Class 的继承
基础用法
Class 可以通过 extends 关键字实现继承，让子类继承父类的属性和方 法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多
class Point {
}
class ColorPoint extends Point {
}ES6 规定，子类必须在 constructor() 方法中调用 super() ，否则就会报错， 这是因为子类自己的 this 对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用 super() 方法，子类就得不到自己的 this 对象
class Point {
constructor(x,y){
this.x = x;
this.y = y;
}
getPoint(){
console.log(this.x,this.y);
}
}
class ColorPoint extends Point {
constructor(x,y,z){
super(x,y)
this.z = z;
}
}
let cp = new ColorPoint(10,20,30)
cp.getPoint();super 关键字
super 这个关键字，既可以当作函数使用，也可以当作对象使用。在 这两种情况下，它的用法完全不同
第一种情况： super 作为函数调用时，代表父类的构造函数。ES6 要 求，子类的构造函数必须执行一次 super 函数。
class A { constructor(x,y){} } class B extends A { constructor(x,y,z) { super(x,y); this.z = z; } }
第二种情况： super 作为对象时，在普通方法中，指向父类的原型对象
class Point { constructor() { } print() { console.log("Hello"); } } class ColorPoint extends Point { constructor() { super(); } getPrint(){ super.print() } } let cp = new ColorPoint() cp.getPrint()
实时效果反馈
1. super关键字的作用下列描述错误的是：
A super 作为函数调用时，代表父类的构造函数
B super 作为对象时，在普通方法中，指向父类的原型对象
C super 如 this 关键字一样
Module 的语法
历史上，JavaScript 一直没有模块（module）体系，无法将一个大 程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语 言都有这项功能，比如 Ruby 的 require 、Python 的 import ，甚至就连 CSS 都有 @import
ES6 模块是通过 export 命令显式指定输出的代码，再通过 import 命令输 入。
export var Hello = "hello" // hello.js文件
import { Hello } from "./hello.js" //
index.js文件export 命令
export命令导出变量
export var firstName = 'txc';
export var lastName = 'itxiaotong';
export var year = 2000;export命令导出函数
export function add(x, y) {
return x + y;
};需要特别注意的是， export 命令规定的是对外的接口，必须与模块内 部的变量建立一一对应关系
// 报错
export 1;
// 报错
var m = 1;
export m;修改正确写法
// 写法一
export var m = 1;
// 写法二
var m = 1;
export { m };
// 写法三
var m = 1;
export {m as n};import 命令
使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通 过 import 命令加载这个模块
// name.js
export var firstName = 'txc';
export var lastName = 'itxiaotong';
export var year = 2000;
// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}如果想为输入的变量重新取一个名字， import 命令要使用 as 关键字， 将输入的变量重命名
// value.js
export var value = 1;
// main.js
import { value as val } from './value.js';除了指定加载某个输出值，还可以使用整体加载，即用星号（ * ）
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
// main.js
import { area, circumference } from './circle';
// 可以修改如下
import * as circle from './circle';export default 命令
从前面的例子可以看出，使用 import
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
}import
// import-default.js
import customName from './export-default';
customName(); // 'foo'实时效果反馈
1. 下列那个不属于ES6的Module语法的关键字：
A export
B import
C export default
D require
ES6知识点总结
下列带有星号(*)的内容为选学了解内容，在内容后面添加了括号的 是重点知识
1 Babel转码器
2 Let命令（作用域：花括号级别）
3 Const命令
4 变量的解构赋值（对象的解构赋值）
5 字符串扩展（字符串模板）
6 数值扩展
7 *Math函数扩展
8 数组扩展（方法）
9 对象扩展（简洁表示法）
10 运算符扩展（ ?? ）
11 函数扩展（箭头函数）
12 *Symbol
13 Set数据结构（唯一：去重）
14 *Map数据结构
15 *Proxy
16 *Reflect
17 同步与异步
18 Promise对象（解决了回调地狱）
19 *Generator函数
20 Async函数（异步变同步）
21 Fetch API（全新的网络请求方案，代替XHR）
22 Class
23 Class继承
24 Module语法
实操
1 【实操】利用 let 命令解决循环中闭包的问题
2 【实操】利用 promise 、 async 、 fetch 完成对任意接口的数据请求
3 【简答】简述 Babel 的作用
4 【实操】利用 Set 数据结构实现数组去重
5 【实操】利用 ... 扩展运算符实现数组的合并
