面向对象01 -基础知识汇总(什么是类、其中的extend、super、静态方法和属性等;案例分享)
程序员文章站
2022-06-10 14:50:44
面向对象01一、ES6中类的使用1. ES6中的类的写法2. 说明:二、 静态方法和属性:实例不会继承的属性和方法1. 写法:2. 说明三、 私有和公有1. 说明2. 写法四、ES6中继承extends、super1. 写法2. 说明五、 ES6中模块化import、export1. ESM模块化说明2. 导出关键字 *export*王者荣耀英雄选择案例总结一、ES6中类的使用1. ES6中的类的写法 class Person{ height="178cm"; con...
面向对象01
一、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. 说明:
- 相比于ES5,类的写法算是一块语法糖,可以直接使用class声明类,类里面写构造函数,可以向类添加属性和方法。
- 声明的类的类型经过console.log打印验证后是Object;我理解的是:万物皆可对象嘛,函数可以是对象,方法也可以是对象,所以声明的Person类很像函数,所以其类型是Object。
- 注意 class 后面的类名不需要()
- 需要注意的是,类的方法例如 getName 是添加在 _prototype_原型上的,方法添加在原型上执行效率更高。
- 类声明好后,需要使用new方法进行实例化才可以使用。
二、 静态方法和属性:实例不会继承的属性和方法
1. 写法:
class Person{
//静态方法
static hobby(){
console.log("喜欢篮球");
}
}
//静态属性
Person.height = "178cm";
//通过类来调用
Person.hobby();
console.log(Person.height);
2. 说明
- ES6中提供修饰符 static 来声明静态属性和方法
- 静态属性和静态方法不需要通过实例化来调用,只需要通过类来调用
- static什么时候用到呢?当这个属性只跟这个类相关,而跟所有实例化对象都没什么关系的时候,就可以用static声明静态属性。
–
例如,我实例化两个Person对象,分别为张三和李四,我需要统计一共实例化了多少个对象,此时可以使用static声明一个num属性;每调用一次constructor方法,就num++;则可以实现。(使用全局变量也可以做到,但一般不推荐,因为全局变量很容易被污染)
三、 私有和公有
1. 说明
- ES6中不像Java或者其他语言那样分的很细,使用public、private等等
- 就使用关键字 # ,带#号的就为私有,无法被获取和调用
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. 说明
- 使用关键字 extends 来声明继承;子类 Son 继承父类 Dad
- 使用关键字 super 来继承父类的属性和方法,注意,在子类中,super一定要放在子类自己的this之前,即先继承再创造自己的属性;否则会报错。
- super 就相当于是执行了父类的 constructor 方法
- js 中只支持 爷爷-爸爸-儿子 这种的多层继承,也支持一个爸爸多个儿子;不支持一个儿子两个爸爸这种多类继承,但有些其他的语法可以。
- 如果想加强父类中的某些方法,也可以通过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); }
六、 王者荣耀英雄选择案例在下一篇
七、 总结
- 懒得写总结了呜呜呜
- 还是希望可以帮到大家~
本文地址:https://blog.csdn.net/Cathy_2000/article/details/114269875
上一篇: 无源汇有上下界可行流(网络流进阶)