ECMAScriptJavaScript中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>

  示例图片:

   ECMAScript 1

  那里,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>

       示例图片:

ECMAScript 2

ECMAScript 3

  那里对各种对象都屈居了showname方法,那里运用this的话就毫无每3个目的都重复写一个方法,有利于方法的复用,收缩无用的代码。

 

    

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>

    

    ECMAScript 4

    

 

(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>

 

  示例图片:

  ECMAScript 5

 (3)规律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>

 

 

  示例图片:

  ECMAScript 6

  能够观望,弹窗就是格外数组的情节;那里针对数组

 

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>

 

     执行效力图:

    ECMAScript 7

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>

 

  执行效果:

  ECMAScript 8

 

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

 

  

此次分享就到那里

   多谢大家的收看   

 

认为不错请点赞

 

但愿能对大家有着启发

有更好的点子或分歧的视角请在留言区跟本人交换