小白学js第六天之代码规范，作用域以及预解析
目录
- 代码规范
- 命名规范
- 变量规范
- 注释规范
- 空格规范
- 换行规范
- 作用域
- 全局变量
- 局部变量
- 块级作用域
- 作用域链
- 预解析
- 什么是预解析
- 变量提升
此篇木有脑图，嘻嘻
代码规范
命名规范
- 变量、函数的命名必须要有意义
- 变量一般用名词
- 函数一般用动词
变量规范
- 操作符前后要有空格
var name = 'zs';
注释规范
// 这里是注释
空格规范
if (true) {
}
for(var i = 0; i < n; i++ ) {
}
换行规范
var arr = [1, 2, 3, 4];
if (a > b) {
}
for (var i = 0; i < 10; i++) {
}
function fn() {
}
作用域
变量可以起作用的范围
全局变量
在任何一个地方都能访问到的变量
- 不使用 var 声明的变量就是全局变量， 但不推荐这么写
局部变量
只在固定的代码块可以访问到的变量，比如最常见的就是函数内部。对应的局部作用域
- 局部变量退出作用域之后就会被销毁，而全局变量只有在关闭网页或浏览器时才被销毁
var arr = [1, 2, 3, 4]; // 全局变量
if (a > b) {
var c; //局部变量
}
for (var i = 0; i < 10; i++) {
}
function fn() {
}
块级作用域
任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。
在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域
作用域链
-
只有函数可以制造作用域结构，那么只要是代码，就至少有一个作用域,即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
-
将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。
// 案例2
function f1() {
var num = 123; // 1级链
function f2() { // 2级链
console.log(num);
}
f2(); // 1级链
}
var num = 456; //0级链
f1(); //// 0级链
// 0级链表示 全局 1级链表示 局部 2级链表示局部的局部 以此类推
预解析
什么是预解析
JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程
预解析过程：
- 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
- 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
- 先提升var，再提升function。
代码执行过程
案例
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
//预解析过程
// function f1() {
// var a = b = c = 9;
// console.log(a);
// console.log(b);
// console.log(c);
// //function f1()内部预解析过程
// var a = b = c = 9;
// var a = 9; // a是局部变量
// b = 9;
// c = 9; // 因为b c没有用var声明 所以 bc是全局变量
// console.log(a);
// console.log(b);
// console.log(c);
// }
// f1(); // 因为上来先调用了函数，所以要先对函数内部进行预解析
// console.log(c);
// console.log(b);
// console.log(a);
变量提升
变量提升
定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升
函数提升
javascript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面
注意：先提升var，再提升function。
案例
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
// var a;
f1();
// f1()内的预解析
function f1() {
var b;
var a;
console.log(a); // undefined a因为变量提升，所以只被声明了，而没有被赋值
console.log(b); // 9
a = '123';
}
a = 18;
console.log(a); // 18
