es6新特性------学好类(class)这一篇就够了
文章目录
- 类和构造函数
- 省略构造函数
- 继承
- 封装
类和构造函数
你可以使用 class
关键字声明一个类。下面是关于 Person 类的一个声明:
class Person {name;constructor(name) {this.name = name;}introduceSelf() {console.log(`Hi! I'm ${this.name}`);}}
在这个 Person 类的声明中,有:
- 一个
name
属性。 - 一个需要
name
参数的构造函数,这一参数用于初始化新的对象的 name 属性。 - 一个
introduceSelf()
方法,使用 this 引用了对象的属性。
name
; 这一声明是可选的:你可以省略它,因为在构造函数中的
this.name = name;
这行代码会在初始化 name
属性前自动创建它。但是,在类声明中明确列出属性可以方便阅读代码的人更容易确定哪些属性是这个类的一部分。
你也可以在声明属性时,为其初始化一个默认值。就像这样:
name = '';
构造函数使用 constructor
关键字来声明。就像在类声明外的构造函数一样,它会:
- 创建一个新的对象
- 将 this 绑定到这个新的对象,你可以在构造函数代码中使用 this 来引用它
- 执行构造函数中的代码
- 返回这个新的对象
如上文中给出的类声明的代码,你可以像这样创建和使用一个新的 Person 实例:
const giles = new Person('Giles');giles.introduceSelf(); // Hi! I'm Giles
注意,我们使用类的名字来调用构造函数,即示例中的 Person。
省略构造函数
如果你不需要任何特殊的初始化内容,你可以省略构造函数,默认的构造函数会被自动生成:
class Animal {sleep() {console.log('zzzzzzz');}}const spot = new Animal();spot.sleep(); // 'zzzzzzz'
继承
对于上文给出的 Person 类,我们声明一个它的子类 Professor。
class Professor extends Person {teaches;constructor(name, teaches) {super(name);this.teaches = teaches;}introduceSelf() {console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);}grade(paper) {const grade = Math.floor(Math.random() * (5 - 1) + 1);console.log(grade);}}
我们使用 extends
关键字来声明这个类继承自另一个类。
我们为 Professor 类添加了一个新的属性 teaches,
就像声明的那样。
因为我们想在创建新的 Professor 时设置 teaches,我们需要声明一个需要 name
和 teaches
参数的构造函数。构造函数中需要做的第一件事是使用 super()
调用父类的构造函数,并传递 name
参数。父类的构造函数会设置 name
属性。然后 Professor 的构造函数接着设置 teaches
属性。
备注: 如果子类有任何自己的初始化内容需要完成,它也必须先使用 super()
来调用父类的构造函数,并传递父类构造函数期望的任何参数。
我们还覆盖了父类的 introduceSelf() 方法
,并添加了一个新的方法 grade(),
来为论文打分(我们的教授不是很好,只是随意地为论文打分)。
有了这个声明,我们现在可以创建和使用 professor 实例了:
const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf(); // 'My name is Walsh, and I will be your Psychology professor'walsh.grade('my paper'); // some random grade
封装
最后,让我们了解一下 JavaScript 中如何实现封装。
这里,就像我们之前想要的那样,声明了 Student 类:
私有属性
class Student extends Person {#year;constructor(name, year) {super(name);this.#year = year;}introduceSelf() {console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);}canStudyArchery() {return this.#year > 1;}}
在这个类的声明中,#year
是一个私有数据属性。我们可以构造一个 Student 对象,然后在内部使用 #year,但如果在类的外部尝试访问 #year,浏览器将会抛出错误:
const summers = new Student('Summers', 2);summers.introduceSelf(); // Hi! I'm Summers, and I'm in year 2.
summers.canStudyArchery(); // truesummers.#year; // SyntaxError
私有数据属性必须在类的声明中声明,而且其名称需以 # 开头。
私有方法
与私有数据属性一样,你也可以声明私有方法。而且名称也是以 # 开头,只能在类自己的方法中调用:
class Example {somePublicMethod() {this.#somePrivateMethod();}#somePrivateMethod() {console.log('You called me?');}}const myExample = new Example();myExample.somePublicMethod(); // 'You called me?'myExample.#somePrivateMethod(); // SyntaxError
es6新特性------学好类(class)这一篇就够了相关推荐
- 尚硅谷es6新特性笔记
尚硅谷es6新特性笔记 一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别 二.变量解构赋值 三.模板字符串 四.对象的 ...
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法?
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...
- ES6新特性----面试
ES6新特性 关键字 let关键字 const关键字 解构赋值 变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 用途 模板字符串 箭头函数 ...
- ES6新特性16-Class
ES6新特性16-Class 文章目录 ES6新特性16-Class 一.Class介绍和初体验 二.class静态成员 三.构造函数继承 四.子类对父类方法的重写 五.get和set 一.Class ...
- ES6新特性总结(2)解构赋值、模板字符串、Symbol
ES6新特性总结(2)解构赋值.模板字符串.Symbol 1 解构赋值 1.1 Spread / Rest 操作符 1.2 数组的解构 1.3 对象的解构 1.4 解构的默认值和参数的解构 2 模板字 ...
- 一文快速掌握 es6+新特性及核心语法
首先先祝各位节日快乐,好好去体验生活的快乐,在假期最后一天里,祝大家收获满满,同时抓住假期的尾巴,收割实用技能. 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了 ...
- es6新增数组、数组去重、es6新特性
ES6新增的数组方法 1.forEach forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第 ...
- html5,css3,es6新特性总结
html5新特性 语义化标签 如:header,footer,nav,dialog 增强型表单 如:date,week,url,time,email,month 视频和音频 audio和video C ...
- H5、CSS3和ES6新特性
CSS3新特性 01 新增语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区 ...
最新文章
- hibernate保存会先insert再update_Hibernate的批处理
- eclipse java jar源码,eclipse查看Jar包源码
- Python中的线性回归:Sklearn与Excel
- Linux命令工具基础02 文件及目录管理
- C#开发 —— 基础知识
- 二月技术通讯.pdf丨核心数据库一波三折异常重启分析
- 【PostgreSQL】PostgreSQL安装步骤
- 在 Windows 下远程桌面连接 Linux - VNC 篇
- 【Flutter从入门到实战】⑰Flutter的主题风格、Theme、DarkTheme暗黑模式、单独给单个页面设置Theme、屏幕适配、屏幕适配工具类封装、Flutter调试使用
- Android之TextView属性大全
- 人物故事 | 回顾美人建筑师,致世界建筑日
- C51单片机学习笔记——秒表
- 数据分析全国薪酬分布状况
- Photoshop小技巧
- 计算机设备替换方案,电脑升级cpu的方案
- 2017 ACM Arabella Collegiate Programming Contest(solved 11/13)
- java自带的发布订阅模式
- matlab读Excel表格数据画图,matlab读Excel表格数据画图-如何利用matlab根据excel表格里面的数据画图...
- 不懂优雅停机,搞挂了线上服务,咋办?
- adonis-rest - 基于AdonisJs的Restful API基础构件