zoukankan      html  css  js  c++  java
  • js闭包绑定元素

    闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:   1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。   2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。   

    简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

    常见的陷阱:
    function createFunctions(){
      var result = [];
      for (var i=0; i < 10; i++){
        result[i] = function(){
          return i;
        };
      }
      return result;
    }
    var funcs = createFunctions();
    for (var i=0; i < funcs.length; i++){
      console.log(funcs[i]());
    }
     
    开始以为输出的是0~9,其实界都是10个10,以为他是等for循环完之后才会做赋值,而不是每循环一次就

    实例:
    循环绑定元素:
    方法一:
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <script type="text/javascript">
    var div = document.getElementsByTagName('div')
    for( var i=0;i<div.length;i++) {
    (function (i) {
    console.log(div[i].innerHTML);
    div[i].onclick=function () {
    alert(div[i].innerHTML)
    }
    })(i);
    }
    </script>
    这是一个简单的闭包,它会循环绑定<div>元素,点击哪个<div>,就会弹出它<div>所包含的内容

    待续...


  • 相关阅读:
    VUE图片懒加载-vue lazyload插件的简单使用
    vuejs+axios发送请求
    Vue2.0+Node.js+MongoDB全栈打造商城系统
    Vue基础知识之vue-resource和axios
    vue-resource
    css3 转换 过渡 及动画
    css sticky footer布局
    vue 前端生成二维码 (带图标)
    微信小程序学习四
    tradingview绘制K线周期切换保留指标
  • 原文地址:https://www.cnblogs.com/MyIsLu/p/6554875.html
Copyright © 2011-2022 走看看