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

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

js 复制代码
console.log(typeof 某类); //"function"

声明类 class

方式 1 -- 类声明

js 复制代码
class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }
}

方式 2 -- 类表达式

匿名式

js 复制代码
const Car = class {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }
}

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

js 复制代码
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()方法来调用其父类的构造器。

类的属性(原型方法)

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

js 复制代码
class CarOne {
  driveCar() {}
}
class CarTwo {
  ['drive' + 'Car']() {}
}
const methodName = 'driveCar';
class CarThree {
  [methodName]() {}
}

类的修饰符

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

使用类 new

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

类的继承 extends

js 复制代码
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关键字

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

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

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

多重继承

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

js 复制代码
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类。

类和普通函数的区别

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

【面试题】手写 class

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

相关推荐
可以给我一百万吗8 分钟前
黑马Node.js全套入门教程,nodejs新教程含es6模块化+npm+express+webpack+promise等_ts对象笔记
npm·node.js·es6
挽淚23 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴24 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte27 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
今禾31 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
南篱35 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
coding随想1 小时前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子2 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html