当前位置: 萬仟网 > IT编程>软件设计>面向对象 > 面向对象01 -基础知识汇总(什么是类、其中的extend、super、静态方法和属性等;案例分享)

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

2021年03月01日  | 萬仟网IT编程  | 我要评论
面向对象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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • 基础知识--系列目录

    1.基础知识--封装、继承、多态、抽象 2.基础知识 const、readonly、static 3.基础知识 IEnumerable、IColle... [阅读全文]
  • javaScript真值和假值以及相等操作符

    javaScript真值和假值以及相等操作符

    真值和假值 相等操作符(==和 ) 下面分析一下不同类型的值用相等操作符(==)比较后的结果 toNumber 对不同 类型返回的结果如下: toP... [阅读全文]
  • ES6——对象

    ES6——对象

    对象一、新增语法1.成员速写2.方法速写3.计算属性名二、对象新增API1.Object.is2.Object.... [阅读全文]
  • Spring Boot Dubbo 构建分布式服务

    Spring Boot Dubbo 构建分布式服务

    概述: 节点角色说明 | 节点 | 角色说明 | | | | | Provider | 暴露服务的服务提供方 | | Consumer | 调用远程... [阅读全文]
  • Java多线程问题总结

    前言 Java多线程分类中写了21篇多线程的文章,21篇文章的内容很多,个人认为,学习,内容越多、越杂的知识,越需要进行深刻的总结,这样才能记忆深刻... [阅读全文]
  • java核心技术-多线程之线程基础

    java核心技术-多线程之线程基础

    说起线程,无法免俗首先要弄清楚的三个概念就是:进程、线程、协程。OK,那什么是进程,什么是线程,哪协程又是啥东西。进程:进程可以简单的理解为运行在操... [阅读全文]
  • python面向对象(封装、继承、多态)+ 面向对象小栗子

    python面向对象(封装、继承、多态)+ 面向对象小栗子

    大家好,下面我说一下我对面向对象的理解,不会讲的很详细,因为有很多人的博客都把他写的很详细了,所以,我尽可能简单的通过一些代码让初学者可以理解面向对... [阅读全文]
  • 使用面向对象抽取业务算法

    使用面向对象抽取业务算法

    描述 前面我们已经对领域内的名词进行了抽取,并且已经确定了业务流程中参与的核心对象。 但是对象只是静态的描述,系统中往往会有很多的业务操作,偏算法的... [阅读全文]
  • 数据库技术课程复习1---基本概念和E-R图

    数据库技术课程复习1---基本概念和E-R图

    1.两大类数据模型数据模型分为两类(分属两个不同的层次)(1)概念模型概念模型也称信息模型,它是按用户的观点来对... [阅读全文]
  • 面向对象的理解

    这个是我对面向对象的理解,理解有误请喷我吧!菜鸟一枚! 用最简单的方式,去办最复杂的是,看字面意思理解面向对象,就是先要面向找到需要面向的东西,把所... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com