当前位置: 首页 > 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

http://www.lryc.cn/news/400526.html

相关文章:

  • vue中使用$set方法给对象添加属性
  • 【Python】ftplib的使用
  • CSS 【详解】CSS 函数(含 calc,min,max,clamp,cubic-bezier,env,steps 等)
  • 简单理解Lua 协程(coroutine)
  • (day18) leetcode 204.计数质数
  • SadTalker数字人服务器部署
  • Python实现一对多WebSocket发送给指定多个客户端
  • Power BI 工具介绍
  • 银河麒麟高级服务器操作系统V10加固操作指南
  • (leetcode学习)15. 三数之和
  • 算法训练 | 图论Part8 | 117. 软件构建、47. 参加科学大会
  • 编程从零基础到进阶(更新中)
  • MySQL运维实战之ProxySQL(9.6)SQL黑名单
  • 深入了解MySQL中的innodb_lock_wait_timeout
  • 102.qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互使用教程
  • 文章管理小程序的设计
  • Ubuntu22.04安装NIVIDIA显卡驱动总结
  • Redis的配置优化、数据类型、消息队列
  • 数据结构之初始二叉树(2)
  • 如何预防最新的baxia变种勒索病毒感染您的计算机?
  • git列出提交记录的文件路径
  • 微信小程序密码 显示隐藏 真机兼容问题
  • C# 中,使用 LINQ 示例 备忘
  • GaussDB DWS 详解
  • 【256 Days】我的创作纪念日
  • 3D云渲染工具对决:Maya与Blender的性能和功能深度比较
  • spring.factories详解
  • 从Docker Hub 拉取镜像一直失败超时?这些解决方案帮你解决烦恼
  • 【pbootcms】新环境搭建环境安装时发生错误
  • C语言之qsort函数