var、let、const的区别和使用

最新推荐文章于 2023-10-15 16:34:02 发布

绿皮橘子

最新推荐文章于 2023-10-15 16:34:02 发布

阅读量686

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51719919/article/details/119683090

版权

ES5及以前定义变量用var

var没有块级作用域，所以会带来很多的问题。

  var name = 'aa'
  function changeName() {
    name = 'abab'
  }
  changeName()
  console.log(name)

这里最终会输出 “abab”，就是因为var没有块级作用域的概念，所以在任何地方修改它都可以影响所有引用它的地方的输出。典型的使用场景就是为按钮绑定点击事件的时候

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
  <button>按钮四</button>
  <button>按钮五</button>
</body>
<script>
  const btns = document.getElementsByTagName('button')
  for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
      console.log('第' + i + '个按钮被点击了')
    }
  }
</script>
</html>

这段代码运行之后结果是，无论你点击哪个按钮，都是输出：第5个按钮被点击了
原理就是var没有对于for的块级作用域，在你点击任何一个按钮的时候，外层循环的变量 i已经被改变成5了，所以所有按钮接受到的参数都是5
这段代码实际上就跟以下代码的作用一样

 var i = 5
 {
   btns[i].onclick = function () {
     console.log('第' + i + '个按钮被点击了')
   }
   btns[i].onclick = function () {
     console.log('第' + i + '个按钮被点击了')
   }
 }

每一个点击事件被触发时候，用的都是一个变量i
当然我们可以利用闭包和立即执行函数来完善代码使其达到我们想要的输出

const btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
  (function(num){
    btns[i].onclick = function () {
    console.log('第' + (num+1) + '个按钮被点击了')
  }
  })(i)
}

这样就会分别输出对应的序号了
在这里插入图片描述

ES6中let

let具有对于for的块级作用域，所以我们只需要将var修改为let就可以实现想要的输出了，这同样类似于以下代码

  {let i = 1
    btns[i].onclick = function () {
      console.log('第' + i + '个按钮被点击了')
    }
  }
  {let i=2
    btns[i].onclick = function () {
      console.log('第' + i + '个按钮被点击了')
    }
  }

每个按钮都有一个自己的function，而函数具有块级作用域，所以不会被别人牵着鼻子行走。

ES6中的const

const用来定义常量，常量不能被修改，在实际开发中都建议用const定义标识符，这样可以避免被别的同事修改。
在这里要理解常量的含义，是指向的对象不能修改，但是对象里面的属性可以修改，这就涉及到内存地址的问题了，const指向的内存地址不变就可以，至于里面的东西，你可以大大方方的改。
还有一下几点需要注意：

  //一旦给const修饰的标识符复制之后，就不能修改
   const name='nn'
   name='nn01'
   //就会报错，不信你试试
   
   //使用const定义标识符，必须进行赋值
   const name;
   //不行，报错，不信试试
   
   //const定义常量，不可以改变obj，但可以改变obj里面的属性
   const obj={
     name:'nn',
     age:18
    }
    obj.age='24'

绿皮橘子

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
var、let、const的区别和使用

ES5及以前定义变量用varvar没有块级作用域，所以会带来很多的问题。 var name = 'aa' function changeName() { name = 'abab' } changeName() console.log(name)这里最终会输出 “abab”，就是因为var没有块级作用域的概念，所以在任何地方修改它都可以影响所有引用它的地方的输出。典型的使用场景就是为按钮绑定点击事件的时候<!DOCTYPE html><html lan
复制链接

扫一扫