美文网首页
javascript 闭包原理以及var let const作用

javascript 闭包原理以及var let const作用

作者: 黑白说程序 | 来源:发表于2020-09-11 09:10 被阅读0次

在js中,var在if和for中是没有作用域,let在if和for中是有作用域的,他们在函数都是有作用

图中,function中定义个age,无论前面是let还是var 在外面打印都是会报错的( age is not defined)。只有在函数内可以访问到

在if总定义的height变量,是用var定义,log打印是可以打印出120的,但用let定义height是无法打印会报错,这就是因为var在if和for中是没有作用域,let在if和for中是有作用域的

注意 ,函数在多次调用,会开辟多个内存空间,

因为var没有作用域,但是在function里是有作用域,所以就产生了闭包,在es5中用闭包来解决作用域的问题

  //使用let定义变量有作用域

  var butNum = document.getElementsByTagName('button')

    for (let index = 0; index < butNum.length; index++) {

      const element = butNum[index];

      element.addEventListener('click',function () {

        alert('这是第'+index+'个按钮')

      })

    }

    {index=0

      element.addEventListener('click', function () {

      alert('这是第' + index + '个按钮')

    }

    {  index=1

      element.addEventListener('click', function () {

      alert('这是第' + index + '个按钮')

    }

//使用var定义变量没有作用域

  for (var index = 0; index < butNum.length; index++) {

    var element = butNum[index];

    element.addEventListener('click', function () {

      alert('这是第' + index + '个按钮')

    }

    {index=1  //这里的index,会因为var没有作用域所以本来是0,会被下面那个1所覆盖

      element.addEventListener('click', function () {

      alert('这是第' + index + '个按钮')

    }

    {  index=1

      element.addEventListener('click', function () {

      alert('这是第' + index + '个按钮')

    }

    function有作用域,所以利用立即执行函数形成闭包解决

    for (var index = 0; index < butNum.length; index++) {

      var element = butNum[index];

      (function (params) {

        element.addEventListener('click',function () {

         alert('这是第'+params+'个按钮')

       })

      })(index) //立即执行函数

    }

上面的for循环,是相当于把每个button按钮都赋值一个点击事件,let让每个事件都应该有自己的作用域,但是var没有作用域,每个事件用的变量,都会被最后一个值所覆盖

const 在开发中优先使用const,

1.注意一:一旦给const修饰的标识符被赋值之后,不能修改

const myname = ' linlin';

name =‘lili’

2.注意二:在使用const定 义标识符,必须进行赋值

const name ; 这样是报错的 Missing initializer in const declaration

/3.注意三:常量的含义是指向的对象不能修改,但是可以改变对象内部的属性.

const obj={name:‘linlin’,age:‘3’}

const obj=1; 这里是会报错 Assignment to constant variable. 

obj.name='lili'  可以改变对象内部的属性.

相关文章

  • javascript 闭包原理以及var let const作用

    在js中,var在if和for中是没有作用域,let在if和for中是有作用域的,他们在函数都是有作用 图中,fu...

  • 变量声明与闭包

    变量声明 var let const 闭包 子作用域被返回到父作用域,就会形成闭包,例子: 注意一个例子: 更多例...

  • JS中var、let、const区别

    在javascript中有三种声明变量的方式:var let const。let var const的区别?var...

  • js中const,var,let区别

    在javascript中有三种声明变量的方式:var let const。let var const的区别?var...

  • ES6学习

    1、 var let const var是函数作用域let和const是块级作用域,!const是常量,不能改变。...

  • JavaScript中的var、let、const

    JavaScript中定义变量常量的方法有var、let、const,区别如下: var:作用域是函数体内,存在变...

  • 前端面试题 笔记 Javascript篇

    Javascript Async 和 await Let const var 作用域 数组去重 几种? 节流和防抖...

  • ES6

    var可以重复声明不能定义常量不支持块级作用域let const不会变量提升不能重复声明支持块级作用域(效果跟闭包...

  • Vue var ---let---const

    1.在javascript中有三种声明变量的方式:var let const。 let var const的区...

  • JavaScript 变量宣告 var let const

    宣告变量有三种方式: var let const var 与 let、const 的主要差异在于作用域。 作用域(...

网友评论

      本文标题:javascript 闭包原理以及var let const作用

      本文链接:https://www.haomeiwen.com/subject/biupektx.html