ES6之类(class)和继承

原来我们写面向对象编程,都是在通过构造函数,然后在原型上写的,比如:




  
  
  
  




ES6之类(class)和继承_第1张图片

当然我们也可以通过Object.assign方法




  
  
  
  




ES6之类(class)和继承_第2张图片

这样也是可以的

接下里介绍ES6中新增的class方法




  
  
  
  




ES6之类(class)和继承_第3张图片




  
  
  
  




ES6之类(class)和继承_第4张图片

上面的Person使用的函数声明的方式,也可以是使用函数变量的方式来使用calss




  
  
  
  




ES6之类(class)和继承_第5张图片

这种方式也是可以的

--------------------------------------------------------------------------------------------

下面说明class中的方法名可以使用变量来代替




  
  
  
  




ES6之类(class)和继承_第6张图片

这样子我们去访问AAA 是有这函数的




  
  
  
  




在我们加了 [] 之后,再去看

他会提示你AAA不是一个函数

我们去Person.prototype中查看

ES6之类(class)和继承_第7张图片

所以我们改成BBB

ES6之类(class)和继承_第8张图片

在我们改成BBB之后,

ES6之类(class)和继承_第9张图片

就可以运行到函数了

这其实就是JS的基础,我们知道后缀点和方括号都可以调用属性,但是后缀点是不能跟变量的,但是方括号可以

--------------------------------------------------------------------------------------------

还有就是class没有预解析,即下面这种写法是错误的

ES6之类(class)和继承_第10张图片

ES6之类(class)和继承_第11张图片

-------------------------------------------------------------------------------------

下面说明class中this指向的问题




  
  
  
  




ES6之类(class)和继承_第12张图片

这里是因为你将Person中方法提取了出来,那么这里的this就会指向运行环境,所以造成运行失败

解决方法1:

调用bind方法,将getName绑定到对象上




  
  
  
  




ES6之类(class)和继承_第13张图片

解决方法2:

使用箭头函数




  
  
  
  




ES6之类(class)和继承_第14张图片

------------------------------------------------------------------------------------------------

class里面还新增了两个函数getter和setter




  
  
  
  




get和set一般用于封装底层框架

-------------------------------------------------------------------------------------------------

class里的静态方法:




  
  
  
  




ES6之类(class)和继承_第15张图片

----------------------------------------------------------------------------------------------

class里面的继承

我们先来看原JS的继承方法(即原型链)




  
  
  
  




ES6之类(class)和继承_第16张图片

再来看class通过extends关键字的继承




  
  
  
  




ES6之类(class)和继承_第17张图片

注意点:

1,

等同于

ES6之类(class)和继承_第18张图片

2,必须要在super之后才能使用this,这是因为子类的创建是基于父类的,只有super方法才能调用父类实例

3,父类的静态方法也会被子类所继承

上面只是父类的属性调用,下面是讲父类的方法调用:




  
  
  
  




ES6之类(class)和继承_第19张图片

注意点:

如果直接在子类中写和父类相同名字函数,那么其实际上只会执行子类的函数,

如果想要执行父类的函数,请使用super

你可能感兴趣的:(ES6)