简介

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>

ES6中的Class的基本语法

简介

举栗：

类的实例

类的继承

super关键字

静态方法

猜你喜欢