JavaScript進階之this

時間 2019-11-29

原文原文鏈接

javascript的this，一個不知道究竟屬於誰的東西

this是一個大利器，用好了就能夠幫咱們省掉不少事，然而事實上卻老是讓咱們出錯。本身就吃過很大的虧。如今我們就來扒一扒this到底是什麼。
本身看過不少博客或者帖子，看了以後老是感受當時明白了。後面用的時候老是各類混亂。其實並不是人家講得很差，實在是本身沒有真正理解到，後面經過作項目纔算是看透了一些東西。javascript

首先咱們得死記一句話，this指向的是當前對象。

那麼這個對象究竟指的是什麼。什麼是對象。咱們從如下幾個方面來理解：html

JavaScript是一種弱類型的語言，和一些強類型的語言如java，C#等不一樣。js的對象和他們的對象不同，js的全部數據都是對象，廣泛的對象就是若干鍵值對的組合。而在java，C#中是先有類，再經過類來建立實例，這個實例叫作對象。ps：在ES6中js推出了class這個概念（本人表示很是喜歡這樣發展）。
js全部數據都是對象，言外之意就是：number，array，function，null，erro,reg,date,{一系列鍵值對的組合}等等數據類型均可以看做對象。
咱們有多種方式建立對象，new functionName或者直接var Myobject={一系列鍵值對}等等

下面咱們就來用一個demo來看看吧

首先咱們建立一個構造函數。這個構造函數相似於Java中類的構造函數，Js的構造函數的目的也是初始化值的做用，只是JS中無需先寫class，直接寫一個構造函數而後new這個構造函數就能夠建立一個對象。java

var person=function (name) {
     this.name=name;
     this.show=function () {
         alert("個人名字是 "+this.name);
     }
}

咱們能夠看到構造函數裏面有this，這個this.name就是指向這個函數中建立的name；符合咱們以前的那句話，this指向當前對象。

咱們再添加一段Html代碼以顯示效果函數

<body>
<div>
    <div>
        <button id="test">查看愛好</button>
    </div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>

而後咱們爲這個id爲test的按鈕綁定一個事件，此時js代碼變爲this

var person=function (name) {
     this.name=name;
     this.show=function () {
         alert("個人名字是 "+this.name);
     }
}

var pengl=new person("PengL");
document.getElementById("test").addEventListener("click",function() {
    pengl.show();
});

咱們點擊這個按鈕能夠看到調試

如今咱們來分析一下代碼，咱們經過var pengl=new person("PengL");來建立了一個對象，此時this指向的即是PengL這個當前對象，而後將對象的show方法綁定爲按鈕的點擊事件，點擊按鈕後經過彈出框能夠看到this.name指向的名字。說明到如今爲止。this，指向當前對象仍然是正確的。

那麼問題來了，若是咱們不用new建立對象，直接調用這個函數會怎麼樣呢。咱們把代碼改爲這樣code

var person=function (name) {
     this.name=name;
     this.show=function () {
         alert("個人名字是 "+this.name);
     }
}

//var pengl=new person("PengL");
var pengl=person("PengL");

document.getElementById("test").addEventListener("click",function() {
    pengl.show();
});

而後運行點擊按鈕查看效果，這時咱們發現沒有反應，咱們打開控制檯調試看，發現報錯

咱們能夠看到控制檯下面顯示show屬性undefined，爲何會這樣。明明在構造函數中定義了show的呀。然而實際狀況是這樣：咱們此次沒有新建對象，而是直接把函數賦給了變量PengL，這時咱們須要考慮的問題是什麼？當前對象是誰？是這個函數嗎？函數不也是對象嗎？事實是若是沒有新建對象。那麼這些普通函數都屬於一個大對象，那就是document對象。因此如今this，指的是document對象。而document對象並無定義show方法，因此此時報錯show爲undefined。htm

經過上面的例子咱們能夠看到，this指向當前對象並無錯，重點是咱們得弄明白當前對象是哪一個，好比咱們直接在html代碼中添加onclick事件

<button  value="aihao" onclick="GetButton(this.value)">
    查看愛好
</button>

這時這個this指向的即是button元素這個對象，this.value即可以獲取button的value值。

如過在js中經過this來獲取value值

function GetButton () {
 alert(this.value);  
}

這時this指向的即是document對象，又會出現value undefined的錯誤了。

經過以上例子咱們總結出如下幾點：對象

找準當前對象是誰
this指向當前對象
建立對象後this才能指向這個對象，直接調用函數是沒用的
普通函數和全局變量等屬於的對象都是document

這就是我想要分享的對於this的理解，可能有些同窗對於js的對象這有一些不熟悉，看demo的時候會有些不容易理解，網上有不少大牛寫的關於對象的博客。你們能夠去看看。後面要是有機會，筆者也嘗試看能不能把對象也來講說清楚!!!blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。