一个菜鸟的互联网技术分享博客
您的位置: 主页 > es5继承和es6中class的用法对比
advertisement

es5继承和es6中class的用法对比

今天一个小学弟问了下我前端面试中关于class这个问题(如标题所示),然后我就随便写了两种方法让他对比下,代码如下:
es5中class的用法:

  1. function People(name,age,sex){  
  2.     this.name = name;  
  3.     this.age = age;  
  4.     this.sex = sex  
  5. }  
  6. People.prototype.showName = function(){  
  7.     console.log(`我叫:${this.name}`)  
  8. }  
  9. People.prototype.showAge = function(){  
  10.     console.log(`今年:${this.age}岁了`)  
  11. }  
  12. People.prototype.showSex = function(){  
  13.     console.log(`我的性别是:${this.sex}`)  
  14. }  
  15. let people = new People('张仁',2,'男');  
  16. people.showName()  
  17. people.showAge()  
  18. people.showSex()  
或者改写成下面的:
  1. function People(name,age,sex){  
  2.     this.name = name;  
  3.     this.age = age;  
  4.     this.sex = sex  
  5. }  
  6. Object.assign(People.prototype,{  
  7.     showName(){  
  8.         console.log(`我叫:${this.name}`)  
  9.     },  
  10.     showAge(){  
  11.         console.log(`今年:${this.age}岁了`)  
  12.     },  
  13.     showSex(){  
  14.         console.log(`我的性别是:${this.sex}`)  
  15.     }  
  16. })  
  17. let people = new People('张仁',2,'男');  
  18. people.showName()  
  19. people.showAge()  
  20. people.showSex()  

es6中代码如下:
  1. class People{  
  2.     constructor(name,age,sex) {  
  3.         this.name = name;  
  4.         this.age = age;  
  5.         this.sex = sex;  
  6.     }  
  7.     showName(){  
  8.         console.log(`我叫:${this.name}`)  
  9.     }  
  10.     showAge(){  
  11.         console.log(`今年:${this.age}岁了`)  
  12.     }  
  13.     showSex(){  
  14.         console.log(`我的性别是:${this.sex}`)  
  15.     }  
  16. }  
  17. let people = new People('张仁',2,'男')  
  18. people.showName()  
  19. people.showAge()  
  20. people.showSex()  
总结:
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
Es6代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数People,对应 ES6 的People类的构造方法。


zhangren.online
上一篇:ES6 Promise用法小结
下一篇:js实现九九乘法口诀

您可能喜欢

回到顶部