JavaScript中this的用法详解

JavaScript中this的用法详解

    最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题。

1定义   

    this,从字面意思来看就是‘这个’,官方定义:在 ECMAScript 中,要掌握的最重要的概念之一是关键字 this 的用法,它用在对象的方法中。关键字 this 总是指向调用该方法的对象,可以看下下面的示例代码:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div id="div1">你好,this</div>
9 <script>
10 var odiv=document.getElementById('div1');
11 odiv.onmouseover=function(){
12 alert(this);
13 }
14 </script>
15 </body>
16 </html>

  示例图片:

   JavaScript中this的用法详解

  这里,div标签通过事件调用函数。所以,这里的this指向HTML的div标签;

    

    

2使用this的意义

    那为什么这里使用 this 而不是直接使用odiv呢?因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用 this,即可在任何多个地方重用同一个函数。看不懂定义的话我们来看下面的栗子:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <script>
9 function showname() {
10 alert(this.name);
11 };
12 var obj1 = new Object;
13 obj1.name = "obj1";
14 obj1.showname = showname;
15 var obj2 = new Object;
16 obj2.name = "obj2";
17 obj2.showname = showname;
18 obj1.showname(); //输出 "obj1"
19 obj2.showname(); //输出 "obj2"
20 </script>
21 </body>
22 </html>

    示例图片:

JavaScript中this的用法详解

JavaScript中this的用法详解

  这里对每个对象都附上了showname方法,这里使用this的话就不用每一个对象都重新写一个方法,有利于方法的复用,减少无用的代码。

    

3规律与练习   

 

    

(1)规律1与练习1

  

   
    规律1:通过函数名()直接调用:this指向window:

    示例代码:

    

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showname() {
alert(this);
};
showname();
</script>
</body>
</html>

    

    JavaScript中this的用法详解

    

 
(2)规律2与练习2
   
  规律2:通过对象.函数名()调用的:this指向这个对象;本例的对象是狭义的对象(即object);标签对象的栗子见本博客开头的栗子

  练习2:示例代码

     

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showThis() {
alert(this);
};
var obj1 = new Object;
obj1.name = "obj1";
obj1.showThis = showThis;
obj1.showThis();
</script>
</body>
</html>

  示例图片:

  JavaScript中this的用法详解

(3)规律3与练习3

  

  规律3:函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

  练习3:示例代码

  

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showname() {
alert(this);
};
var arr = [showname,1,2,3];
arr[0](); //this--->数组arr
</script>
</body>
</html>

  示例图片:

  JavaScript中this的用法详解

  可以看出,弹窗就是那个数组的内容;这里指向数组

4规律4与练习4   

    规律4:函数作为window内置函数的回调函数调用:this指向window

    练习4:示例代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function showname() {
alert(this);
};
setTimeout(showname,1000);
</script>
</body>
</html>

    执行效果图:

    JavaScript中this的用法详解

5规律5与练习5

  规律5:函数作为构造函数,用new关键字调用时:this指向新new出的对象

  练习5:

  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Person(a){
this.name=a;
}
var zhangsan = new Person("zhangsan");
console.log(zhangsan);
alert(zhangsan.name);
</script>
</body>
</html>

 执行效果:

  JavaScript中this的用法详解

4综合练习  

  练习1:

var obj1 = {
name:'obj1',
arr:[setTimeout(func,3000),1,2,3]
}
document.getElementById("div").onclick = obj1.arr[0];
//函数最终调用者:setTimeout,符合规律⑤ this--->window

    练习2:

  

var obj2 = {
name:'obj1',
arr:[func,1,2,3]
}
document.getElementById("div").onclick = obj2.arr[0]();
//函数最终调用者:数组下标,符合规律③ this--->arr

   练习3

var obj3 = {
name:'obj1',
arr:[{name:'arrObj',fun:func},1,2,3]
}
document.getElementById("div").onclick = obj3.arr[0].fun();
//函数最终调用者:{name:'arrObj',fun:func},符合规律② this--->obj

  

  练习4

<body>
<div id="div1">点我呀</div>
<script>
var div = document.getElementById("div1");
function showname() {
alert(this);
};
div.onclick = showname();
</script>
</body>

  这里你会发现你并没有点击,就已经弹窗了,而且指向window。对象通过事件调用的只能是一个自写的匿名函数,行内js代码除外。

  例:div.onclick=function(){执行语句};

  

本次分享就到这里

谢谢大家的观看

 
觉得不错请点赞
 

希望能对大家有所启发

有更好的方法或不同的意见请在留言区跟我交流

  

上一篇:VS2017 + EF + MySQL 我使用过程中遇到的坑


下一篇:app奔溃经验和应对方式