我们在ES5中经常使用方法或者对象去模拟类的使用，虽然可以实现功能，但是代码并不优雅，ES6为我们提供了类的使用。
需要注意的是我们在写类的时候和ES5中的对象和构造函数要区分开来，不要学混了。
类的声明
先声明一个最简单的coder类，类里只有一个name方法，方法中打印出传递的参数。
class coder{
name(val){
console.log(val);
}
}
类的使用
我们已经声明了一个类，并在类里声明了name方法，现在要实例化类，并使用类中的方法。
class Person {
name = "hello word";
getName() {
return this.name;
}
}
const person = new Person();
console.log(person.getName()); // hello word
变量提升
const let class 不支持变量提升
例如 下面 运行 第一个console 输出a是会报错的
var a = 1;
function test() {
console.log(a);
class a {}
console.log(a);
}
test(); // 相当于 window.test()
类的多方法声明
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('js')+':'+'Skill:'+val);
}
}
let zachary= new Coder();
zachary.name('js');
zachary.skill('web');
需要注意的是两个方法中间不要写逗号了，这里的this指类本身，注意return 的用法。
类的传参
在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('js')+':'+'Skill:'+val);
}
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let zachary=new Coder(1,2);
console.log(zachary.add());
我们用constructor来约定了传递参数，然后用作了一个add方法，把参数相加。这和以前我们的传递方法有些不一样，所以需要多注意下。
class的继承
如果你学过java，一定知道类的一大特点就是继承。ES6中也就继承，在这里我们简单的看看继承的用法。
class Person {
name = "hello word";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTname() {
return "xx老师";
}
}
const teacher = new Teacher();
console.log(teacher.getName(), teacher.getTname()); // hello word xx老师
重写（子类可以重写父类的东西）
class Person {
name = "hello word";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTname() {
return "xx老师";
}
getName() { // 重写父类的getName方法
return "909";
}
}
const teacher = new Teacher();
console.log(teacher.getName(), teacher.getTname()); // 909 xx老师
super 执行extends继承过来的父类方法
如果子类调用constructor，那么子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，
而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
在构造函数中使用时，super关键字单独出现，必须在可以使用this关键字之前使用。此关键字也可用于调用父对象上的函数。
super拥有父类的全部方法
使用场景就是当子类重写了父类的方法 但覆盖后还想调用父类的方法就可以使用super
class Person {
name = "hello word";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTname() {
return "xx老师";
}
getName() {
return super.getName() + " 909";
}
}
const teacher = new Teacher();
console.log(teacher.getName(), teacher.getTname()); // hello word 909 xx老师
get和set的使用
// 错误写法
class Phone {
constructor(p) {
this.p = p;
}
get p() {
return 999;
}
}
let newPhone = new Phone(888);
console.log(newPhone.p);
// 正确写法
class Phone {
constructor(p) {
this.p = p;
}
get p() {
return 999;
}
set p(newVal) {
console.log("新值", newVal);
}
}
let newPhone = new Phone(888);
console.log(newPhone.p);
说明：class的set和get是成对存在的 和Object.defineProperty一样成对存在 少一个就会报错
使用实例
class BaseModel {
constructor(data,message){
if(typeof data === 'string'){
this.message = data
data = null
message = null
}
if(data){
this.data = data
}
if(message){
this.message = message
}
}
}
class SuccessModel extends BaseModel{
constructor(data,message){
super(data,message)
this.error = 0
}
}
class ErrorModel extends BaseModel{
constructor(data,message){
super(data,message)
this.error = -1
}
}
module.exports = {
SuccessModel,
ErrorModel
}
大致就是 两处不同的error错误状态不一样 一个-1一个0
但是结构是一样的所以 可以共用父级结构
先继承父级结构 之后通过子类DIY
class coders {
constructor(a, b) {
this.a = a;
this.b = b;
}
name() {
return this.a + this.b;
}
}
class childer extends coders {
constructor(a, b) {
super(a, b);
this.c = 3;
}
}
let code = new childer(1, 2);
console.log(code); // childer { a: 1, b: 2, c: 3 }
类的扩展延伸
// jQuery就是一个class类
// 里面的经典获取元素$() 就是jquery的一个实例化
// 就是下面这样封装的
window.onload = function () {
window.$ = function (dom) {
return document.querySelector(dom)
}
$('#box').style.cssText = "width:20px;height:20px;border:solid 1px red;"
}
/* 写在class中 */
class jQuery {
constructor(select) {
let slice = Array.prototype.slice
// 操作变成数组 因为可能是多个节点 下面两种方式都可
// let dom = slice.call(document.querySelectorAll(select))
let dom = Array.from(document.querySelectorAll(select))
let len = dom ? dom.length : 0
for (let i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len
this.select = select || ''
}
append(node) {
}
addClass(name) {
}
html(data) {
}
/* 省略若干API */
}
window.onload = function () {
window.$ = function (select) {
// 工厂模式
return new jQuery(select)
}
console.log($('li')[0])
}
嵌套使用
class Car {
constructor(number, name) {
this.number = number
this.name = name
}
}
class Kuaiche extends Car {
constructor(number, name) {
super(number, name)
this.price = 1
}
}
class Zhuanche extends Car {
constructor(number, name) {
super(number, name)
this.price = 2
}
}
class Trip {
constructor(car) {
this.car = car
}
start() {
console.log(`行程开始，名称: ${this.car.name}, 车牌号: ${this.car.price}`)
}
end() {
console.log('行程结束，价格: ' + (this.car.price * 5))
}
}
let car = new Kuaiche(5, '宝来')
let trip = new Trip(car)
trip.start()
trip.end()
