闭包this.pptx
- 文档编号:2734449
- 上传时间:2022-11-10
- 格式:PPTX
- 页数:16
- 大小:504.30KB
闭包this.pptx
《闭包this.pptx》由会员分享,可在线阅读,更多相关《闭包this.pptx(16页珍藏版)》请在冰豆网上搜索。
闭包、thisHTML5课程版本V2.0课程概要1.闭包的案例(经典面试题)2.闭包是什么3.全面理解JavaScript闭包和闭包的几种写法4.闭包的缺点5.this闭包的案例l闭包的案例(经典面试题)functiongreet(who)variterations=0;returnfunction()console.log(+iterations);returnHello+who+!
;vargreeting=greet(World);console.log(typeofgreeting);/functionconsole.log(typeofgreeting();/string&iterations=1console.log(greeting();/HelloWorld!
&iterations=2console.log(greeting(Universe);/HelloWorld!
&iterations=3/输出不是HelloUniverse.world被闭包封闭保存了起来闭包是什么l如果一个内部函数(函数定义、函数表达式)位于另一个外部函数的函数体内,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
l一般情况下,函数执行完毕后,函数内的局部变量便会被回收。
但是在闭包的情况下,函数执行完毕后,闭包会捕捉到局部变量(和参数),继续占用内存l如果一个函数内部又定义了一个内部函数,并将该函数作为返回值返回或者存储在某个对象的属性里,这时就会有一个外部引用指向这个嵌套的函数。
理解闭包l全面理解JavaScript闭包和闭包的几种写法闭包的缺点l闭包有一个非常严重的问题,那就是内存浪费问题,这个内存浪费不仅仅因为它常驻内存,更重要的是,对闭包的使用不当的话会造成无效内存的产生,看下面的例子:
vararray=;functionabc()varfoo=function()array.push(foo);returnfoo;for(vari=0;i10000;i+)abc();alert(array0=array1);闭包的缺点l通过上面的测试我们会看到这一万次abc()执行所产生的同一个逻辑的闭包的地址并不相同,也就是说它生产了一堆的一模一样的Function对象,这样有好处就是可以以工厂模式产生函数以备使用,然而如果你的稍有不慎将闭包当做常态逻辑使用,就不可避免的会造成内存垃圾。
thislthis是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
functiontest()this.x=1;l随着函数使用场合的不同,this的值会发生变化。
但是有一个总的原则,this指的是调用函数的那个对象。
this的应用场景l事件监听函数中的this给dom对象添加属性方式:
this为注册事件处理程序的dom对象给HTML标签添加属性方式:
this为全局window对象,需要调用的this的话,需要传this参数addEventListener:
this为注册事件处理程序的dom对象attachEvent:
this为全局window对象this的应用场景事件监听函数中的thisvarone=document.getElementByIdx(one);one.onclick=function()alert(this.innerHTML);/this指向的是one元素,这点十分简单.;/事件委托中this不一致的兼容解决方案functionaddEvent(target,type,handler)if(target.addEventListener)target.addEventListener(type,handler,false);elsetarget.attachEvent(on+type,function(type)/把事件处理程序作为事件目标的方法调用/传递事件对象returnhandler.call(target);functionremoveEvent(target,type,handler)if(target.removeEventListener)target.removeEventListener(type,handler,false);elsetarget.detachEvent(on+type,function(type)returnhandler.call(target);this的应用场景纯粹的函数调用l这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
l请看下面这段代码,它的运行结果是1。
functiontest()this.x=1;alert(this.x);test();/1l为了证明this就是全局对象,我对代码做一些改变:
varx=1;functiontest()alert(this.x);test();/1this的应用场景纯粹的函数调用l再变一下varx=1;functiontest()this.x=0;test();alert(x);/0this的应用场景作为对象方法的调用l函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
functiontest()alert(this.x);varo=;o.x=1;o.m=test;o.m();this的应用场景作为构造函数调用l所谓构造函数,就是通过这个函数生成一个新对象(object)。
这时,this就指这个新对象。
functiontest()this.x=1;varo=newtest();alert(o.x);/1this的应用场景call,apply调用lcall()、apply()是函数对象的方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。
因此,this指的就是这第一个参数。
varx=0;functiontest()alert(this.x);varo=;o.x=1;o.m=test;o.m.apply();/apply()的参数为空时,默认调用window对象。
因此,这时的运行结果为0,证明this指的是全局对象。
o.m.apply(o);/this代表的是对象oThankyouforwatching!
主讲人:
金静
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- this