JavascriptClass该怎么用

jiezi

5 年前

类这个东西原来只在我练习面试题和学习 canvas 的时候做一些小游戏时才会用到。直到一天要去读到同事写的代码，发现他大量地用到类。后来又在自学 java 的时候，终于明白。为什么在 es6 Class 终于要被提上进程了。

像我们在用 Vue 写页面的时候，我们会把数据存在 data 中，然后当中存放一些对象数据来代表我们页面中的组件内容。组件来操作这些数据。但当我们的页面内容越来越丰富之后，data 会变得很庞大。当然为了操作这些 data 我们还需要有对应的 methods 来操作。慢慢的这个 vue 文件就会变得越来越难掌握。
这时候假如用 class 的思路想一下，一个组件或者一个局部的页面块。我们用 class 来处理，数据和操作方法存在实例本身。这样不仅减少了代码量。整体项目看起来，把握项目内容的难度也会减少。（其实就是 vue 文件与 Vue 的关系一样）

class 这个其实是语法糖，在我们学习构造函数的时候，我们知道想要做出一样效果，我们需要

function People(name,age){
 this.name = name;
 this.age = age; 
}
// 假如需要添加函数还要
People.prototype.say=function（）{console.log("hello)
}

而 class 为我们提过了一个很简单的写法

    class People{constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){console.log("hello)
        }
    }
    // 创造实例
    let a = new People("tom",23);

注意：class 没有声明提升，声明必须写在前。而构造函数有声明提示。

constructor 用来创建和初始化一个由 class 创建的对象。一个类只能拥有一个名为“constructor”的特殊方法。他用来接受 class 在被创建的时候传入的参。并且他本身负责构建属于他的数据结构。

static 是 class 的静态方法。写法是：

 class Animal {speak() {return this;}
  // 与其他方法同层
  static eat() {return this;}
}

class 里的一般方法，一般用于调用或者修改操作实例里的数据。而静态方法一般与数据关系不大，是一个类的通用方法。调用方法也是直接在类中调用。

    // 一般方法
    let obj = new Animal();
    obj.speak(); // Animal {}
    let speak = obj.speak;
    speak(); // undefined

    // 静态方法
    Animal.eat() // class Animal
    let eat = Animal.eat;
    eat(); // undefined

class 可以继承 class, 就是所谓的大类小类。

// 先创建动物类
class Animal {constructor(name) {this.name = name;}
  
  speak() {console.log(this.name + 'makes a noise.');
  }
}

// 再创建狗类，它继承动物类
class Dog extends Animal {constructor(){super();
    }
  speak() {console.log(this.name + 'barks.');
  }
}

var d = new Dog('Mitzie');
d.speak();// 'Mitzie barks.'

首先，ES6 要求，子类的构造函数必须执行一次 super 函数。而 super 有两种用法。1，做函数。2，做对象。
1.super 虽然代表了父类 A 的构造函数，但是返回的是子类 B 的实例，即 super 内部的 this 指的是 B，因此 super() 在这里相当于 A.prototype.constructor.call(this)。

class A {}

class B extends A {constructor() {super();
  }
}

2. 做对象。做对象时它指向父类的构造函数，可以调用它的静态方法，方法等。

class Human {constructor() {}
  static ping() {return 'ping';}
}

class Computer extends Human {constructor() {}
  static pingpong() {return super.ping() + 'pong';
  }
}
Computer.pingpong(); // 'ping pong'

JavascriptClass该怎么用

class

更好地组织代码

ES6 class

constructor

static

extends

super