共计 1848 个字符,预计需要花费 5 分钟才能阅读完成。
class
类这个东西原来只在我练习面试题和学习 canvas 的时候做一些小游戏时才会用到。直到一天要去读到同事写的代码,发现他大量地用到类。后来又在自学 java 的时候,终于明白。为什么在 es6 Class 终于要被提上进程了。
更好地组织代码
像我们在用 Vue 写页面的时候,我们会把数据存在 data 中,然后当中存放一些对象数据来代表我们页面中的组件内容。组件来操作这些数据。但当我们的页面内容越来越丰富之后,data 会变得很庞大。当然为了操作这些 data 我们还需要有对应的 methods 来操作。慢慢的这个 vue 文件就会变得越来越难掌握。
这时候假如用 class 的思路想一下,一个组件或者一个局部的页面块。我们用 class 来处理,数据和操作方法存在实例本身。这样不仅减少了代码量。整体项目看起来,把握项目内容的难度也会减少。(其实就是 vue 文件与 Vue 的关系一样)
ES6 class
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
constructor 用来创建和初始化一个由 class 创建的对象。一个类只能拥有一个名为“constructor”的特殊方法。他用来接受 class 在被创建的时候传入的参。并且他本身负责构建属于他的数据结构。
static
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
extends
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.'
super
首先,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'