ES6：Class类的知识补充

Posted 2021-10-22 还是不会呀

Class类的知识补充

• • 扩展内置类
  • JS中实现混入
  • JS面向对象：多态

扩展内置类

扩展JS内置的类

// 获取数组第一个位置的元素和最后一个元素
// 但是js并没有直接操作的方法,可以这样：
class MsiArray extends Array {
  getFirstItem() {
    return this[0];
  }
  getLastItem() {
    return this[this.length - 1];
  }
}
// 例子：
const arr = new MsiArray(1, 2, 3, 4, 5);
console.log(arr.getFirstItem()); // 1
console.log(arr.getLastItem()); // 5

JS中实现混入

在ES6中的Class内，实现继承是单继承，只能有一个父类，通过混入可以获取多个类上的方法

// class Person {
//   sleepping() {
//     console.log("sleepping~");
//   }
// }

// class Son {
//   roles() {
//     console.log("I am a son~");
//   }
// }
// 继承Person，但是又想获得Son上的方法
// class Student extends Person {}

// 继承 Son，但是又想获得Person上的方法
// class Student extends Son {}
class Student {}

function mixinPerson(classType) {
  return class extends classType {
    sleepping() {
      console.log("sleepping~");
    }
  };
}
function mixinSon(classType) {
  return class extends classType {
    roles() {
      console.log("I am a son~");
    }
  };
}
const student = new (mixinSon(mixinPerson(Student)))();
student.sleepping(); // sleepping~
student.roles(); // I am a son~

JS面向对象：多态

不同的数据类型进行相同的操作，但表现得结果不一致，这就是多态

// 例子：
class Person {
  say() {
    console.log("Person say~");
  }
}

class Student extends Person {
  say() {
    console.log("Student say~");
  }
}

class Teacher extends Person {
  say() {
    console.log("Teacher say~");
  }
}

function toSay(p) {
  if ("say" in p) {
    p.say();
  }
}
const stu = new Student();
const tea = new Teacher();
toSay(stu); // Student say~
toSay(tea); // Teacher say~