var,let,const

1.常规var

var是一开始最常用的,具有变量提升,没有块作用域概念的特性等,比较的过于自由

但是需要注意一个问题就是,var在全局声明的变量,会添加到windows属性上,而let和const不会

涉及闭包,this指向,和var和let的区别的一道题目

演示:
var str = '这是外面的'
var obj = {
	str:'这是里面的',
    getData(){
    	retrun function(){
        	console.log(this.str)
        }
    }
}

obj.getData()()	//输出:这是外面的,因为此时返回的函数,this指向是windows,而var全局声明的会挂载到windows上


反例:
let str = '这是外面的'
let obj = {
	str:'这是里面的',
    getData(){
    	retrun function(){
        	console.log(this.str)
        }
    }
}


obj.getData()()	//输出:undefined

2.ES6新特性,let,const

一.let

特性: 1.具有块作用域概念 2.不会变量提升 3.不能重复声明

=========================================================================== 对比 var 的实例:

先定义三个div,类名是box,使得他们点击变成粉红色

var item = document.getElementsByClassName("box")

for(var i = 0 ; i < 2 ; i++ ){
    item[i].onclick = function(){
        item[i].style.backgroundColor = 'pink';
    }  
}

在这里,我们试图通过for循环的var i 来对我们的item元素的样式进行更改,但是这样会报错

原因:因为onclick是属于异步函数,并非同步,所以在触发onclick点击函数之前,for循环已经创建了三个区域
{
    var i = 0 ;
}
{
    var i = 1 ;
}
{
    var i = 2 ;
}

此时随着最后一次的i++落定,最终i的数值是为3
因为var的特性,导致三个块作用域里的i受到最终i的影响,皆为3,所以就导致了等onclick触发的时候
item[i]的数值,始终为item[3],从而找不到导致报错
此时在onclick的函数中只能用this来替代item[i]

此时用let 来代替 var
for(let i = 0 ; i < 2 ; i++ )
此时的let哪怕最后i++了等于了3,但是因为let的特性,具有块作用域的概念,互不影响,所以可以让每一块的item[i]都保持独立

二.const

特性: 1.用于常量,不可被二次更改 2.但是当用于定义数组,对象的时候,可以被增删内容 3.一定要赋初始值