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