let/const

  • let 声明的变量
  • const 声明的也是变量 [只不过不允许重定向变量的指针，不能从新赋值]
    • 变量 -> 名字：存储值
    • 常量 -> 具体值

var/let

  • let 不存在变量提升
  • let 不允许重复声明 (在当前上下文中，不论基于什么方式声明了这个变量，再次基于let/const声明都会报错从父声明)
  • 全局上下文中，基于var声明的变量不是存放在VO(G)中的，而是直接放在了GO（window）中， 基于let声明的变量是存放在VO(G)中的
  • 暂时性死区
  • 块级作用域：没有es6之前，，，如果{}（排除函数和对象的大括号）中出现let/const/function,则当前的{}会形成一个块级私有的上下文

ES6中的正常循环，想让性能更优
let arr = [10,20,30]
let i = 0,
len = arr.legngth
for(; i < len; i++){}

循环绑定事件:用var的方式实现
var buttons = document.querySelcetorAll(‘button’)
for(var i = 0; i < buttons.length; i++){
(function(i){
buttons[i].onclick = function(){
alert(i);
}
})(i)
}

解决2 自定义属性
let buttons = document.querySelcetorAll(‘button’)，
i= 0；
len = buttons.length;
for(; i < len; i++){

buttons[i].index = i;
buttons[i].onclick = function(){
alert(i);
}

}

解决3:事件委托：
document.body.onclick = function(ev){
let target = ev.target;
if(target.tarName === ‘BUTTON’){
// 点击
alert(target.getAttribute(‘index’))
}
}

js代码执行

  • 词法解析（AST）我们基于http从服务器拉取回来的js代码其实是一些字符串，浏览器首先会按照ECMAScript规则，把字符串变为c++ 可以识别和解析的一套树结构对象
  • 变量提升
  • 代码执行

var x = 10；
var x = 20；
console.log(x)

全局上下文查找变量【机制】

  • 先查找VO(G)中是否存在，如果存在就用这个全局变量

  • +