当前位置: 首页> 科技> 名企 > JS【详解】类 class ( ES6 新增语法 )

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

时间:2025/9/8 13:56:56来源:https://blog.csdn.net/weixin_41192489/article/details/140329858 浏览次数:0次

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

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() {}  //后声明

关键字:JS【详解】类 class ( ES6 新增语法 )

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: