关于JavaScript中Class类的关键字使用

              关于JavaScript中Class类的关键字使用

重点突出：

1：了解类的概念，由来

2：constructor方法

3：类的实例，继承

4：super 和this关键字

5：静态属性和方法

1

这里首先我们引入一个概念     什么是类呢？

es6中引入了 class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 我所理解的类指的就是  有相同属性和行为的一类群体

1.1

es6中的class与es5的面向对象的区别 是什么？      

1.首先是写法不同。es6中使用关键词class

2.当new一个实例时，默认有一个constructor构造方法，默认返回实例对象（this）

3.类的调用必须通过new 一个实例

4.不存在变量提升，必须先声明，再调用

5.class 的静态方法，使用关键字static,不需new,直接通过类来调用

6.类的继承可以继承原生的构造函数，es5不可以

7.类的继承使用关键字extends,继承机制与es5完全不同

8.es6中继承的原理是：先创造父类的实例对象this,所以要构造函数constructor（）访问父类的属性使用this,必须先调用super()方法；再通过子类的constructor()来修改this

2下面将class关键词的使用方法展示给大家

2.1  es6中类的使用与es5中的区别 我们可以来看一下

//es5中的写法   先创建一个构造函数
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);

//es6中的写法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
//上面代码定义了一个“类”，可以看到里面有一个`constructor`方法，这就是构造方法，
//而`this`关键字则代表实例对象。也就是说，ES5 的构造函数`Point`，对应 ES6 的`Point`类的构造方法。
`//Point`类除了构造方法，还定义了一个`toString`方法。
//注意，定义“类”的方法的时候，前面不需要加上`function`这个关键字，直接把函数定义放进去了就可以了。
//另外，方法之间不需要逗号分隔，加了会报错

2.2 表达式写法

//class表达式
class Teacher{
    // 构造方法
    constructor(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex
         console.log("构造函数被调用了")
  

    }
    //自己添加的一个方法
teach(){
    console.log("哈哈哈")
  
   // alert("今天有一天点点丧")
}

}


// 实例化对象
 let obj=new Teacher('panda',22,'男');
 let obj2=new Teacher('monkey',18,'女');
//  调用它里面的teach方法
 obj.teach();
 console.log(obj.sex);
 console.log(obj2.sex);
//而这时，后台会重复出现两个 构造函数被调用了  原因是我们实例了两个对象

2.3constructor 构造方法

//`constructor`方法是类的默认方法，通过`new`命令生成对象实例时，自动调用该方法。
class Point {
}

// 等同于
class Point {
  constructor() {}
}

//es6中  class默认有一个构造方法 只需将其实例化然后调用里面的方法

2.4实例属性和方法

class point{

.....
}
let  obj=new point(1,2);

3 类的继承

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

ES5 的继承实质:先创造子类的实例对象this，再将父类的方法添加到this上面（Parent.apply(this)）。
ES6 的继承实质:先将父类实例对象的属性和方法加到this上面（所以必须先调用super方法），再用子类的构造函数修改this。

3.1 语法格式 如下

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static hello() {
    console.log('hello world');
  }
}
 
class ColorPoint extends Point {
//这里指的就是继承 但是子类继承父类时构造方法不能被执行 执行过程中 必须先执行父类的super
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}
 
ColorPoint.hello();// hello world
let cp = new ColorPoint(25, 8, 'green');

3.2 super关键字

3.2.1 super 关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

super 作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次 super() 函数。注意：作为函数时，super() 只能用在子类的构造函数之中，用在其他地方就会报错。

//当做函数使用时
=
class A {
  constructor() {
    this.show();
  }
}
class B extends A {
  constructor() {
    super();
  }
  show(){
    console.log('实例');
  }
  static show(){
    console.log('子类');
  }
}
new B() 
　//输出 '实例' ，new B 时触发了 B 的构造函数，所以触发了 super 方法
//即触发了父类 A 的构造函数，此时的 this.show 的 this 指的是子类 

super 作为对象使用

super 作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

3.3 静态属性

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

class Foo {
}

Foo.prop = 1;
Foo.prop // 1
// 上面的写法为`Foo`类定义了一个静态属性`prop`。
//，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。

现在有一个提案提供了类的静态属性，
/写法是在实例属性的前面，加上static关键字。

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}
//这个新写法大大方便了静态属性的表达。

3.3 静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()

4.this关键词

ES6中的class类其实只是个语法糖，皆可以用ES5来实现。由构造函数Cat创建的实例cat是一个对象。在初始化cat实例的时候，在constructor中就会把this上的属性挂载到实例对象上面。另外牢记，this的指向与作用域无关，与调用执行函数时的上下文相关

class Cat {
    constructor(name, age) {
        this.name = name
    }
    run() {
        console.log('run',this)
    }
}
let cat = new Cat('米粒', '5个月')
cat.name // '米粒'
cat.run() // run Cat {name: "米粒"}

5* 分享一个小福利， 是小编今天通过今天的学习学到的猜数字小游戏~代码如下哦

<!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>
</head>
<body>
    
    <h1>猜数字小游戏</h1>
    <hr>
    <button onclick="startGuess()">开始游戏</button>
    <h4>请输入0-100以内的任意整数：</h4>
    <input type="text" name="" id="inp">
    <button onclick="onGuessClick()">猜一下</button>
    <div>结果：<span id='mess'></span></div>

    // <script src="index.js"></script> 
</body>
<script>
var value = 0;//答案变量

class A{

    constructor(num){
        this.v =  value;//生成答案
        console.log(this.v);
        this.num = num;
    }

    //计算大小
    guess(){
        var str = '';
        if(this.v > this.num){// 猜小了
            str = '猜小了';
        }else if(this.v < this.num){//猜大了
            str = '猜大了';
        }else{//猜对了
            str = '猜对了';
        }
        return str;
    }

}

//猜一下事件
function onGuessClick(){
    var v = document.getElementById('inp').value;
    var a = new A(v);
    var result = a.guess();
    document.getElementById('mess').innerText = result;
}

//开始游戏事件
function startGuess(){
    value = Math.ceil(Math.random()*100);
    console.log(value);
}


</script>
</html> 

注意

1. ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
2. constructor 方法 constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
3. 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
4. 实例属性的新写法 实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。

***小编对你说：好了，今天的分享就到这里了，不知道你收获了多少呢。以上均来自小编的个人理解，如有不完整的地方欢迎大家补充哦。还希望接下来大家一起努力！