首页 ES6 正文
ES6 class类

 2023-11-13    78  

    前提:

       在ES6中,class 作为对象的模板被引入,可以通过 class 关键字定义类,其实可以理解为函数,class类主要是针对于原型的一种语法糖写法,比原生的写法更清晰明了。

使用class类定义:

类表达式   可以通过匿名方式或者命名方式 代码如下:
image.png

然后通过status进行使用 先对类进行实例  传入值为1 进行打印

image.png

预览:
image.png

类声明和注意事项:

这里就可以将class当做function来看待 进行声明

image.png

不过使用class去命名的时候 名字不可以进行重复声明

image.png

报错:
image.png

在使用时 通过class类定义的跟新增的let const 相同 不存在变量提升 所以在使用的时候 需要先定义再使用 以及在定义方法之后 尾部不能添加分号  

image.png

类的的属性:

虽然通过class类 可以更简便的去使用原型 但是在 ,ES6中仍然可以去使用prototype来进行操作 对方法的覆盖或者初始化添加新的方法 例如:

使用prototype
image.png

添加方法:
image.png

静态属性:
class 本身的属性,即直接定义在类内部的属性,不需要实例化。在ES6 中规定,Class 内部只有静态方法,没有静态属性。

image.png

公共属性:
image.png

实例属性:

定义在当前实例对象指向(this)上的属性:
image.png

name 属性:

返回跟在 class 后的类名 当class后面没有类名时 name则打印出变量名

image.png

class类中的方法:
constructor()方法是类的默认方法,创建类的实例化对象时被调用 例如:
image.png

在方法中返回对象 默认的情况下是返回当前this

image.png

如果是在方法中定义了 指定的返回对象 打印自身则会报错

image.png

静态方法:

在默认的方法中 定义俩个形参 在里面对俩个参数进行相加 并打印在控制台上面 
image.png

原型方法:
image.png

实例方法:

image.png

继承与封装:

getter/setter 使用:

错误操作:

image.png

正确:

image.png

这里我们要注意在书写的过程中 getter是不可以单独使用 而且在对getter和setter 进行使用时 必须将他们 写在同一个层级当中

单独书写getter:

image.png

不同层级书写:

在这里我们使用了class类中的继承extends stater继承state 并且在默认方法中 使用super方法 且在使用的·同时 必须出现在this之前 

image.png

预览:

image.png

  •  标签:  

原文链接:http://1.15.94.33/?id=201

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台,请勿相信其他任何渠道。