easy 与 was

where

var variable declaration has 全局作用域or局部作用域

在全局中声明变量即为全局变量

在函数中声明变量即为局部变量

Var while in the course of gradually revealed many problems

var several major issues

Variable lift

Use var to declare variables will have problems lifting variable, that variable is called before declaring variables

console.log(info);//undefined

var info = 10;

Appears above situation is actually very bad , because the use of the word should go before the statement quoted an error instead of a undefined to this variable.

This problem is particularly evident in the function

var info = 10;

function fn1(){
    console.log(info);//undefined
    var info = 20;
}

fn1();

Problems in the circulation

var problems in the circulation is quite serious

Here I encountered a situation

//html中有四个span
var oSpan = document.getElementsByTagName('span');
for(var i = 0 ; i < oSpan.length ; i++ ){
    oSpan[i].onclick = function(){
        console.log(this);//点击出现 你点的那个span
    }
}

We found that the element can be obtained at this time is clicked

But we put thisinto oSpan[i]it will go wrong when

for(var i = 0 ; i < oSpan.length ; i++ ){
    oSpan[i].onclick = function(){
        console.log(oSpan[i]);//点击出现 undefined
        console.log(i);//点什么都是4
    }
}

This time we will find that we have not selected the event handler function in the instantaneous value of the i. And this is because of what

We can open the code

//拆开for
var i = 0;
oSpan[i].onclick = function(){
    console.log(i);
}
var i = 1;
oSpan[i].onclick = function(){
    console.log(i);
}
...
var i = 3;
oSpan[i].onclick = function(){
    console.log(i);
}
var i = 4;

//在你点击的时候是在页面加载完才调用的函数

The above will be seen that due to the variable var global variable declarations, the function receiving the variable is 4

The solution is to write a closure function in a loop to simulate a block-level scope

for(var i = 0 ; i < 4 ; i++){
    oSpan[i].onclick = function(arg){
        return function(){
            console.log(arg);//出现 0,1,2,3
        }
    }(i);
}

However es6 it provides us with a better way to declare variables

let

In es6, a variable is declared let block-level scope

Means an intermediate block-level scope may be used effectively in {}

for(let i = 0; i < 4 ; i++){
    oSpan[i].onclick = function(){
        console.log(i);
    }
}

The above reasons can be found instantaneous value of i and i each are the same following a scope, and independently of each other and function in several cycles. So each function call with a value of i is its scope.

let other roles

No statements were not repeated in the variable declaration will let error

let b = 10;

let b = 20;//报错

let no variable lift this question, let will have a temporary dead zone

console.log(a);//报错

let a = 20;

Top-level object of property

Top-level object in the browser is window, in Node environment global.

Properties and global variables es5 top layer is equivalent to

window.a = 1;
a = 2;
console.log(window.a)//2

Due to the nature of global variables associated with the top-level object, it will have many questions

Can no longer compile time error prompted undeclared variables, will only run in the know
Easy to unknowingly create a global variable, resulting in a top-level object attributes everywhere can read and write, which is not conducive to modular programming
window objects have a physical meaning, referring to the browser window object, this would be inappropriate

But let variable declarations do not belong to the top-level object's properties

var a = 1;

console.log(this.a);//1

let b = 1;

console.log(this.b);//undefined

const

constOne way is the statement of es6

constMost variable declaration is used as a constant, and can not modify the values as constants into read-only mode


const INFO = 10;

INFO = 20; //报错

const INFO = 20;//报错

When constthe time is a reference to the declared data type, the type of reference values can be modified, since the value stored in the reference type stack. Modifying operation is performed in the heap, and the variable is stored in the address is not modified, and the address of the data points has changed, and therefore the value of the variable is modified declared const

const arr = [1,2,3,4];

arr.push(5);

console.log(arr);//[1,2,3,4,5]

es6 way to add variable declarations