JavaScript高级

摘要:
JavaScript中的内置调用函数是为我们编写的。我们只需要写联邦调查局。即使不编写,也不会出现错误functionfaa{console.log;//判断函数是否执行varstart_time=newDate().getTime();varstop_time=newDate).getTime();//将执行数据处理的时间设置为3秒vartime=停止时间开始时间;安慰日志安慰log}函数fbb{vardata='fbb data‘;if{func}else{console.log;}}Fbb现在函数回调已经编写完毕,编写另一个面向对象的回调varweb={received:null,send:function(){console.log;//这里是模拟请求数据start_time=newDate().getTime();stop_time=newDate).getTime();而{stop_time=newDate(Vardata='请求后的数据';如果{web.recved;}否则{console.log;}};web.recved=函数{console.log;};网状物send();在上面的示例中,首先编写对象、其属性和方法。

一、高级函数

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

  

免责声明:文章转载自《JavaScript高级》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linux--安装node.jsVim 注释多行下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JQuery ajax回调函数

转自http://zhengyh2008.blog.163.com/blog/static/13894713201003041633526/ jquery ajax 回调函数 返回值 js文件: $.ajaxSetup({ async: false }); function oncheck(oid){var rs=true;if(oid=="stunu...

【转】力控的60个经典问题

1:我已经安装加密锁了,为何安装运行包后运行工程还提示找不到加密锁?这是因为安装运行包后,需要人工对软件进行注册。请打开运行包释放后所在文件夹,手工运行其中的“Registry”程序进行软件注册,这样加密锁就可以找到了。2:安装完运行包后如何卸载?卸载运行包需要两个步骤: 1、手动删除运行包安装后生成文件夹及文件夹中的内容; 2、删除注册表(1)Windo...

less和scss

一、less基础语法 1、声明变量:@变量名:变量值;      使用变量:@变量名; 2、混合(Mixins) 1)无参混合 声明: .class{} 调用:在选择器中,使用.class;直接调用 2)有参无默认值混合: 声明:.class(@param){...

WSL2 配置及ubuntu18.04安装mysql8.0+

wsl2 完整配置 参考将WSL2作为生产力工具 Installing, this may take a few minutes… WslRegisterDistribution failed with error: 0x800701bc Error: 0x800701bc WSL 2 ??? https://aka.ms/wsl2kernel Pres...

perl学习一:探索Perl世界

1.perl4种变量 scalar: $ 纯变量,标量array: @hash: %file: 大写 2.变量组成 1.命名规则 大小写敏感 、 字母数字下划线。。。2.无关键字,$+其他,但不可以与内置变量冲突。3.命名长度无限。 3.纯变量中:整型、浮点型、字符、字符串、 整数变量 1.可以用_分割字符数字 2.012为八进制10 3.0x1f为16进...

Java的各类型数据在内存中分配情况详解

1.      有这样一种说法,如今争锋于IT战场的两大势力,MS一族偏重于底层实现,Java一族偏重于系统架构。说法根据无从考证,但从两大势力各自的社区力量和图书市场已有佳作不难看出,此说法不虚,但掌握Java的底层实现对Java程序员来说是至关重要的,本文介绍了Java中的数据在内存中的存储。      2 内存中的堆(stack)与栈(heap) ...