JavaScript中this的用法详解

时间 2019-12-09

原文原文链接

JavaScript中this的用法详解html

　　　　最近，跟身边学前端的朋友了解，有不少人对函数中的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>

　　示例图片：this

　　这里，div标签经过事件调用函数。因此，这里的this指向HTML的div标签；spa

2使用this的意义3d

　　　　那为何这里使用 this 而不是直接使用odiv呢？由于在实例化对象时，老是不能肯定开发者会使用什么样的变量名。使用 this，便可在任何多个地方重用同一个函数。看不懂定义的话咱们来看下面的栗子：code

 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>

　　　　示例图片：orm

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

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>

(2)规律2与练习2

　　规律2：经过对象.函数名()调用的：this指向这个对象；本例的对象是狭义的对象（即object）；标签对象的栗子见本博客开头的栗子

　　练习2：示例代码

 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 showThis() {
10             alert(this);
11         };
12         var obj1 = new Object;
13         obj1.name = "obj1";
14         obj1.showThis = showThis;
15         obj1.showThis();      
16     </script>
17 </body>
18 </html>

　　示例图片：

(3)规律3与练习3

　　规律3：函数做为数组的一个元素，经过数组下标调用的：this指向这个数组

　　练习3：示例代码

 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);
11         };
12         var arr = [showname,1,2,3];
13         arr[0](); //this--->数组arr
14     </script>
15 </body>
16 </html>

　　示例图片：

　　能够看出，弹窗就是那个数组的内容；这里指向数组

4规律4与练习4 　　

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

　　　　练习4：示例代码：

 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);
11         };
12         setTimeout(showname,1000);
13     </script>
14 </body>
15 </html>

　　　　执行效果图：

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>

　执行效果：

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(){执行语句};

本次分享就到这里

谢谢你们的观看

以为不错请点赞

但愿能对你们有所启发

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