分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

JS中的this的应用总结

发布时间:2023-09-06 01:24责任编辑:白小东关键词:暂无标签
 简述this的用法
  “this是由被调用的方式确定”这个事实,使得this可以被改变,从而为函数增加了动态性,可变性,使得变成更加灵活。目前因为工作经验有限,暂时总结
一下五种情况下的this的用法,以后有时间应该从ECMA规范上来深入地理解一下this的应用。
1.情况一:以函数的形式调用,this是window
1 ????????console.log(this);//window2 ????????function fu(){3 ????????????console.log(this);4 ????????}5 ????????fu();//window
2.情况二:以方法的形式调用,this是调用方法的对象
1 ????  var obj ={name:‘this‘};2 ????????function foo(){3 ????????????console.log(this);4 ????????}5 ????????obj.foo=foo;6 ????????obj.foo();//输出obj ??{ name: ‘this‘, foo: [Function: foo] }
3.情况三 : 以构造函数的形式调用
1 ????????function D() {2 ????????????this.name =‘test‘;3 ????????????this.age =18;4 ????????????console.log(this);5 ????????}6 ????????var d = new D();//输出d对象7 ????????d.name =‘hewenfeng‘;8 ????????D();//window9 ????????console.log(d);//输出d对象
4.情况四: 在全局作用域中调用
1 ?????console.log(this);//window 
5. 情况五:在响应函数中,给谁绑定事件,this就是谁。
 1 <!DOCTYPE HTML> 2 <html > 3 <head> 4 ????<meta charset="UTF-8"> 5 ?6 </head> 7 <body> 8 <div id="b" onclick="console.log(this)"> 9 <div> 10 </body>11 </html>12 输出:div元素本身13 14 <!DOCTYPE HTML>15 <html >16 <head>17 ????<meta charset="UTF-8">18 </head>19 <body>20 <div id="b" onclick="console.log(this)">21 <div> 22 23 <script type="text/javascript">24 var c=document.getElementById("b");25 c.onclick=function(){console.log(1)}26 27 </script> 28 </body>29 </html>30 输出:131 onclick的绑定方式会覆盖内联式的事件绑定。也可以在c.onclick里输出this,可知道this代表div元素本身。32 33 <!DOCTYPE HTML>34 <html >35 <head>36 ????<meta charset="UTF-8">37 </head>38 <body>39 <div id="b" onclick="console.log(this)">40 <div> 41 42 <script type="text/javascript">43 var c=document.getElementById("b");44 c.onclick=function(){console.log(1)}45 c.addEventListener("click",function(){alert(‘2‘)},false)46 </script> 47 </body>48 </html>49 输出:1,弹出
  addEventListener不会覆盖c.onclick绑定的函数,(自然也不会覆盖内联的onclick,addEventListener就是以叠加的方式绑定事件处理函数的,
就像用addEventListener也可以绑定几个事件处理函数一样)也可以在addEventListener的事件处理函数里输出this,可知道this代表div元素本身。




JS中的this的应用总结

原文地址:http://www.cnblogs.com/xiaoyinspy/p/7812087.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved