作用域与闭包;类与类的继承

2021年04月08日 15:29:53阅读数:22博客 / Ghcᝰ / HTML前端学习

作用域闭包

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>作用域闭包</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 全局作用域
  12. let str = "111";
  13. console.log(str);
  14. // 函数作用域
  15. function getname() {
  16. let str1 = "222";
  17. console.log(str1);
  18. }
  19. getname();
  20. // 下面代码中str1无法输出报错,因为str1的作用域范围再getname函数中才起效果,此时str1为私有变量(私有成员)
  21. // console.log(str1);
  22. // 块作用域{}用大括号包裹起来,var不支持块作用,
  23. {
  24. let a = 1, b = 2;
  25. console.log(a, b);
  26. }
  27. //闭包:能够访问自由变量的函数,理论上讲,所有函数都是闭包
  28. let c = 300;
  29. function sum(a, b) {
  30. return a + b + c;
  31. }
  32. //通过闭包来访问函数的私有成员 /函数中嵌套函数的是高阶函数
  33. function demo1() {
  34. let name = "halo";
  35. return function getname() {
  36. return name;
  37. };
  38. }
  39. console.log(demo1()());
  40. </script>
  41. </body>
  42. </html>

类与类的继承

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>类与类的继承</title>
  8. </head>
  9. <body>
  10. <script>
  11. class User {
  12. // 构造方法:初始化对象,关键字constructor
  13. constructor(name, email) {
  14. this.name = name;
  15. this.email = email;
  16. }
  17. // 原型方法(共享方法)
  18. show() {
  19. return { name: this.name, email: this.email, age: this.#age };
  20. }
  21. // 静态方法:不需要实例化(new class ),直接用类来调用,关键字static
  22. static fetch() {
  23. // 静态成员中的this表示的就是当前的类
  24. return this.userName;
  25. }
  26. // 静态属性--变量
  27. static userName = "无间道";
  28. // 私有成员,关键字#
  29. #age = 30;
  30. // 还可以声明访问器属性:伪装成属性的方法,有get,set
  31. get age() {
  32. return this.#age;
  33. }
  34. set age(value) {
  35. if (value >= 18 && value <= 60) { this.#age = value; }
  36. else { console.log("年龄不符合"); }
  37. }
  38. }
  39. // 公共方法放在构造函数的原型上:原型方法
  40. const user = new User("老师", "111@qq.com");
  41. console.log(user);
  42. console.log(user.show());
  43. // 静态方法直接用类调用,不需要去new了
  44. console.log(User.fetch());
  45. // 如果非静态方法要 console.log((new User).fetch());
  46. console.log(user.age);
  47. user.age = 90;
  48. console.log(user.age);
  49. //继承关键字extends
  50. // 继承: 通常时对父类进行一些扩展(添加一些新的属性或方法)
  51. class Child extends User {
  52. constructor(name, email, gender) {
  53. // 第一步必须将父类的构造方法执行一下, 否则this用不了
  54. super(
  55. name, email
  56. );
  57. // 第二步,给子类的新成员初始化
  58. this.gender = gender;
  59. }
  60. // 给子类重写父类的原型方法(共享方法)
  61. show() {
  62. return { name: this.name, email: this.email, gender: this.gender };
  63. }
  64. }
  65. const child = new Child("新子类", "aa@qq.com", 42);
  66. console.log(child);
  67. </script>
  68. </body>
  69. </html>
批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    Ghcᝰ
    博文
    11
    粉丝
    0
    评论
    0
    访问量
    365
    积分:0
    P豆:26