类class：继承类后同名方法是覆盖还是去哪了呢，类中this指向问题等

大家好，今天给大家总结了一下class类的知识点，class类可以说是非常常见，常用的一个重要的概念。那么今天让我们逐步去使用它，总结它的相关的知识。包括创建，继承，this的指向方面问题。比如：继承类后同名方法是覆盖还是去哪了呢？构造器如何更方便的继承？

class类

在前端中，类class 是es6 引入的一个重要特性。对我的理解来说，我觉得它就是一个对象（当时实际上是有区别的，做参考理解）。比如它的对于数据的封装和引用，当时类有自己的特点，比如需要实例化，状态独立等特点

逐步实践进行理解

建立一个简单类：了解类

我们可以看到输出的这个实例对象，这是一个简单的类的创建，内部没有接收值也没有值，内部包括它的原型链（后面我们会看到关于原型链的使用）

不接收值 和 接收值的情况

对于类中，如果我们要去接收值，我们需要有一个构造器constructor.

构造器：主要用于初始化类的实例对象，在我们new一个实例，创建一个类的对象时，构造器方法会被自动调用。允许你在创建对象时设置对象的初始状态。

这里要注意，有时候我们直接去修改值类里的值可能会修改，但是状态不变，比如react里面需要用 this.setState 去修改状态

构造器新建的数 和 直接定义的数据的区别

从上面我们看到，我们通过构造器去接收数据，定义数据，那么如果我直接定义的字段与构造器定义的有什么区别呢。

我们看到不管是 直接定义的 还是 构造器定义的 都会在实例对象中，是实例的属性。且都可以用 实例.key 来直接获取相关数据

区别：在使用的时候的初始化状态，使用构造器接收到，所以在值确定的情况下，直接定义也很合适。在需要传值的赋值的情况下，要使用构造器

类的继承

对于类的继承，是一个非常好用的机制，在原有的基础上继续再加上新的类的属性。减少了代码量提高复用率。在这里还是有很多可以说的。

（1）简单的继承

在下面这个例子里，定义了一个New05类，由New06继承，此时这个New06没有写任何东西。建立实例后，可以直接调用到New05里面的属性

那么对于上面的情况问题： 如果我想要在构造器里面加属性如何做，上面的是否要写，不写会怎么样 如果我重新写了一个running方法，是覆盖New05类的,还是一个新的呢

（2）加属性怎么加,继承构造器的字段如何继承

当我们面对想要继承属性的，构造器里面的字段如果重复写一遍自然可以，但是我们可以用更好的方式。

（1） 我们直接用继承来的构造器，来传值（可以看到我们可以直接使用）

（2）如果我们要新加一些字段，可以把上面的抄下来当然这是繁琐的。所以我们用到了super(key)

（3）构造器属性继承过来了，那么它的方法在继承方面又会有哪些情况呢

当我们继承了一个类，这个类里有一个方法，我们可以在继承后使用，同时还可以通过写一个重名的方法去 '覆盖' 【这里大家看到我用的是'' ，这个覆盖并不是代替，而是先找到我们当前定义的，那么接下来我们来解释一下】

（1）首先在我们定义一个 类 的时候，这个类在实例对象中在哪里呢，先看看它在哪【看看它在原型链上的位置】

（2）上面我们看到了，在继承后原来的类的方法在哪里，那么现在我们加一个新类，这时原来的方法是被覆盖还是什么情况【发现方法并没有覆盖掉，而是从某种意义上先于 原来的类的方法】

【结论：当我们继承后重新定义一个重名的方法，不会对原来的进行覆盖，而是在原型链上更近，方法会被放在原型链上，当我们去使用的时候，会先用到最近的那个】

类中的this指向问题

为了让大家更好理解类的this指向问题，我们先从 function 来试一试一种情况

function测试

（1）这里定义了一个名为 BClass 的函数。将函数 BClass 本身赋值给了变量 b,此时，变量 b 实际上就相当于函数 BClass 的一个别名（那么此时这个this指向哪里呢?这个大家应该知道是window）

(2)对于上面这种情况，此时我开启严格模式,情况会变成什么样呢（this指向的undefined）

为什么会出现上面这种情况：在严格模式下，JavaScript 对函数内部this的指向规则进行了严格规范，当一个函数被独立调用的时候，this的值不会像非严格模式那样自动绑定到全局对象

class类测试

function的情况讨论完了，接下来让我们看看类里面是什么一个情况

（1）建立一个类，建立实例，查看里面方法的this指向【此时的this指向是当前的 类】

(2)如果我们按照上面 函数的方法，直接将方法赋给 一个变量，通过变量去触发会是什么情况呢【我们看到，this的指向是 undefined】

总结：对于上面的这种情况，是因为类中的方法默认开启的局部的严格模式，所以this指向undefined

总结

本章通过对class类从简单的创建，到后面对于构造器的相关情况，继承的相关情况，类里面this指向的相关情况进行了讨论。

测试代码：类class：继承类后同名方法是覆盖还是去哪了呢，类中this指向问题等大家好，今天给大家总结了一下class类的相关问 - 掘金 (juejin.cn)