一. 前言
js的this指代的东西有以下三种情况:
-
直接使用this,指的是window对象
-
在对象的方法中使用this,指的是当前对象
-
在标签的事件属性中使用this,指的是当前标签
接下来针对上面的三种情况,分别举例说明。
二. 直接使用this
上面我们已经,直接使用this,this指的就是window对象:
<script type="text/javascript"> console.log(window); console.log(this); //输出的内容和上面一样 </script>
输出如下图:
可以看到alert也是window的一个对象,所以我们也可以采用window.alert()的方式来调用alert;除了上面的直接使用,我们还可以把this放在函数中,效果和直接使用上面的直接使用this是一样的。
<script type="text/javascript"> function zj() { console.log(this); } zj(); </script>
三. 对象方法中使用this
在对象的方法中使用this,指的不再是window对象,此时的this指的是当前类的 对象:
<script type="text/javascript"> function f() { console.log(this); } var book ={ id:1001, name:"西游记", author:"吴承恩", price:9.9, show:function () { console.log(this); } }; book.show(); //{id: 1001, name: "西游记", author: "吴承恩", price: 9.9, show: ƒ} console.log(this); //见下图 </script>
此时我们再输出一下window对象可以看到,book类以及f函数,都可以在window对象中找到。也就是说,声明的函数和对象会默认保存在window对象中。
四. 在标签的事件属性中使用this
在标签的事件属性中使用this,this指的便是当前标签,首先我们准备一个方法,传入x,返回x,我们传入this,返回了window对象:
<script type="text/javascript"> function aj(x) { console.log(x); } aj(this); //输出window对象 </script>
接下来,我们在某个标签的事件中,调用aj方法,输出内容将不再是window对象,而是当前标签:
<body> <!--鼠标点击的时候调用aj方法,传入this--> <button id="btn1" onclick="aj(this)" >按钮1</button> <!--输出:<button id="btn1"onclick="aj(this)">按钮1</button>--> <script type="text/javascript"> function aj(x) { console.log(x); } </script> </body>
再以a标签举例:
<body> <button id="btn1" onclick="aj(this)" >按钮1</button> <a href="#" onclick="aj(this)">链接</a> <!--输出<a href="#" onclick="aj(this)">链接</a>--> <script type="text/javascript"> function aj(x) { console.log(x); } </script> </body>
请登录之后再进行评论