JS作用域,消息队列

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript的作用域与消息队列,1,JavaScript的作用域,JavaScript的变量作用域是基于其特有的作用域链的。,JavaScript没有块级作用域。,函数中声明的变量在整个函数中都有定义。,2,JavaScript的作用域,变量的声明,JS中变量申明分,显式申明,和,隐式申明,。,var i=100;/显式申明,i=100;/隐式申明,如果用隐式申明,那么就覆盖了全局变量i,3,JavaScript的作用域链,var rain = 1;,function rainman(),var man = 2;,function inner();,var innerVar = 4;,alert(rain);,inner(); /,调用,inner,函数,rainman(); /,调用,rainman,函数,作用域链：,JavaScript,需要查询一个变量,x,时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义,x,变量，,JavaScript,会继续查找有没有定义,x,变量，如果第二个对象没有定义则会继续查找，以此类推。,4,JavaScript的作用域链,函数体内部，局部变量的优先级比同名的全局变量高,var rain = 1; /,定义全局变量,rain,function check(),var rain = 100; /,定义局部变量,rain,alert( rain );,check();,alert( rain );,5,JavaScript的作用域链,JavaScript没有块级作用域。,function rainman(),/ rainman,函数体内存在三个局部变量,i j k,var i = 0;,if ( 1 ),var j = 0;,for(var k = 0; k 3; k+),alert( k );,alert( k );,alert( j );,i,、,j,、,k,作用域是相同的，他们在整个,rain,函数体内都是全局的。,6,JavaScript的作用域链,函数中声明的变量在整个函数中都有定义,function rain(),var x = 1;,function man(),x = 100;,man(); /,调用,man,alert( x );,rain(); /,调用,rain,上面得代码说明了，变量,x,在整个,rain,函数体内都可以使用，并可以重新赋值,7,JavaScript的作用域链,var x = 1;,function rain(),alert( x );,var x = rain-man;,alert( x );,rain();,是由于在函数,rain,内局部变量,x,在整个函数体内都有定义（,var x= rain-man,，进行了声明），所以在整个,rain,函数体内隐藏了同名的全局变量,x,。这里之所以会弹出,undefined,是因为，第一个执行,alert(x),时，局部变量,x,仍未被初始化。,所以上面的,rain,函数等同于下面的函数,:,function rain(),var x;,alert( x );,x = rain-man;,alert( x );, (,预编译,),8,JavaScript的作用域链,未使用var关键字定义的变量都是全局变量。,function rain(),x = 100; /,声明了全局变量,x,并进行赋值,rain();,alert( x );,9,JavaScript的作用域链,全局变量都是window对象的属性,var x = 100 ;,alert( window.x );/,弹出,100,alert(x);,等同于下面的代码,window.x = 100;,alert( window.x );,alert(x),10,JavaScript的消息队列,JavaScript的核心机制 :,1.Javscript的引擎是单线程的，浏览器任何时候都有且只有一个,JavaScript,进程在执行，同时刻只会有一句,JavaScript,代码被解释器执行。,Javscript,引擎，可以简单的看成消息队列。每个事件，函数（函数里调用的函数不算），timer，interval，DOM操作都被封装成一个个消息包，交由,Javscript,线程独立解释处理 。,11,JavaScript的消息队列,2.DOM操作是封装成一个消息包排队等待处理，如果你的函数一直没有return，那他就一直不会被执行。,3(例)setInterval和setTimeout其实是把后面的函数封装成一个消息包压入队列末端，然后立即返回。不同在于setTimeout只运行一次，setInterval运行一次后再次进入队列末尾，直到你clearInterval为止。,12,jQuery的消息队列,queue和dequeue的过程主要是：1，用queue把函数加入队列（通常是函数数组）2，用dequeue将函数数组中的第一个函数取出，并执行,也就意味着当再次执行dequeue的时候，得到的是另一个函数了同时也意味着，如果不执行dequeue，那么队列中的下一个函数永远不会执行。,13,jQuery的消息队列,div,background:#aaa;,width:18px;,height:18px;,position:absolute;,top:10px;,$(#block1).animate(left:+=100,function(),$(#block2).animate(left:+=100,function(),$(#block1).animate(left:+=100,function(),$(#block2).animate(left:+=100,function(),$(#block1).animate(left:+=100,function(),alert(动画结束);,);,);,);,);,);,14,jQuery的消息队列,利用queue和dequeue,varFUNC=,function()$(#block1).animate(left:+=100,aniCB);,function()$(#block2).animate(left:+=100,aniCB);,function()$(#block1).animate(left:+=100,aniCB);,function()$(#block2).animate(left:+=100,aniCB);,function()$(#block1).animate(left:+=100,aniCB);,function()alert(动画结束),;,varaniCB=function(),$(document).dequeue(myAnimation);,$(document).queue(myAnimation,FUNC);,aniCB();,15,jQuery的消息队列,/清空队列,$(document).queue(myAnimation,);,/加一个新的函数放在最后,$(document).queue(myAnimation,function()alert(动画真的结束了！);,16,