javascript中this的用法实践分析
本文实例讲述了javascript中this的用法。分享给大家供大家参考,具体如下:
实践一:this在点击等事件中的指向
html结构:
clickme
javascript结构:
varbtn=document.getElementById('btn'); btn.onclick=function(event){ console.log(this.innerHTML);//clickme //还有另一种做法如下,用事件对象 varevt=event||window.event; vartarget=evt.target||evt.srcElement; console.log(target.innerHTML);//clickme }
实践二:this在对象字面量json中的指向,指向自身对象
varp={ "name":"Tom", "say":function(){ console.log(this.name+'saysomething!'); } } p.say();//Tomsaysomething!
实践三:this在全局作用域中的使用
vara=1; console.log(this);//window console.log(this.a);//1 functiontest(){ console.log(this);//window this.haha='iamhaha'; }; test();//函数一执行,haha作用域变成全局的 console.log(haha);//iamhaha
实践四:this在定时器中的指向,定时器是window对象的一个方法,定时器中的this指向window对象,setTimeout()和setInterval()是一样的
vardiv=document.getElementById('div'); div.onclick=function(){ varthat=this;//用that来存储当前的div这个dom元素 setTimeout(function(){ console.log(this+'iamthis');//[objectWindow]iamthis console.log(that+'iamthat');//[objectHTMLDivElement]iamthat },100); }
实践五:this在对象中的指向,指向当前实例对象
functionPerson(){ this.name='jack'; }; Person.prototype={ buy:function(){ console.log(this.name+'gobuy!'); } } varp=newPerson(); console.log(p.name);//jack; p.buy();//jackgobuy!
实践六:this在闭包中的应用1
varage=20; varperson={ "age":10, "getAgeFunc":function(){ returnfunction(){ returnthis.age;//this指向window }; } }; console.log(person.getAgeFunc()());//20 /* 分析这段代码:person调用getAgeFunc()在内存中返回一个函数,这个函数是全局的,然后加个()执行。那么,返回20 */
实践七:this在闭包中的应用2
varage=20; varperson={ "age":10, "getAgeFunc":function(){ varthat=this; returnfunction(){ returnthat.age;//that指向person }; } }; console.log(person.getAgeFunc()());//10 /* 分析这段代码:person调用getAgeFunc()用that代替当前对象,当执行返回的闭包函数时,age是person对象的一个属性那么,返回10 */
实践八:用call和apply改变this的指向,以后会详细分析call和apply以及闭包的概念
varperson={ "name":"Tom", "say":function(x,y){ console.log(this.name+'say'+x+''+y); } } varstudent={ "name":"Lucy" } person.say.call(student,'hello','world');//Lucysayhelloworld person.say.apply(student,['hello','javascript']);//Lucysayhellojavascript
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。