深入理解this對象

最近一直在看js關於面向對象編程方面的東西，那么this肯定是需要一個被吃透 理解 同時靈活運用的對象

現在總結一下自己的學習成果：

我們可以用一句很形象的話來理解什么是this關鍵字？

"this關鍵字引用的是 包含它的那個函數 作為某個對象的方法 被調用時所屬的那個對象"，this會根據周圍的環境改變而改變

這句話我用幾個空格隔開分開作為理解的標准，下面引入一個實例，具體分析這句話的含義

var sound='Roar!';
function myOrneryBeast(){
    alert(this);
    this.style.color='green';//this指代的是window對象
    alert(sound);
}

如果我們運行這段代碼會發現this在火狐下會提示指向window對象，這是為什么？

我們對照上面的話一句句分析：

this關鍵字引用的是 包含它的那個函數(myOrneryBeast) 作為某個對象的方法(我們默認沒有注明的函數全是在window對象下的) 被調用時所屬的那個對象(myOrneryBeast)。

如果不信你運行window.myOrneryBeast()和執行myOrneryBeast()是一個效果，這樣子就證明了myOrneryBeast()是window對象下的一個方法。

但是這句話其實接着執行到 this.style.color='green';//this指代的是window對象時會報錯，因為this指向了window對象而window對象並沒有style屬性，所以會報錯！

但是我們知道this的環境可以隨着函數被賦值給不同的對象而改變，所以看下面這段代碼

var sound='Roar!';
function myOrneryBeast(){
    alert(this);
    this.style.color='green';//this指代的是window對象
    alert(sound);
}
window.onload=function(){
    document.getElementById("a").onclick=myOrneryBeast;
}

html頁面結構很簡單一句話：<p id="a">js</p>

那么此時我們接着運行代碼會發現此時火狐下的this對象指向了html的p元素

我們繼續分析之前那句話看為什么會發生這種變化：

this關鍵字引用的是 包含它的那個函數(onclick) 作為某個對象(p)的方法 被調用時所屬的那個對象(p),

此處要注意一個問題

window.onload=function(){
    document.getElementById("a").onclick=myOrneryBeast;
    //這一句會正常執行，因為可以將它理解為onclick方法引用了myOrneryBeast方法，更直接的可以理解為創建了一個名為onlick的函數，而這個函數就是myOrneryBeast，那么此時的this的引用是:包含它的那個函數（onclick），作為某個對象的方法（p），被調用時所屬的那個對象（p）;
    /*細致的分析*/
    /*document.getElementById("a").onclick=function(){
        myOrneryBeast();
        //這樣子寫會報錯，表面上看貌似是this應該只想當前html對象，但是實際
        這句話只是執行了myOrneryBeast函數，那么他的this對象仍然指向window；
    }*/
}

所以在此我相信我已經把this解釋的很清楚了！

那么在this中有個高級應用，是我接下來要說的，如果去自主修改this的環境指向，可以通過call()和apply()方法

請看下面這段代碼

function doubleCheck(){
        this.msg='Are you sure you want to leave?';
}/*創建一個構造函數*/
doubleCheck.prototype.sayGoodbye=function(){    
    return confirm(this.msg);
}/*構造函數的一個公共方法*/

var clickedLink=new doubleCheck();
    var links=document.getElementsByTagName('a');
    for(var i=0;i<links.length;i++){
        links[i].onclick= clickedLink.sayGoodbye;
        }
    }

我們希望的運行結果就是每次通過點擊a鏈接，都能觸發一個名為'Are you sure you want to leave?'的彈窗事件，但是如果你照這么寫肯定會事與願違，因為通過前面的講解，我們應該清楚此時的this應該指向的是html中的a對象，如果還不清楚，請回看上面內容！！

但是我們實際希望的是this指向doubleCheck對象，那么這時候我們就可以通過call()方法和apply()方法來實現this環境的改變

格式為clickedLink.sayGoodbye.apply(clickedLink)<==>等價於clickedLink.sayGoodbye.call(clickedLink);

二者的區別在於函數參數的設置方法，一個是依次寫出(call)，並跟在第二參數之后，一個是寫成數組形式(apply)，傳入第二參數，推薦使用后者，因為可以使用arguments對象作為傳參方式

具體實例：位於 暫存架/js dom編程文件夾/this.對象  這里寫下來 害怕日后找不到-.-