ES6中的Class的基本语法
简介
javascript语言里，生成实例化对象的方法是通过构造函数来生成的，
举栗：
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2);//这里是new一个实例化对象，把参数1和参数2传到函数里。
Es6中的calss写法只是让对象原型的写法更加清晰、更像面向对象的编程语法，上面的代码用class写就是下面这样子。
class Point {//声明一个类名叫Point，在class前面不需要function
constructor(x, y) {//constructor这是一个构造方法
this.x = x;//这里的this关键字代表实例对象
this.y = y;
}//两个方法之间不能用逗号分隔，要不会报错
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
类的实例
把类实例化也很简单，代码如下
class Point { // ... } var point = Point(2, 3); //这种实例化方法是错误的，如果这样写的话，会直接报错因为这样写等与像函数那样之间调用了 var point = new Point(2, 3); //这一步才是正确的把Point这个对象实例化 对象实例话是需要new这个关键字的
类的继承
Class是可以通过extends来实现继承的，代码如下
class Point { } class ColorPoint extends Point {//这一步是ColorPoint继承Point的。 }
super关键字
这个关键字可以当函数使用也能当作对象使用，这两种情况下，用法完全不同。
作为函数调用时代码如下
class A {} class B extends A { constructor() { super();//这里的super()是ES6中的要求，子类的构造函数必须执行一次super函数，要不代码会报错。 } }
作为对象被调用的时候，代码如下
class A { p() { return 2; } } class B extends A { constructor() { super();//这里的super()在普通方法里指向的是父类的原型对象；在静态方法里是指向父类。 console.log(super.p()); // 2 } } let b = new B();
静态方法
所有在类中定义的方法，都会被实例继承，如果不想被实例继承的话，就在一个方法前面加上static关键字，然后该方法就不会被实例继承，而是之间通过类调用，这就是静态方法，示例代码如下
class Foo {//这里的Foo是一个类名
static classMethod() {//这是通过static来把classMethod变为静态方法的
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();//这一步是实例化对象
foo.classMethod()//这一步是通过类来直接调用classMethod这个方法的。
以上是我对ES6中class的总结，下面代码是一个猜数字的小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box2{
width: 300px;
height: 300px;
color:red;
background:red;
}
#box{
width: 100%;
height: 100%;
background:rgba(0, 0, blue, alpha);
}
</style>
</head>
<body>
/*这里是静态页面布局*/
<input type="button" value="开始" onclick="start()">
<br />
<input type="number" id="txt">
<input type="button" value="guess" onclick="gues()">
<br />
结果：<p id="p"></p>
<script>
var v=0//答案变量
class A{
constructor(num) {
this.num = num;
this.v = v//通过这一步生成答案
}
//计算大小
guess() {
var str = ''
if(this.num > this.v){//猜大了
str='猜大了'
}else if (this.num < this.v){//猜小了
str='猜小了'
}else{/猜对了
str='猜对了'
}
p.innerHTML=str
}
}
//猜一下事件
function gues() {
var num = txt.value;
let B = new A(num)
B.guess()
}
//游戏开始事件
function start(){
v = parseInt(Math.random() * 100);
console.log(v)
}
</script>
</body>
</html>
