Detailed examples explain the shortcomings of using var to declare variables

This article brings you relevant knowledge about javascript, which mainly introduces the related issues about the insufficient use of var to declare variables. Using var to declare variables allows repeated variable declarations, causing data to be Coverage, let’s take a look at it below, I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end]

Problems with declaring variables

• Use var to declare variables (duplicate variable declarations are allowed: causing data to be overwritten)

Variable promotion

• Weird Data access

• Closure problem

• Variables in the function will be promoted to the top

• Variables in the global scope will also be promoted Go to the top

Defects in var declaration of variables in JavaScript

• Not declared It can be used (variables declared with var will be precompiled or variable hints), but this is not logical.

• The same variable can be declared multiple times, but strictly speaking, after a variable is declared once, it can only be modified rather than declared later. It's not logical either.

• Loop parameters in a for loop can be used outside the loop (the for loop is polluted) beyond the original main control of the loop. Not logical.

• There is no block-level scope.

Let’s take an example

//首先判断生成一个随机数当随机数小于0.5时声明a赋值为‘abc’
//然后输出a

if (Math.random() < 0.5){
	var a = 'abc';
	console.log(a);
}
//如果不是那么输出a
else {
	console.log(a)
}

console.log(a);

There is a very serious problem here. Let’s take a look. Read it:

First determine and generate a random number. When the random number is less than 0.5, declare a and output a

. Then if it is not less than 0.5, it also outputs a

. Then this a In fact, it does not exist because the global scope has an a due to the variable promotion problem. Although it can be read, the global scope is polluted because of the variable promotion.

Normally, this seems to be no problem, but if you put this string of code in any other language and write similar code, it will definitely report an error. At the same time, because of this problem, it will make it difficult for large applications to a certain extent. .

Let us look at the closure problem again:

//选中div
var div = document.getElementByTd('div');
//我这里创建10个按钮并添加进代码里

for (var i = 1; 1 < 10; i ++){
	var btn = document.createElement('button');
	btn.innerHTML = '按钮' + i;
	div.appendChild(btn);
	//添加点击事件点击按钮时输出对应的i
	btn.onclick = function () {
		console.log(i);
	}
}
//但是当点击输出时所有的按钮都为11
//原因是当在for声明变量i时遇到了变量提升就导致了来来回回更改的就只有这一个i
//而当我们点击时for早已循环完所以循环完成时i = 11；就输出也是11了
//
//一般我们的解决办法是将点击事件上写一个立即执行函数执行完删除方可正常运行

Global variables are mounted to global objects: Global object member pollution problem

var abc = "123"
console.log(abc);
//可以正常输出对吧，这就导致了一个问题
//我可以将abc挂载到window上如果说我要写很多的代码那就会导致全局变量污染

//然后我给console赋值
var console = "abc";
console.log(console);
//然后再输出console会报错
//因为我对window的console进行了覆盖所以会报错

This is the various problems and inconveniences encountered by the original JS

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of Detailed examples explain the shortcomings of using var to declare variables. For more information, please follow other related articles on the PHP Chinese website!