当前位置: 首页 > news >正文

JS【详解】类 class ( ES6 新增语法 )

本质上,类只是一种特殊的函数。

console.log(typeof 某类); //"function"

声明类 class

方式 1 – 类声明

class Car {constructor(model, year) {this.model = model;this.year = year;}
}

方式 2 – 类表达式

匿名式

const Car = class {constructor(model, year) {this.model = model;this.year = year;}
}

命名式 —— 类名称在表达式定义的内部有效,在外部无法使用

const NamedCar = class Car {constructor(model, year) {this.model = model;this.year = year;}getName() {return Car.name;}
}
const ford = new NamedCar();
console.log(ford.getName()); // Car
console.log(ford.name); // 引用错误: name未定义

构造函数 constructor

每个类只能存在一个,在构造器中可以通过super()方法来调用其父类的构造器。

类的属性(原型方法)

支持表达式命名,以下三种效果相同:

class CarOne {driveCar() {}
}
class CarTwo {['drive' + 'Car']() {}
}
const methodName = 'driveCar';
class CarThree {[methodName]() {}
}

类的修饰符

  • get 获取类的属性值
  • set 修改类的属性值
class Obj {c="我是原生的a,只是需要在this.c暂时存储",get a(){return this.c   },set a(val){this.c=val}
}const obj = new Obj()

使用类 new

class Car {constructor(model, year) {this.model = model;this.year = year;}
}
const fiesta = new Car('Fiesta', '2010');

类的继承 extends

class Animal {constructor(name) {this.name = name;}speak() {console.log(this.name + ' generic noise');}
}
class Cat extends Animal {speak() {console.log(this.name + ' says Meow.');}
}
class Lion extends Cat {speak() {super.speak();console.log(this.name + ' Roars....');}
}
var l = new Lion('Lenny');
l.speak();
//"Lenny says Meow."
//"Lenny Roar...."
  • 子类内通过 super 调用父类

在子类的构造器中,必须先调用super()方法才能正确地获取到this关键字

class Base {}
class Derive extends Base {constructor(name) {this.name = name; //'this' 不允许在 super()之前}
}

子类中,如果定义了构造器,则必须在其中调用super()方法,否则会报错

class Base {}
class Derive extends Base {constructor() { //在构造器中没有调用super()方法}
}
  • 父类默认构造器
constructor(){}
  • 子类默认构造器
constructor(...args){super(...args);
}

多重继承

JavaScript本身不支持多重继承,在ES6中实现mixin的一种比较流行的实现方式是编写输入为父类输出为子类的函数,例如:

class Person {}
const BackgroundCheck = Tools => class extends Tools {check() {}
};
const Onboard = Tools => class extends Tools {printBadge() {}
};
class Employee extends BackgroundCheck(Onboard(Person)) {
}

Employee类依次顺序继承了BackgroundCheck类、Onboard类和Person类。

类和普通函数的区别

  • 类必须先声明,再使用
var ford = new Car(); //引用错误
class Car {}
  • 普通函数可用先使用,再声明
normalFunction();   //先使用
function normalFunction() {}  //后声明

【面试题】手写 class

https://blog.csdn.net/weixin_41192489/article/details/139442546

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Golang | Leetcode Golang题解之第227题基本计算器II
  • 架构面试-场景题-单点登录(SSO)怎么实现的
  • ELK日志分析系统概述及部署
  • x264 编码器 AArch64 汇编函数模块关系分析
  • 【数据结构】排序——快速排序
  • 计算机网络体系结构解析
  • 微生活服务平台与元宇宙的融合
  • 《长相思》第二季回归:好剧质量,永恒的王牌
  • 常用录屏软件,分享这四款宝藏软件!
  • C++ STL iter_swap用法和实现
  • 视频汇聚平台EasyCVR设备录像回看请求播放时间和实际时间对不上,是何原因?
  • FPGA设计之跨时钟域(CDC)设计篇(2)----如何科学地设计复位信号?
  • Conda:Python环境管理的瑞士军刀
  • Oracle基础以及一些‘方言’(一)
  • 【C++】AVL树(旋转、平衡因子)
  • 深入了解以太坊
  • 0x05 Python数据分析,Anaconda八斩刀
  • Apache Spark Streaming 使用实例
  • CentOS6 编译安装 redis-3.2.3
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • PHP的类修饰符与访问修饰符
  • scrapy学习之路4(itemloder的使用)
  • spark本地环境的搭建到运行第一个spark程序
  • STAR法则
  • 从PHP迁移至Golang - 基础篇
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 简单基于spring的redis配置(单机和集群模式)
  • 码农张的Bug人生 - 见面之礼
  • 前端面试之CSS3新特性
  • 如何实现 font-size 的响应式
  • 使用 Docker 部署 Spring Boot项目
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 学习Vue.js的五个小例子
  •  一套莫尔斯电报听写、翻译系统
  • 智能网联汽车信息安全
  • ​ArcGIS Pro 如何批量删除字段
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • #1015 : KMP算法
  • (+4)2.2UML建模图
  • (vue)el-tabs选中最后一项后更新数据后无法展开
  • (备份) esp32 GPIO
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (南京观海微电子)——COF介绍
  • (三)elasticsearch 源码之启动流程分析
  • (一)Java算法:二分查找
  • (一)Kafka 安全之使用 SASL 进行身份验证 —— JAAS 配置、SASL 配置
  • (一)项目实践-利用Appdesigner制作目标跟踪仿真软件
  • (转)一些感悟
  • .net 8 发布了,试下微软最近强推的MAUI
  • .NET 动态调用WebService + WSE + UsernameToken
  • .net 流——流的类型体系简单介绍
  • .NET上SQLite的连接
  • /etc/shadow字段详解
  • @autowired注解作用_Spring Boot进阶教程——注解大全(建议收藏!)