PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JavaScript知识:作用域与闭包以及类与类的继承

JavaScript知识:作用域与闭包以及类与类的继承

WSC
WSC 原创
2021年04月05日 23:19:37 626浏览

作用域与闭包

作用域

作用域有三种:全局作用域、函数作用域、块作用域
1.函数作用域:默认,不可删除,由全局对象调用

  1. let site = "你好";
  2. console.log(site);

2.函数作用域

  1. <script>
  2. // site是声明在函数外部的全局变量
  3. let site = "你好";
  4. console.log(site);
  5. function getSite() {
  6. // 在函数内部可以访问到外部的全局变量
  7. let site = "再见";
  8. // 这里要返回一个叫site的变量
  9. // 有一个查询的过程, 先在自身的作用域找一个有没有一个叫site
  10. // 如果有则直接返回它
  11. // 如果函数中没有这个site,则自动函数的上一级作用域中去查看site
  12. // 全局正好有一个site,于是就返回了全局的site
  13. // 内部的site ---> 到它的上一级作用域中去查找
  14. // 上面的查询变量的过程,就是是一个链式查询的一个过程,称为:作用域链
  15. // 私有成员,仅限在当前作用内访问, 外部不可见
  16. let domain = "php.cn";
  17. return `${site} [ ${domain} ]`;
  18. }
  19. console.log(getSite());
  20. console.log(domain);
  21. </script>


3.块作用域

  1. // 使用{}会形成块作用域
  2. {
  3. let a = 1;
  4. const C = "c";
  5. //var:不支持块作用域
  6. var a = 2;
  7. var C = "c";
  8. }
  9. console.log(a, B);

闭包

  1. let c = 100;
  2. function sum(a, b) {
  3. // return a + b;
  4. // 现在已经产生了闭包了
  5. // 函数中的变量按来源有二种类型
  6. // 1. 形参: a, b , 这是函数自有的
  7. // 2. 自由变量: c, c并不是函数自有的
  8. // 当前的函数可以访问到上一级/外部的自由变量
  9. // 闭包: 能够访问自由变量的函数
  10. // 自由变量,函数参数以外的变量
  11. // 理论上讲,所有函数都是闭包
  12. return a + b + c;
  13. }
  14. console.log(sum(4, 5));

通过闭包来访问内部的私有变量

  1. <script>
  2. function demo() {
  3. // 私有变量
  4. let email = "a@qq.com";
  5. return function d() {
  6. // 对于这个子函数来说,email就是它的自由变量
  7. return email;
  8. };
  9. }
  10. let f = demo();
  11. console.log(f());
  12. </script>

类与类的继承

  1. // 构造函数来模拟类(对象的模板)
  2. function User(name, email) {
  3. this.name = name;
  4. this.email = email;
  5. // show()输出属性
  6. this.show = function () {
  7. return { name: this.name, email: this.email };
  8. };
  9. }
  10. // 构造函数对象的原型对象上的成员,可以被所有实例所共享
  11. User.prototype.show = function () {
  12. return { name: this.name, email: this.email };
  13. };
  14. const user = new User("wsc", "sa@qq.com");
  15. console.log(user);
  16. console.log(user.show());
  1. <script>
  2. class User {
  3. // 构造方法:用于初始化对象
  4. constructor(name, email) {
  5. this.name = name;
  6. this.email = email;
  7. }
  8. // 原型方法:通过对象调用
  9. show() {
  10. return { name: this.name, email: this.email, age: this.#age };
  11. }
  12. // 静态方法: 不需要实例化(new class),直接用类来调用
  13. static fetch() {
  14. return "static function";
  15. }
  16. static fetch1() {
  17. // 静态成员中的this表示的就是当前的类
  18. return this.userName;
  19. }
  20. // 静态属性、变量
  21. static userName = "wp";
  22. // 私有成员
  23. #age = 50;
  24. // 还可以声明访问器属性: 伪装成属性的方法,有get,set
  25. // 使用访问器属性来访问私有成员
  26. get age() {
  27. return this.#age;
  28. }
  29. set age(value) {
  30. if (value >= 18 && value < 60) this.#age = value;
  31. else console.log("年龄非法");
  32. }
  33. }
  34. const user = new User("wsc", "sa@qq.com");
  35. console.log(user);
  36. console.log(user.show());
  37. // 静态方法直接用类调用
  38. console.log(User.fetch());
  39. console.log(User.fetch1());
  40. console.log("my age = ", user.age);
  41. user.age = 160;
  42. console.log("my age = ", user.age);
  43. user.age = 32;
  44. console.log("my age = ", user.age);
  45. //继承,通常是对父类进行一些扩展(添加一些新的属性或方法)
  46. class Child extends User {
  47. constructor(name, email, gender) {
  48. // 第一步必须将父类的构造方法先执行一下,否则this无法使用
  49. super(name, email);
  50. // 第二步给子类的新成中去初始化
  51. this.gender = gender;
  52. }
  53. // 父类的原型方法
  54. show() {
  55. return { name: this.name, email: this.email, gender: this.gender };
  56. }
  57. }
  58. const child = new Child("ww", "aa@qq.com", "男");
  59. console.log(child.show());
  60. </script>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议