ES6-10的整理笔记，仅为梳理知识体系，回头查阅方便。本节（class类）
class类
Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。摘自阮一峰老师语录
class声明
ES5的JavaScript中只有对象，想要模拟类去生成一个对象实例，只能通过定义一个构造函数，然后通过new操作符来完成。
let Animal = function (type) {
this.type = type
}
Animal.prototype.walk = function () {
console.log(`I am walking`)
}
let dog = new Animal('dog')
let monkey = new Animal('monkey')
//构造函数生成实例的执行过程
1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;ES6引入了Class(类)这个概念，通过class关键字可以定义一个类
class Animal {
constructor (type) {
this.type = type
}
walk () {
console.log(`I am walking`)
}
}
let dog = new Animal('dog')
let monkey = new Animal('monkey')但是Class的类型还是function，并且console.log(Animal.prototype);结果几乎是一样的，所以可以认为class声明类的方式是function声明类方式的语法糖。甚至在class声明类后仍可使用ES5的方式来为这个类添加，覆盖方法。
console.log(typeof Animal); //function
ES5中打印的console.log(Animal.prototype)
//{eat: ƒ, constructor: ƒ}
//eat: ƒ ()
//constructor: ƒ (type)
//__proto__: Object
ES6中打印的console.log(Animal.prototype)
//{constructor: ƒ, eat: ƒ}
//constructor: class Animal
//eat: ƒ eat()
//__proto__: Object
除了constructor后边分别是f(type)和class Animalclass不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。
//ES5可以先使用再定义,存在变量提升
new A();
function A(){
}
//ES6不能先使用再定义,不存在变量提升 会报错
new B();//B is not defined
class B{
}Setters&Getters
类中的属性，可以直接在constructor中通过this直接定义，还可以通过get/set直接在类的顶层定义
class Animal {
constructor (type, age) {
this.type = type
this._age = age
}
get age () {
return this._age
}
set age (val) {
this._age = val
}
}get可以定义一个只读属性
class Animal {
constructor (type) {
this.type = type
}
get addr () {
return '北京动物园'
}
}get/set可以进行一些简单封装，如下
class CustomHTMLElement {
constructor (element) {
this.element = element
}
get html () {
return this.element.innerHTML
}
set html (value) {
this.element.innerHTML = value
}
}get/set还可以模拟设置私有属性，并可以通过get和set对获取属性和读取属性进行一些逻辑判断
let _age = 4
class Animal{
constructor(type) {
this.type = type
}
get age() {
if(this.type == 'dog'){
return _age
}else{
return "I don't know"
}
}
set age(val){
if(val<7&&val>4){
_age = val
}
}
eat () {
console.log('i am eat food')
}
}
let dog = new Animal('dog')
let cat = new Animal('cat')
console.log(dog.age)//4
console.log(cat.age)//I don't know 在get age中只有dog能拿到_age
dog.age = 6
console.log(dog.age)//6
dog.age = 8
console.log(dog.age)//6 在set age中传入参数必须小于7大于4才能生效继承
ES5中继承的实现
// 定义父类
let Animal = function (type) {
this.type = type
}
// 定义方法
Animal.prototype.walk = function () {
console.log(`I am walking`)
}
// 定义静态方法
Animal.eat = function (food) {
console.log(`I am eating`)
}
// 定义子类
let Dog = function () {
// 初始化父类
Animal.call(this, 'dog')
this.run = function () {
console.log('I can run')
}
}
// 继承
Dog.prototype = Animal.prototypeES6中通过extends关键字实现继承。
子类必须在constructor方法中调用super方法，之后才能使用this关键字，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象。如果不调用super方法，子类就得不到this对象。在这一点上ES5的继承与ES6正好相反，ES5先创建自己的this对象然后再将父类的属性方法添加到自己的this当中。
如果子类没有显式的定义constructor，那么下面的代码将被默认添加(不信可以尝试下，哈)。换言之，如果constructor函数中只有super的话，该constructor函数可以省略。
class Animal {
constructor (type) {
this.type = type
}
walk () {
console.log(`I am walking`)
}
static eat () {
console.log(`I am eating`)
}
}
class Dog extends Animal {
constructor () {
super('dog')
}
run () {
console.log('I can run')
}
}静态方法 static Methods&静态属性
静态方法是面向对象最常用的功能，在ES5中利用function实现的类是这样实现一个静态方法的
let Animal = function (type) {
this.type = type
this.walk = function () {
console.log(`I am walking`)
}
}
Animal.eat = function (food) {
console.log(`I am eating`);
}在ES6中使用static的比纳基是不是静态方法
class Animal {
constructor (type) {
this.type = type
}
walk () {
console.log(`I am walking`)
}
static eat () {
console.log(`I am eating`)
}
}静态方法不需要实例化可以直接通过类调用
class Animal{
static a(){
return "我是Animal类中的，实例方法，无须实例化，可以直接调用"
}
}
//通过类名直接调用
console.log(Animal.a());//我是Animal类中的，实例方法，无须实例化，可直接调用！静态方法只能在静态方法中调用，不能在实例方法中调用
class Animal{
static a(){
return "我只允许被静态方法调用哦！"
}
static b(){
//通过静态方法b来调用静态方法a
console.log(this.a());
}
}
Animal.b();//输出：我只允许被静态方法调用通过实例方法来调用静态方法会报错
class Animal{
static a(){
return "我只允许被静态方法调用哦！"
}
b(){
console.log(this.a());//TypeError: this.a is not a function
}
}
var obj=new Animal();
obj.b();
//其他地方想要调用静态方法可借助类来调用，如使用Animal.b()
class Animal{
static a(){
return "我只允许被静态方法调用哦！"
}
static b(){
//通过静态方法b来调用静态方法a
console.log(this.a());
}
c(){
console.log(Animal.b())
}
}
Animal.b();//输出：我只允许被静态方法调用
let dog = new Animal()
Animal.c()////输出：我只允许被静态方法调用父类的静态方法，可以被子类继承
class Animal {
static a() {//父类Animal的静态方法
return '我是父类的静态方法a';
}
}
class Dog extends Animal {}
//子类Dog可以直接调用父类的静态方法a
console.log(Dog.a());想通过子类的静态方法调用父类的静态方法，需要从super对象上调用
class Animal {
static a() {
return '我是通过super来调取出来的';
}
}
class Dog extends Animal {
static a(){
return super.a();
}
}
console.log(Dog.a()); //我是通过super来调取出来的静态属性指的是 Class 本身的属性， 即Class.propname， 而不是定义在实例对象（ this） 上的属性。
class Animal{
constructor(){
this.name="实例属性"
}
}
Animal.prop1="静态属性1";
Animal.prop2="静态属性2";
console.log(Animal.prop1,Animal.prop2);//静态属性1 静态属性2类的应用场景
前端各种框架起飞，基本不需要去使用类来实现或者完善前端页面功能，在服务端写node.js的话可能会经常使用类语法。
下方代码是用类实现在同一个页面设置多个分页列表。（这个功能多数UI框架也解决了。。。）
class PageUtil{
constructor(pageNo,pageSize,total){ //构造初始变量
this.pageNo = pageNo; //起始页面
this.pageSize = pageSize //一页数据条数
this.total = total //数据总数
this.currentPage = 0 //当前选中页数
this.pageTotal = Math.ceil(this.total/this.pageSize) //总页数
}
nextPage(){ //下一页
if(this.currentPage < this.pageTotal){
this.currentPage++
}
}
beforePage(){ //上一页
if(this.currentPage > 1){
this.currentPage--
}
}
jumpPage(page){ //跳页
this.currentPage = page
}
changePageSize(pageSize){ //改变页大小
this.pageSize = pageSize
this.pageTotal = Math.ceil(this.total/this.pageSize) //总页数
}
getTotalPage(){ //获取总页数
return Math.ceil(this.total/this.pageSize)
}
}
class DialogPage extends PageUtil{ //继承PageUtil类
constructor(pageNo,pageSize,total,pageTotal){
super(pageNo,pageSize,total)
this.pageTotal = pageTotal
}
getTotalPage(){
return this.pageTotal || super.getTotalPage() //重写getTotalPage方法
}
}
const contentPage = new PageUtil(1,10,100) //实例化2个pageUtil对象
contentPage.getTotalPage()
console.log(contentPage.currentPage)
contentPage.nextPage()
console.log(contentPage.currentPage)
const dialogPage = new DialogPage(1,10,100,10)
console.log(dialogPage.currentPage)
dialogPage.getTotalPage()实现一个类具有Push，PoP功能
class Myarray {
constructor(arr) {
this.arr = arr;
}
myPop() {
if (this.arr.length === 0) return undefined;
return Number(this.arr.splice(this.arr.length - 1, 1))
}
myPush() {
let _this = this;
Array.from(arguments, el => _this.arr.splice(_this.arr.length, 0, el))
return this.arr.length;
}
}
let arr = Array.of(1, 5, 6, 7, 8)
let myArray = new Myarray(arr);
console.log(myArray.myPop(), arr)
console.log(myArray.myPush(null), arr)
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
