this指標在普通函式、物件方法、定時器、建構函式、事件函式、call()、apply()中的執行

阿新 • • 發佈：2019-01-20

前導： this是JavaScript中的一個關鍵字，在不同的場景中，this指向的物件也不同。在其他面嚮物件語言中（如C#），this就是指向當前物件。而在JavaScript 中this是在程式碼執行時繫結的，相對而言this指向比較混亂。在程式碼執行時this可以指向window物件，也可以指向當前呼叫物件，還可以指向其他物件。
Javascript呼叫函式有以下方式：普通函式、物件方法、定時器、建構函式、事件函式、call()/apply()，下面分別分析this在以上函式中的指向
1.this在普通函式中的指向

  //1.在普通函式中this指向
        var name = "張三" 
;
        function demo(){
            var name = '李四';//在函式內部定義並宣告的變數是區域性變數
            console.log(this.name); //張三

        }
        demo(); //其實這也可以看做是window.demo(),只不過我們在平常寫程式碼的時候會自動忽略掉。
        //所以window是函式的呼叫者，this指向window，this下name屬性的值就是全域性變數,所以輸出的
        //是全域性變數 張三，而不是區域性變數 李四

2.this在定時器中指向

setInterval(function 
(){
            var a = 12;
            alert(this.a);
        },1000) //undefined ,歸其本質setInterval方法也屬於window，因為window物件下沒有a屬性，所以
        //瀏覽器會每隔一秒彈出值為undefined的提示框


這個案例也很好玩
function Demo(){
            this.a = 12;
            setInterval(this.show,1000); 
        }
        Demo.prototype.show = function 
(){
            alert(this.a);
        }
        var demo = new Demo();
        demo.show(); //第一次彈出12，之後每隔一秒彈出undefined
        //原因在this.show代表了Demo.prototype.show的函式體，this指向Demo，所以第一次彈出12；
        //之後延遲定時器開始工作，定時器時鐘到達之後this指向window，window下沒有a屬性，所以每隔一秒彈出undefined

3. this在物件方法中的指向

            name : '張三',
            sayHi : function(){

                alert(this.name);
            }
        }

        var demo = obj.sayHi();
        demo();//張三，如果一個物件中的方法有this，那麼上一級呼叫這個方法時，this將指向上一級的物件

4.this在建構函式中的指向

//4.this在建構函式中的指向
        function Person(name,age){
            this.name = name;
            this.age = age;
            function sayHi(){
                alert('hello');
            }
            return sayHi;
        }

        var per = new Person('張三',14);
        console.log(per);//new關鍵字在記憶體中開闢了新的記憶體空間，並返回首地址的值，並將this指標指向了這塊
        //剛開闢的記憶體空間上，輸出結果是person物件。但是如果取消return註釋，輸出值為sayHi函式體，原因如下：
        //如果建構函式又返回的值的話，JS引擎會分析返回值的型別，如果返回值型別為Number()、字串等基本型別，
        //則不會替代new所建立的物件，如果返回值是引用型別，則將替換new創建出來的物件，因為new創建出來的物件
        //也是引用型別，JS引擎無法分辨，將new替換。

輸出列印
5.this在事件函式中的指向

<body>
    <button id="btn">點選</button>
</body>
<script>
    var btn = document.querySelector('#btn');
        btn.onclick  = function(){
            function fn(){
                alert(this); //彈出window,如果事件函式中還有其他函式存在，那麼this指向window
                //如果想要修改this的指向，可以使用一下兩種方法

            }
            fn();
        }
</script>

解決方法：

<body>
    <button id="btn">點選</button>
</body>

<script>
    var btn = document.querySelector('#btn');
        btn.onclick  = function(){
            var _this = this; //將this指標賦值給一個變數
            function fn(){
                alert(_this);//指向button物件

            }
            fn();
        }
</script>

<body>
    <button id="btn">點選</button>
</body>

<script>
    var btn = document.querySelector('#btn');
        btn.onclick  = function(){
            function fn(){
                alert(this);//指向button物件

            }
            fn.call(this);//call()改變this的指向
            //call()方法裡面需要兩大類引數，第一類引數是要修改指標指向的引數，只能有一個引數，並且只能放在第一個位置，第二類引數是函式中需要傳參的引數。如果函式不需要傳參，則只需要寫第一類引數;//apply()同理，但是引數的存放形式不同，引數必須放在[ ]裡面

        }
</script>

this指標在普通函式、物件方法、定時器、建構函式、事件函式、call()、apply()中的執行

this指標在普通函式、物件方法、定時器、建構函式、事件函式、call()、apply()中的執行

詳解this指標--為什麼空的物件指標可以呼叫成員函式

黑馬程式設計師--OC基礎--類方法、物件方法和self的使用

python --類方法、物件方法、靜態方法

jQuery 筆記 —— $.each、$().each方法與選擇器過濾寫法

根據字串名稱動態呼叫Python的函式和物件方法

動態呼叫Python的函式，物件方法以及屬性

使用AlarmManager啟動廣播、服務、頁面（Android定時器）

NSTimer、CADisplayLink、GCD 三種定時器的用法

Spring 定時器配置基於配置檔案（使用 Spring3.2 、 quartz-1.6.5）

SysTick定時器應用之一——用於延時函式

jquery 定時器每隔15秒呼叫函式

Matlab 定時器或串列埠回撥函式繪圖時彈出新視窗的問題

靜態成員函式、this指標、物件指標和動態物件使用小結

Day40、this指標和常函式、解構函式、物件的建立和銷燬過程、拷貝構造和拷貝賦值（深拷貝、淺拷貝！）

物件指標、this指標和智慧指標

python 學習檔案開啟模式及物件方法（os、os.path模組中關於檔案/目錄常用的函式使用方法）

1 python 函式、陣列、物件的使用方法

JavaScript基礎總結深入（資料型別、資料_變數_記憶體、物件、函式、回撥函式、this）

Java第十五天學習筆記~常用物件API（Spring類特點、建構函式、常用方法）

this指標在普通函式、物件方法、定時器、建構函式、事件函式、call()、apply()中的執行

相關推薦