13.es6类+继承.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!--
  10. 类:
  11. 定义:class 名字
  12. constructor 定义构造函数初始化
  13. extends 继承
  14. super() 继承父级
  15. -->
  16. <script>
  17. class Person {
  18. constructor(color,toy) {
  19. this.color = color;
  20. this.toy = toy;
  21. }
  22. // 类的方法
  23. play() {
  24. console.log("我喜欢"+this.color+this.toy)
  25. }
  26. }
  27. let p1 = new Person('红色','气球')
  28. console.log(p1)
  29. p1.play()
  30. // es6继承
  31. class newPerson extends Person {
  32. constructor(color,toy,color1,toy1) {
  33. super(color,toy)
  34. this.color1 = color1;
  35. this.toy1 = toy1;
  36. }
  37. play() {
  38. console.log("我喜欢"+this.color1+this.toy1)
  39. }
  40. sun() {
  41. console.log("天晴了")
  42. }
  43. }
  44. let news = new newPerson('黄色','花','粉色','花瓶');
  45. console.log(news)
  46. news.play()
  47. news.sun()
  48. </script>
  49. </body>
  50. </html>