面向对象01 -基础知识汇总（什么是类、其中的extend、super、静态方法和属性等；案例分享）

一、ES6中类的使用

1. ES6中的类的写法

  class Person{
    	height="178cm";
        constructor(name,age){
            //属性
            this.name = name;
            this.age = age;
        }
        //方法
        getName(){
            console.log("姓名是:"+this.name);
        }
  }
  let student = new Person("张三",20);
  student.getName();
  

2. 说明：

1. 相比于ES5，类的写法算是一块语法糖，可以直接使用class声明类，类里面写构造函数，可以向类添加属性和方法。
2. 声明的类的类型经过console.log打印验证后是Object；我理解的是：万物皆可对象嘛，函数可以是对象，方法也可以是对象，所以声明的Person类很像函数，所以其类型是Object。
3. 注意 class 后面的类名不需要（）
4. 需要注意的是，类的方法例如 getName 是添加在 _prototype_原型上的，方法添加在原型上执行效率更高。
5. 类声明好后，需要使用new方法进行实例化才可以使用。

二、 静态方法和属性:实例不会继承的属性和方法

1. 写法：

class Person{
    //静态方法
    static hobby(){
        console.log("喜欢篮球");
    }
}
//静态属性
Person.height = "178cm";
//通过类来调用
Person.hobby();
console.log(Person.height);

2. 说明

1. ES6中提供修饰符 static 来声明静态属性和方法
2. 静态属性和静态方法不需要通过实例化来调用，只需要通过类来调用
3. static什么时候用到呢？当这个属性只跟这个类相关，而跟所有实例化对象都没什么关系的时候，就可以用static声明静态属性。
   –
   例如，我实例化两个Person对象，分别为张三和李四，我需要统计一共实例化了多少个对象，此时可以使用static声明一个num属性；每调用一次constructor方法，就num++；则可以实现。（使用全局变量也可以做到，但一般不推荐，因为全局变量很容易被污染）

三、 私有和公有

1. 说明

1. ES6中不像Java或者其他语言那样分的很细，使用public、private等等
2. 就使用关键字 # ，带#号的就为私有，无法被获取和调用

2. 写法

class Person{
//私有属性#关键字 weight 自定义属性
	#weight="78kg";
	constructor(myname){
	this.myname=myname;
	}
	fn(){
		console.1og（"fn"）;
	}
	getweight(){
		return this.#weight;
	}
}
let zhangsan=new Person("张三");
//console.1og(zhangsan.#weight);
let res=zhangsan.getweight();
console.log(res);

四、ES6中继承extends、super

1. 写法

 class Dad{
     name = "张三";
     age = 40;
     constructor(height){
         this.height = height;
     }
     hobby(){
         console.log("喜欢篮球");
     }
 }
 class Son extends Dad{
     constructor(height){
         //表示父类的构造函数
         super(height);
     }
 }

2. 说明

1. 使用关键字 extends 来声明继承；子类 Son 继承父类 Dad
2. 使用关键字 super 来继承父类的属性和方法，注意，在子类中，super一定要放在子类自己的this之前，即先继承再创造自己的属性；否则会报错。
3. super 就相当于是执行了父类的 constructor 方法
4. js 中只支持 爷爷-爸爸-儿子 这种的多层继承，也支持一个爸爸多个儿子；不支持一个儿子两个爸爸这种多类继承，但有些其他的语法可以。
5. 如果想加强父类中的某些方法，也可以通过super，先继承父类方法，然后再在里面写一些自己的逻辑。

class Dad{
    name = "张三";
    age = 40;
    constructor(height){
        this.height = height;
    }
    hobby(){
        console.log("喜欢篮球");
    }
}
class Son extends Dad{
    constructor(height){
        //表示父类的构造函数
        super(height);
    }
    fn(){
          super.fn();
          console.log('喜欢游泳')
    }
}

五、 ES6中模块化import、export

1. ESM模块化说明

• ES module --> 模块化
• 浏览器默认模块化 script 里加入 “type=module”；
• 以前都是通过< script >标签进行引入，导致各种< script >标签，而且会造成全局变量污染，因为每个模块之间没有独立的作用域，模块化的话会对每个模块提供独立的作用域
• 还有一种模块化 commonjs规范 也在前端用的很多
• 按需导出和按需导入

---

2. 导出关键字 export

• 导出方式一：

  export { a ,b , c};
  

• 导出方式二 关键字 " as "

  export { a as aa ,b , c};
  

• 导出方式三

  export let c = ()=>{console.log("I am function...")};
  

• 导出方式四

  export default a;
  

• 等同

  export {a as default};
  

• 注意：

  A. export 可以导出多个，export default 只能导出一个；
  B. export 导出名与导入名必须一致，export default导入名可以自定义；例如下：

  //  - export导出的,命名要保持一致
  import {aa , b , c} from './moduleb.js';
  //  - export导出的，命名可以自定义；
  import myfn from './moduleb.js';
  

3. 导入方式：关键字 import

• 通配符 " * "方式导入

  import * as obj from './moduleb.js';
  

• 按需导入（延迟导入）
  ​ import 方法；

  document.onclick =async function(){
      // import {fn1} from  './fn.js';
      let res = await import("./fn.js");
      console.log(res);
  }
  

六、 王者荣耀英雄选择案例在下一篇

七、 总结

• 懒得写总结了呜呜呜
• 还是希望可以帮到大家~