欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

面向对象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...

一、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);
    }
    

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

七、 总结

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

本文地址:https://blog.csdn.net/Cathy_2000/article/details/114269875