var
声明一个变量，可选将其初始化为一个值。
function fn(){
var a = 1
console.log(a)
}
fn() //输出 1 。正常的
看看以下代码
注意：console.log(2)没有被执行
function fn(){
if(true){
console.log(1)
}else{
//这不会执行
console.log(2)
}
}
fn() // 1
再来看看以下代码
console.log(a)报错了
function fn(){
if(true){
console.log(a)
}else{
//这不会执行
console.log(2)
}
}
fn() //报错了 a is not defined
还得看看以下代码
function fn(){
if(true){
console.log(a) //undefined
}else{
//这不会执行
var a
console.log(2)
}
}
fn()
以上代码竟然没有报错？这....
else{}的大括号不会执行的
我在else{}的大括号中声明了a，a竟然被执行了。
赶紧查MDN，原来是变量提升了。
注意：变量提升将影响变量声明，而不会影响其值的初始化。
function fn(){
console.log(a) //undefined
var a = 10
console.log(a) // 10
}
fn()
目的：只暴露frank一个全局变量
{
var a = 1
window.frank = function (){
console.log(a)
}
}
以上代码不符合我的目的。
var a = 1,就会不小心暴露window.a全局变量
---------分割线---------
改善：用函数包裹起来
function fn(){
var a = 1
window.frank = function (){
console.log(a)
}
}
fn()
以上代码不符合我的目的。
这个函数有个名字fn，也是一个全局变量
---------分割线---------
改善：立即执行函数。
(function (){
var a = 1
window.frank = function (){
console.log(a)
}
}())
目的达到了。
---------分割线---------
再改善： let
{
let a = 1
window.frank = function (){
console.log(a)
}
}
console.log(a) //a is not defined
console.log(window.frank) //f () {}。正常执行
目的达到了。
let
let语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。
let声明的变量只在它所在的代码块有效。
{
let a = 10
var b = 20
}
console.log(a) //a is not defined
console.log(b) //20
if(true){
let b = 1;
console.log(1) //1
}else{
console.log(2) //2
}
console.log(b) // 报错 b is not defined
说明：
let 的作用域在最近的 {} 之间
不存在变量提升。
{
let a = 1
var b = 1
{
console.log(a) //报错。a is not defined
console.log(b) // undefined
let a = 2
var b = 2
}
}
-------------分割线---------------
//var 的情况
console.log(x) // undefined
var x = 2;
//let的情况
console.log(y) // 报错。 y is not defined
let y = 3
如果在let a之前使用a，那么会报错。
不允许重复声明
//报错
function fn(){
var a = 1
let a = 2
}
//报错
function f(){
let b = 1
let b = 2
}
const
const声明一个只读的常量。一旦声明，常量的值就不能改变。
不允许再次赋值，只有一次赋值机会
// let
{
let a = 1
console.log(a) //1
a = 2
console.log(a) // 2
}
// const
{
const a = 1
console.log(a) //1
a = 2
console.log(a) // 报错
}
不能只声明，不赋值。
const b; // 报错
console.log(b)
总结：
1、var 会变量提升，可以重复赋值。
2、var 变量提升将影响变量声明，而不会影响其值的初始化。
3、const与let的作用域是相同的：只在声明所在的块级作用域内有效。
4、const与let都是不可重复声明。
5、const与let都是不存在变量提升。
6、const只有一次赋值机会，而且必须在声明的时候立马赋值。
补充面试题：
题1：
---------
var a = 11
function fn(){
console.log(a) //输出？
}
a = 22
fn()
-----------------------------------------
题2：
---------
var a = 11
function fn(){
console.log(a) //输出？
}
fn()
a = 22
-----------------------------------------
答案：
题1 ：输出22
题2 ：输出11
-----------------------------------------
题3：
---------
for(var i = 0; i < 6; i++){
}
console.log(i) // 输出？
-----------------------------------------
解：
var i
for( i = 0; i < 6; i++){
//0，1，2，3，4，5
}
console.log(i) // 输出 6
// var 变量提升。for循环到 i = 6 的时候，
// 不满足 i < 6 的条件，就跳到console.log(i)，
// 所以最后输出 6
题4：
---------
for(var i = 0; i < 6; i++){
function fn(){
console.log(i) // 输出？
}
fn()
}
题5：
---------
<button id = "x">点击</button>
for(var i = 0; i < 6; i++){
function fn(){
console.log(i) // 输出？
}
x.onclick = fn
}
答案：
题3 ：输出 6
题4 ：输出 0,1,2,3,4,5
题5 ：输出 6 (时机问题，刻舟求剑)
-----------------------------------------
题6：
---------
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
var liTags = document.querySelectorAll('li')
for(var i = 0; i < liTags.length; i++){
liTags[i].onclick = function(){
console.log(i) // 当我点击【导航3】输出？
}
}
答案：
题6 ：输出 6 （变量提升）
-----------------------------------------
针对题6进行修改，实现点击第n个【导航】就输出 n ；
如点击【导航1】 输出 0
解法1：
//用let就好了
var liTags = document.querySelectorAll('li')
for(var i = 0; i < liTags.length; i++){
let j = i;
liTags[i].onclick = function(){
console.log(i) // 当我点击【导航3】输出 2
}
}
-----------------------------------------
解法2：使用立即执行函数
var liTags = document.querySelectorAll('li')
for(var i = 0; i < liTags.length; i++){
(function(j){ //j等于第一个参数
//var j = arguments[0] //j等于第一个参数
liTags[j].onclick = function(){
console.log(j) // 当我点击【导航3】输出 2
}
})(i)
}
简化：
-----------------------------------------
var liTags = document.querySelectorAll('li')
//i的作用域是 () 括号里面。
// 0,1,2,3,4,5 退出循环 6
for(let i = 0; i < liTags.length; i++){
//块里面的i = 圆括号里面 i 的值
// i0,i1,i2,i3,i4,i5
liTags[i].onclick = function(){
console.log(i) // 当我点击【导航3】输出 2
}
// 圆括号里面 i 的值 = 块里面的i
}
