引言
一直从事服务端开发。由于近年来前端迅速发展，所以想入坑前端行列，虽然一直有接触并开发前端相关的项目，但是想要做前端的工作决定系统的学习一下前端，就先从变量开始吧！
变量的作用域
在 js 中变量的作用域只有两种，全局变量、局部变量
全局变量在函数内，全局变量可以直接访问
// 全局变量
var name = ‘ 张三 ’
function showName() {
console.log(name);
}
showName(); // 张三
局部变量自然局部变量不可以在函数外部访问
// 局部变量
function showName2() {
var name2 = ‘ 李四 ’
}
console.log(name2) // error: Uncaught ReferenceError: name2 is not defined
声明局部变量必须使用 var，否则声明的则是全局变量
// 局部变量
function showName3() {
name3 = ‘ 王五 ’
}
showName3();
console.log(name3) // 王五
如果局部变量与全部变量名称一样会怎么样呢？js 不会像服务端语言那样名称一样会产生冲突。通过下面的例子看到，函数会先找局部变量，也就是说局部变量的优先级要比全局变量的优先级要高。
var name = ‘ 张三 ’
function showName() {
var name = ‘ 李四 ’
console.log(name) // 李四
}
showName();
console.log(name) // 王五
刚才说过局部变量必须使用 var 声明，否则声明的是全局变量。如果已存在相同名称的全局变量会怎么样呢？在函数执行后，会改变全局变量的值。
var name = ‘ 张三 ’
function showName() {
name = ‘ 李四 ’
console.log(name) // 李四
}
showName();
console.log(name) // 李四
链式作用域 showName2 函数包含在 showName 函数中，这是 showName 函数所有局部变量对 showName2 函数可见，但是相反是不行的。通过情景三，可以看出来子函数回向父级一级一级寻找变量，所有父级的变量对子级都是可见的，这就是 js 的“链式作用域”
// 情景一
function showName() {
var name = ‘ 张三 ’
function showName2() {
var name = ‘ 李四 ’
return name
}
return showName2()
}
var result = showName()
console.log(result) // 李四
// 情景二
function showName() {
var name = ‘ 张三 ’;
function showName2() {
return name;
}
return showName2()
}
var result = showName()
console.log(result) // 张三
// 情景三
function showName() {
var name = ‘ 张三 ’;
function showName2() {
function showName3() {
return name;
}
return showName3()
}
return showName2();
}
var result = showName()
console.log(result) // 张三
结
js 作用域分全局变量与局部变量。
局部变量必须使用 var 声明，否则声明的是全局变量。
函数可以直接访问全局变量，外部不可使用局部变量。
全局变量与局部变量名称可以重复，局部变量优先级更高。
父级函数变量对所有子函数可见，子函数会一级一级向上寻找变量。
下篇文章学习，久仰的 js 闭包。