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(){執行語句};

本次分享就到這裏

謝謝你們的觀看

以爲不錯請點贊

但願能對你們有所啓發

有更好的方法或不一樣的意見請在留言區跟我交流