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()

  

原文地址:https://www.cnblogs.com/zhuchunyu/p/9832429.html