• JavaScript高级


    一、高级函数

      1、函数回调

      函数回调的本质:在一个函数中,当满足一定的条件,回调函数会当作调用函数的参数传入

      下面这个例子,faa作为回调函数,fbb作为调用函数。在JavaScript中内置的调用函数已经给我们写好了,我们只需写好fbb(回调函数)就好,就算你不写也不出错。

    <script>
        function faa(data) {
            console.log('执行faa函数');//判断函数是否执行
            var start_time = new Date().getTime();
            var stop_time = new Date().getTime();
            //设置执行数据处理数据的时间为3s
            while (stop_time-start_time <3000) {
                stop_time = new Date().getTime();
            }
            var time = stop_time - start_time;
            console.log(data);
            console.log('一共耗时',time)
    
        }
    
        function fbb(func) {
            var data = 'fbb的数据';
            if (func) {
                func(data)
            } else {
                console.log('没有设置回调函数');
            }
        }
    
        fbb(faa)
    
    </script>

      既然已经写到了函数的回调,那么再写一个面向对象的回调

    <script>
    
        var web = {
            recved: null,
            send: function () {
                console.log('开始请求数据');
    
                // 这里模拟请求数据花费的时间
                start_time = new Date().getTime();
                stop_time = new Date().getTime();
                while (stop_time - start_time < 3000) {
                    stop_time = new Date().getTime();
                }
    
                var data = '请求得到后的数据';
    
                if (web.recved && data) {
                    web.recved(data);
                } else {
                    console.log('回调函数没有定义');
                }
            }
        };
        web.recved = function (data) {
            console.log(data);
        };
        web.send();
    
    </script>

      上面这个例子,首先写一个对象,写好它的属性,方法。假如send方法就是内置的,早已经写好的方法,我们执行web.send(),虽然产生数据,但是最为程序员的我们并没有写处理这个数据的方法,所以我们为recved编写了一个处理数据方法,再去执行web.send(),这样产生的数据就能处理了。

      再说,比如事件的绑定,我们为className为div的div标签绑定鼠标点击事件

      在我们没有给div的点击事件写相应的函数时,程序并没报错,一旦为其添上方法,我们在触发该事件的话,那么我们写的方法会作为回调函数去执行。

      2、函数的闭包

      闭包目的:不允许提升变量作用域时,该函数的局部变量需要被其他函数使用

      闭包本质:函数的嵌套,内层函数称为闭包

      闭包的解决案例:①影响局部变量的生命周期,持久化局部变量 ②解决变量污染

    //这就是闭包,一个函数想使用另一个函数局部变量
    function faa() {
        var date = [1,2,3,4];
        function fbb() {
            console.log(date)
        }
        fbb();
    }
    faa();
    //通过闭包,可以提升函数内部的局部变量
    function faa() {
        var data = '获取到的数据';
        function fbb() {
            return data
        }
        fbb();
    }
    
    var a = faa();
    console

    二、循环绑定

    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0 ; i < lis.length;i++) {
            lis[i].onClick = function () {
                alert(i);
            }
        }
    </script>
    /*你在页面点击li标签,会弹出5,上面全部都是弹出5 为什么会这样,就是循环绑定出现的变量污染,var是ES5中定义变量的方法,是没有块级作用域的,当for循环结束时,i就等于5*/

    //我们可以通过闭包函数去解决这个问题
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0 ; i < lis.length;i++) {
        (function(i){ lis[i].onclick = function () { alert(i); };
        })(i) } </script>
    /*我们将为为li标签绑定点击事件的方法,写出一个闭包函数,外函数就是一个匿名函数的自调用。循环一次,先是匿名函数自调用一次,产生一个局部空间存放函数体代码,这样循坏5次,就产生了五个不同局部空间的
    函数,当触发点击事件,就去执行相对应的回调函数,所引弹出的是它对应的索引值*/

    //我们可以通过对象的属性去解决变量污染问题
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0 ; i < lis.length;i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
          alert(this.index)
        };
      }
    </script>
    //前面说了var定义的变量是无块级作用域的,我们可以通过ES6的语法,let去解决变量污染问题
    <script>
     let lis = document.querySelectorAll('li'); 
      for (let i = 0 ; i < lis.length;i++) {
        lis[i].onclick = function () {
          alert(i);
        }
      }  </script>

    三、面向对象Js

    <script>
        //定义两个空对象
        var obj1 = {};
        var obj2 = new Object();
    var zhuyu = {
        name:'zhuyu',  
        age : '21',
      } //创建一个zhuyu对象
      //查看属性的方法:zhuyu.name zhuyu['age']
      //添加/修改属性的方法:zhuyu.age = '22' 添加:zhuyu.sex = 'male'
      //删除属性的方法:delete zhuyu.sex
      //方法的添加修改删除和属性一样。方法的调用直接对象名.方法名()

      //构造函数,相当于python中面向对象的类
      //ES5中
      function People(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.eat = function () {
                console.log('eat.......');
              }
        }
      //JavaScript的面向对象也有继承,多态,封装三大特性。
      简单写写继承:子级里继承父级属性,父级.call(this,name,age);
             子级里继承父级方法,子级.prototype = new 父级;

      //ES6中
      clsaa People() {
        constructor(name,age) {
          this.name = name;
          this.age = age;
        }
        //实例方法
        eat() {console.log('eat........')}
        //类方法
        static do() {'do.....'}
      }
      
    </script>

    四、定时器

    //setInterval(持续性定时器)
    //setInterval(函数, 毫秒数, 函数所需参数(可以省略));
    var timer = setInterval(function() {console.log("呵呵");}, 1000)
    
    
    //setTimeout(一次性定时器)
    //setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
    setTimeout(function (data) {console.log(data);}, 1000, "数据");

    //清除定时器
    clearTimerout()|clearInterval()

      

  • 相关阅读:
    47c# 新建线程Thread,线程内与操作窗体控件
    48Command line is too long. Shorten command line for Test or also for
    MySQL 基础
    MySQL 的 GRANT和REVOKE 命令
    Linux 配置免密登录
    本地多个rdb文件,导入自建redis
    自建codis上阿里云
    Windows删除指定目录下的3天前的文件
    VS2017:提示“Error MSB8020 The build tools for v142 (Platform Toolset = 'v142') cannot be found. 。。。。”错误解决办法
    根据文件File,返回名称excel名称管理器对应的行和列
  • 原文地址:https://www.cnblogs.com/zhuchunyu/p/9832429.html
Copyright © 2020-2023  润新知