Blogger Information
Blog 8
fans 0
comment 0
visits 4569
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
细说作用域,常量与标识符命名规范(附基础入门知识)
小柯
Original
836 people have browsed it

一. 作用域划分

  1. 块作用域
  2. 函数作用域
  3. 全局作用域(默认)
1.1 块作用域

将变量的声明与赋值(初始化)二合一

  1. {
  2. let a = 12345
  3. 相当于 let a;
  4. a = 12345;
  5. let b = 45678;
  6. console.log(a + b); 58023
  7. 块中变量在块中可以访问到,但是在块外部是访问不到里面的
  8. }
  9. // console.log(a + b); 块外部的访问不了

执行效果图:块作用域

1.2 函数作用域
  1. function sum(a, b) {
  2. //在函数中声明一个变量,为私有成员,仅限内部使用,外部不可见,与块作用域一样
  3. let siyou = a + b;
  4. console.log(siyou);
  5. }
  6. sum(50, 60);
  7. //console.log(siyou); 外部访问不了内部

实例运行效果图:

1.3 全局作用域
  • 位于”代码块/函数”之外的空间, 叫”全局作用域”,变量叫做全局变量或公共变量
  • 全局成员(变量/函数)在代码的任何地方,都是可用的
    代码实例:
  1. let gonggong = "840200456";
  2. {
  3. console.log(gonggong);
  4. }
  5. {
  6. {
  7. {
  8. console.log(gonggong);
  9. }
  10. }
  11. }
  12. function f1() {
  13. console.log(gonggong);
  14. }
  15. f1();
  16. function f2() {
  17. return function () {
  18. return function () {
  19. console.log(gonggong);
  20. };
  21. };
  22. }
  23. // 因为函数嵌套了三层,所以需要调用三次函数
  24. f2()()();
  25. 总结:全局中的成员可以渗透到 ---> / 函数内,成员的访问顺序像链条一样, 形成了一条"作用域链"

实例运行效果图:

1.4 作用域链
  • 块和函数中, 如果存在与上一级作用域同名的成员,则当前成员会覆盖上一级同名成员
  • 当前作用域的访问优先级 > 上一级作用域
  • 简单记忆: 作用域中, 总是优先访问, 离它声明最近的成员

  • 总结: 作用域, 由外向内允许, 由内向外受限, 从而形成一条具有优先级的”作用域链”

  • 作用域: 成员的可见范围;作用域链: 成员的访问顺序

代码实例:

  1. let username = "小柯";
  2. {
  3. {
  4. {
  5. console.log(username);
  6. }
  7. }
  8. }
  9. function f3() {
  10. return function () {
  11. return function () {
  12. console.log(username);
  13. };
  14. };
  15. }
  16. f3()()();
  17. function f4() {
  18. let username = "猪老师";
  19. //优先访问, 离它声明最近的成员,即猪老师是最近的成员
  20. console.log(username);
  21. }
  22. f4();

实例运行效果图:

二. 常量与标识符命名规范

2.1 常量是什么?
  • 当一个数据,需要在多处被引用,为了防止引用时发生数据不一致,需要将它的值固定下来,这样的数据,应该声明为”常量”
  • 所谓”常量”,就是经常被使用到的变量, 简称”常量”。例如: 性别, 对象, 数据,函数等,都应该声明为常量

  • 常量也是为了实现:数据复用,且常量的值不可变,所以必须在声明时初始化,常量禁止更新

  • 变量与常量在使用时,如何选择?
    尽可能首选”常量”, 除非这个值用到循环变量中,或者肯定会被更新,才用变量

2.2 标识符命名规范
  • 标识符: 代码中有意义的符号, 例如: 变量, 函数等
  • 标识符有二类:

    1.系统标识符: 关键字, 保留字, 是 JS 提供给开发者, 直接拿来用,不需要声。

    2.自定义标识符: 必须 “先声明, 再使用”, 例如 email, password, get…

  • 标识符可使用的字符:

    1.必须是: 字母,数字, 下划线”_“, “$”(四种),其它字符均是非法符号

    2.首字母不得使用”数字”

  • 标识符命名规范:

    1.驼峰式: 第二个单词首字母大写, 第一个单词首字母是否大小取决于用途,例如构造函数/类的首字母要大写
    // 驼峰式: 小驼峰:首字母小写, 大驼峰: 首字母大写
    // 小驼峰: myEmail, getUserInfo 大驼峰:UserInfo, StuModel

    2.蛇形式: 每个单词之间使用”下划线”分割
    //user_name, get_email, 常量 APP_NAME

附基础入门知识

  1. // TODO 代码中的成员:
  2. // * 1. 数据
  3. // * 2. 操作
  4. // Chrome控制台: 内置的JS执行器, 浏览器中用的
  5. // console.log(): 将计算结果输出到控制台,可以用在node中
  6. // * 程序: 描述任务的操作流程, 默认"顺序执行"
  7. // * 顺序执行: 计算机中专业的叫法"同步执行"
  8. // * 同步执行: 代码执行顺序与书写顺序一致
  9. // console.log(1);
  10. // console.log(2);
  11. // ! (1) 数据
  12. 10;
  13. 20;
  14. // * 字面量: 直接可以看到值
  15. // 如果10, 20, 后面还要用?
  16. // 可以用一个容器, 将他们缓存起来, 这个临时存放数据的容器: "变量"
  17. // 为了数据的复用: 使用了"变量"
  18. // * 只要涉及到了"复用", 必须要有2步:
  19. // * 1. 声明过程: 仅定义, 不执行, 方便编译预处理
  20. // * 2. 执行过程: 复用的过程, 可以多次,多个地方调用声明的语句
  21. // * 第一步: 变量声明
  22. // 为了将变量与"作用域"进行绑定
  23. let a;
  24. let b;
  25. // * 第二步: 执行, 赋值(第一次叫:初始化)
  26. a = 10;
  27. b = 20;
  28. // 第二次赋值叫什么? 更新 / 修改
  29. a = 15;
  30. // 删除
  31. // a = null;
  32. // 按名使用, 才能实现:数据复用
  33. console.log(a, b);
  34. // 变量禁止重复声明
  35. // let a;
  36. // *--------------------------------------------------/
  37. // ! (2) 操作
  38. // 操作写到哪? 写到代码块中
  39. // 代码块: 一段由"大括号 {...}"包裹的代码
  40. {
  41. // 代码块
  42. }
  43. // 以二数求和为例
  44. {
  45. a + b;
  46. }
  47. // * 使用代码块的目的, 是为了"代码复用"
  48. // 如果是一次性的执行,不需要代码块
  49. console.log(a + b);
  50. // 复用代码必分二步:
  51. // 1. 声明过程
  52. // 2. 执行过程
  53. // * 1. 声明函数
  54. // function : 声明函数
  55. // sum: 函数名称
  56. // (a,b): 参数列表
  57. // return : 返回结果
  58. function sum(a, b) {
  59. return a + b;
  60. // 下面这条语句永不执行,因为上面return
  61. // console.log(123);
  62. }
  63. // * 2. 调用函数
  64. console.log(sum(15, 20));
  65. console.log(sum(a, b));
  66. a = 30;
  67. b = 50;
  68. console.log(sum(a, b));
  69. /**
  70. * todo 总结:
  71. * * 1. 代码主要成员: 变量与函数
  72. * * 2. 变量与函数: 代码复用技术
  73. */
  74. /**
  75. * todo 变量总结:
  76. * * 1. 变量: 数据复用
  77. * * 2. 变量声明: let
  78. * * 3. 变量引用: 变量名
  79. */
  80. /**
  81. * todo 函数总结
  82. * * 1. 函数: 操作复用
  83. * * 2. 声明: function
  84. * * 3. 调用: 函数名(...)
  85. */
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post