zoukankan      html  css  js  c++  java
  • js闭包使用之处

    1。循环绑定
    No Use:
      var lists = document.getElementsByTagName('li');
      for(var i=0;i<lists.length;i<l;i++){
       lists[i].onclick=function(){alert(i);};
      }

    结果:点击每一个li,都是弹出lists.length的值。
    原因:onclick事件中的i值只是引用,最后循环执行完了,
    i = lists.length。

    Use:
     var lists = document.getElementsByTagName(‘li’);
     for(var i=0;i<lists.length;i<l;i++){
      lists[i].onclick=function(k){
       return function(){
        alert(k);
       }
      }(i);
     }

    结果:点击每一个li,弹出对应li的编号i值。--》点击观看效果。

       

    原因:将i值传递进内部的函数中,此时函数已经执行了,所以,i这个值就是当时的值。

    2。配置对应访问
    No Use:
     function getType(type){
      var list = {
      ‘a’:'配置一',
      ‘b’:'配置二',
      ‘c’:'配置三'
      }
      return list[type];
    }

    结果:返回需要的配置值。
    分析:每次调用都需要重新定义list变量以及赋值;

    Use:
     var getType = function(){
      var list = {
      ‘a’:’配置一’,
      ‘b’:’配置二’,
      ‘c’:’配置三’
      };
      return function(type){
        return list[type];
      };
     }();

    --》点击观看效果。

    结果:返回需要配置值。
    分析:只需要定义与赋值一次list变量。

    3。封装类
    No Use:
     function ClassA(name){
      this.name = name;
      this.getName = function(){
       return this.name;
      }
     }
    结果:正常定义需要类。
    Use:
      var ClassA = function(){
       function init(name){
        this.name = name;
        this.getName = function(){
          return this.name;
        }
      }
      return init;
     }();
    结果:更进一步封装类。看起来优雅些。

    4。自执行,避免全局变量污染
    No Use:
     var a = ‘1’;
     var b = ‘2’;
     alert(a+b);

     结果:弹出12。
    分析:多了两个全局变量a与b。

    Use:
      function(){
       var a = ‘1’;
       var b = ‘2’;
       alert(a+b);
     }();

    结果:弹出12。
    分析:函数执行完,变量a与b消失,不存在全局变量。

    5。将json对象的公用函数私有化
    No Use:
     var data = {
      getA:function(){return ‘A’},
      getB:function(){return ‘B’},
      p_get:function(){return this.getA()+this.getB();}
     }
     data.p_get();

    结果:返回’AB’。
    分析:getA与getB方法,只是提供给p_get方法使用,属于私有方法,不应该变成公用方法,data.getA()也能访问得到。

    Use:
      var data = function(){
       function getA(){return ‘A’};
       function getB(){return ‘B’};
       var json = {
         p_get:function(){return getA()+getB();}
       }
       return json;
      }();
      data.p_get();

    结果:返回’AB’;
    分析:getA与getB只能在内部访问,无法通过data.getA方式访问。

  • 相关阅读:
    CSS基本知识(慕课网)
    html基本标签(慕课网)
    我为什么要写博客
    Android项目实战(三十二):圆角对话框Dialog
    02-05 scikit-learn库之线性回归
    02-36 支持向量回归
    02-25 scikit-learn库之决策树
    02-29 朴素贝叶斯(垃圾邮件分类)
    C-02 推荐系统
    05-02 特征选择
  • 原文地址:https://www.cnblogs.com/chaofei/p/5967410.html
Copyright © 2011-2022 走看看