前端-js-this

轉載自：http://www.jb51.net/article/80192.htm 作者：wsion

JS中的this關鍵字讓很多新老JS開發人員都感到困惑。這篇文章將對this關鍵字進行完整地闡述。讀完本文以後，您的困惑將全部消除。您將學會如何在各種不同的情形正確運用this。

我們和在英語、法語這樣的自然語言中使用名詞一樣地使用this。比如，“John飛快地跑着，因爲他想追上火車”。請注意這句話中的代指John的代名詞“他”。我們原本也可以這樣表達，“John飛快地跑着，因爲John想追上火車”。按照正常的語言習慣，我們並不按第二種方式表達。如果我們真按第二種方式說話，我們的家人和基友一定會把我們當成怪胎。說不定不止家人，甚至連我們的酒肉朋友和同事都會遠離我們。類似地，在JS中，我們把this關鍵字當成一種快捷方式，或者說是引用（referent）。this關鍵字指向的是當前上下文（context，下文中將會對此作專門的解釋）的主體（subject），或者當前正在被執行的代碼塊的主體。

考慮以下代碼：


var

person = {

   firstName:
"Penelope",

   lastName:
"Barrymore",

   fullName:
function

() {

   //
正如我們在文中提到的使用“他”作爲代名詞一樣，我們在這裏使用this

 

   console.log(this.firstName
+ "
" 
+ this.lastName);

   //我們其實也可以這樣寫：

   console.log(person.firstName
+ "
" 
+ person.lastName);

   }

  }

如果我們使用person.firstName和person.lastName，某些情況下代碼會變得模棱兩可。例如，全局變量中有一個跟person同名的變量名。這種情況下，如果我們想要讀取person.firstName的值，系統將有可能從全局變量的person變量中讀取firstName屬性（property）。這樣一來，我們調試代碼的時候很難發現錯誤。所以this並不只起到美化代碼的作用，同時也是爲了保證程序的準確性。這種做法實際上和前面講到的“他”的用法一樣，使得我們的代碼更加清晰。“他”所引用的正是句首的“John”。

正如代名詞“他”被用來代指句中的先行詞（先行詞就是代名詞所指示的名詞），this關鍵字以同樣的方式來引用當前方法（function，也可以稱爲函數）所綁定（bound）的對象。this不只引用對象，同時包含了對象的值。跟先行詞一樣，this也可以被理解成在上下文中用來引用當前對象（又叫作“先行詞對象”）的快捷方式（或者來適度減少歧義的替代品）。我們遲些會專門講解“上下文”。

this關鍵字基本理論

首先我們得知道，對象(Object)有屬性集（properties），所有的方法（function）也有屬性集。運行到某個方法的時候就有了一個this屬性—一個存儲了調用該方法（準確地說是使用了this關鍵字的方法）的對象的值的變量。

this關鍵字始終指向一個對象並持有這個對象的值，儘管它可以出現在全局範圍（global scope）方法（函數）以外的地方，但它通常出現在方法體中。值得注意的是，如果我們使用嚴格模式（strict mode），並在全局方法（global functions）或者沒有綁定到任何對象的匿名方法中使用this關鍵字時，this將會指向undefined。

this被用在方法體中，比如方法A，它將指向調用方法A的對象的值。並不是任何情況我們都能找到調用方法A的對象名，這時候就用this來訪問調用方法A的對象所擁有的方法和屬性。this確實只是一個用來引用先行詞—調用方法的對象—的快捷方式。

我們來仔細體會下面這段使用this的代碼。


var

person = {

  firstName:
"Penelope",

  lastName:
"Barrymore",

  //this用在showFullName方法中，而showFullName定義在person對象中，由於調用showFullName的是person這個對象，所以this擁有person的值

 

  showFullName:
function()
{

    console.log(this.firstName
+ "
" 
+ this.lastName);

  }

}

person.showFullName();
//
結果：Penelope Barrymore

再考慮下面這段使用了this的jQuery示例。

1

2

3

4

5

6

7


//這是一段很簡單的jQuery代碼

$("button").click(function(event)
{

  //
$(this) 會指向$("button")對象

  //
因爲$("button")對象調用click方法

  console.log($(this).prop("name"));

});

我想詳細地說一下上面這個jQuery示例:$(this)的使用，這是this的jQuery版本，它用於匿名方法中，這個匿名方法在button的單擊事件裏執行。這裏之所以說$(this)被綁定到button對象，是因爲jQuery庫把$(this)綁定到調用click方法的對象上。因此，儘管$(this)被定義在一個自身無法訪問“自身”變量的匿名方法裏，$(this)仍會指向button對象。

請注意，button是一個HTML頁面的DOM元素，它同時是一個對象：在上面的例子中，因爲我們把它包裝在了jQuery的$()方法裏，所以它是一個jQuery對象。

this關鍵字的核心

下面這條規則可以幫助你徹底搞懂this關鍵字：如果一個方法內部使用了this關鍵字，僅當對象調用該方法時this關鍵字纔會被賦值。我們估且把使用了this關鍵字的方法稱爲“this方法”。

儘管看上去this引用了它在代碼中所存在於的對向，事實上在方法被調用之前它並沒有被賦值，而賦給它的值又嚴格地依賴於實際調用“this方法”的對象。this通常會被賦予調用對象的值，下面有一些特殊情況。

全局範圍裏的this

在全局域中，代碼在瀏覽器裏執行，所有變量和方法都屬於window對象。因而當我們在全局域中使用this關鍵字的時候，它會被指向（並擁有）全局變量window對象。如前所述，嚴格模式除外。window對象是JS一個程序或一張網頁的主容器。

因而：


var

firstName = "Peter",

lastName
= "Ally";

function

showFullName() {

  //在這個方法中，this將指向window對象。因爲showFullName()出現在全局域裏。

  console.log(this.firstName
+ "
" 
+ this.lastName);

}

var

person = {

  firstName:
"Penelope",

  lastName:
"Barrymore",

  showFullName:
function()
{

    //下面這行代碼，this指向person對象，因爲showFullName方法會被person對象調用。

    console.log(this.firstName
+ "
" 
+ this.lastName);

  }

}

showFullName();
//
Peter Ally

//window對象包含了所有的全局變量和方法，因而會有以下輸出

window.showFullName();
//
Peter Ally

//使用了this關鍵字的showFullName方法定義在person對象裏，this關鍵字指向person對象，因以會有以下輸出

person.showFullName();
//
Penelope Barrymore

對付this有絕招

當方法內使用了this關鍵字時，這幾種情況最容易引起誤解：方法被借用；把方法賦值給某個變量；方法被用作回調函數（callback），被作爲參數傳遞；this所在的方法是個閉包（該方法是一個內部方法）。針對這幾種情況，我們將逐一攻破。在此之前，我們先簡單介紹一下“上下文”(context)。

JS當中的上下文跟這句話中的主語(subject)類似：“John是贏家，他還了錢”。這句話的主語是John。我們也可以說這句話的上下文是John，因爲我們在這句話中關注的是John，即使這裏有一個“他”字來代指John這個先行詞。正如我們可以使用分號來切換句子的主語一樣，通過使用不同的對象來對方法進行調用，當前的上下文對象同樣可以被切換。

類似地，以下JS代碼：


var

person = {

  firstName:
"Penelope",

  lastName:
"Barrymore",

  showFullName:
function()
{

    //
上下文

    console.log(this.firstName
+ "
" 
+ this.lastName);

  }

}

//使用person對象調用showFullName的時候，上下文是person對象

//showFullName內部的this指向person對象

person.showFullName();
//
Penelope Barrymore

//如果我們用不同的對象來調用showFullName

var

anotherPerson = {

  firstName:
"Rohit",

  lastName:
"Khan"

};

//我們可以使用apply方法來顯式設置this的值—遲些我們會講到apply方法

//this會指向任何一個調用了this方法的對象，因此會有以下輸出結果

person.showFullName.apply(anotherPerson);
//
Rohit Khan

//所以現在的上下文是anotherPerson，因爲anotherPerson通過藉助使用apply方法間接調用了person的showFullName方法

現在我們開始正式討論應付this關鍵字的絕招，例子裏包含了this所引發的錯誤以及解決方案。

1.當this被用作回調函數傳入其它方法

當我們把一個使用了this關鍵字的方法當成參數作爲回函數的時候，麻煩就來了。例如：


//以下是一個簡單的對象，我們定義了一個clickHandler方法。我們想讓這個方法在頁面上某個button被單擊時執行。

var

user = {

  data:
[{

    name:
"T.
Woods",

    age:
37

  },

  {

    name:
"P.
Mickelson",

    age:
43

  }],

  clickHandler:
function(event)
{

    var

randomNum = ((Math.random() * 2 | 0) + 1) - 1; //
隨機返回0或1

    //下面這行代碼會從數組data裏隨機打印姓名和年齡

    console.log(this.data[randomNum].name
+ "
" 
+ this.data[randomNum].age);

  }

}

 

//button對象被jQuery的$方法包裝，現在變成一個jQuery對象

//所以輸出結果是undefined，因爲button對象沒有data這個屬性

$("button").click(user.clickHandler);
//
無法讀取未定義的屬性

上面的代碼中，我們把user.clickHandler當成回調函數傳入$(“button”)對象的click事件，user.clickHandler中的this將不再指向user對象轉。誰調用了這個包含this的方法this就會指向誰。真正調用user.clickHandler的對象是button對象—user.clickHandler會在button對象的單擊方法裏執行。

注意，儘管我們使用user.clickHandler來調用clickHander方法（我們也只能這麼做，因爲clickHandler是定義在user對象上的），clickHandler方法本身會被現在被this所指向的上下文對象所調用。所以this現在指向的是$(“button”)對象。

當上下文改變時—當我們在其它對象而非原對象上執行某個方法的時候，顯然this關鍵字不再指向定義了this關鍵字的原對象。

解決方案：

由於我們真的很想讓this.data指向user對象的data屬性，我們可以使用Bind/ Apply/ Call等方法來強制改變this所指向的對象。本系列的其它篇目將專門對Bind/ Apply/ Call進行講解，文中介紹瞭如何在不同的情況強制改變this的值的方法。與其在本文大篇幅討論，我強烈建議大家直接去讀另外的篇目（譯者注：晚些時候放出這裏所說的“其它篇目”）。

爲了解決前面代碼中的問題，我們可以使用bind方法。

針對下面這行代碼：

$ ("button").click (user.clickHandler);

我們可以用bind方法把clickHandler綁定的user對象上：

$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43

2.閉包中的this

在內部方法中，或者說閉包中使用this，是另一個很容易被誤解的例子。我們必須注意的是，內部方法不能直接通過使用this關鍵字來訪問外部方法的this變量，因爲this變量只能被特定的方法本身使用。例如：


var

user = {

  tournament:
"The
Masters",

  data:
[{

    name:
"T.
Woods",

    age:
37

  },

  {

    name:
"P.
Mickelson",

    age:
43

  }],

 

  clickHandler:
function()
{

    //在裏用this.data沒有太大問題，因爲this指向的是user對象，data是user的一個屬性

    this.data.forEach(function(person)
{

      //但是在這個匿名方法（作爲參數被傳進forEach方法的這個方法）裏，this不再指向user對象

      //內部方法無法訪問外部方法的this

      console.log("What
is This referring to? " 
+ this);
//輸出結果爲：[object
Window]

      console.log(person.name
+ "
is playing at " 
+ this.tournament);

      //
T. Woods is playing at undefined

      //
P. Mickelson is playing at undefined

    })

  }

 

}

 

user.clickHandler();
//
What is "this" referring to? [object Window]

因爲匿名方法中的this不能訪問外部方法的this，所以在非嚴格模式下，this指向了全局的window對象

解決方案：

在進入forEach方法之前，額外使用一個變量來引用this。


var

user = {

  tournament:
"The
Masters",

  data:
[{

    name:
"T.
Woods",

    age:
37

  },

  {

    name:
"P.
Mickelson",

    age:
43

  }],

  clickHandler:
function(event)
{

    //爲了捕獲this指向user對象時的值，我們把它賦值給另外一個變量theUserObj，後面我們可以使用theUserObj

    var

theUserObj = this;

    this.data.forEach(function(person)
{

      //現在我們不用this.tournament了，我們用theUserObj.tournament

      console.log(person.name
+ "
is playing at " 
+ theUserObj.tournament);

    })

  }

}

user.clickHandler();

//
T. Woods is playing at The Masters

//
P. Mickelson is playing at The Masters

正如下面的代碼，很多JS開發人員喜歡使用變量that來設置this的值。但我個人不太喜歡用that這個名字，我喜歡使用讓人一眼就能看懂this到底指向誰的那種名字，所以上面的代碼中我使用了theUserObj = this。

1 2	`// 這句代碼對大多數JS開發人員來說再常見不過了` `var` `that =this;`

3.方法被賦值給某個變量

this關鍵字有時候很調皮，如果我們把一個使用了this關鍵字的方法賦值給一個變量，我們來看會有什麼有趣的事發生：

// data變量是一個全局變量

var data = [{

age: 12

{

age: 14

}];

var user = {

// 而這裏的data是user的一個屬性

data: [{

age: 37

{

age: 43

}],

showData: function(event) {

var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 隨機生成1或0

//這句話會從數組data裏隨機顯示人名和歲數

console.log(this.data[randomNum].name + " " + this.data[randomNum].age);

}

// 把user.showData方法賦值給變量 showUserData

var showUserData = user.showData;

//執行showUserData方法，結果將來自全局的data數組而非user對象的data屬性

showUserData(); // Samantha 12 (來自全局變量data)

//解決方案：通過使用bind方法來顯式設置this的值

//把showData方法綁定到user對象上

var showUserData = user.showData.bind(user);

//現在結果將來自user對象，因爲this關鍵字已經被強制綁定到user對象上了

showUserData(); // P. Mickelson 43

4.借用方法帶來的問題

JS開發中，借用方法（borrowing methods）很常見。

我們來看下面的代碼：


//下面代碼中有兩個對象。其中一個定義了avg方法，另一個不包含avg的定義。我們用另一個對象來借用前一對象的avg方法。

var

gameController = {

  scores:
[20, 34, 55, 46, 77],

  avgScore:
null,

  players:
[{

    name:
"Tommy",

    playerID:
987,

    age:
23

  },

  {

    name:
"Pau",

    playerID:
87,

    age:
33

  }]

}

var

appController = {

  scores:
[900, 845, 809, 950],

  avgScore:
null,

  avg:
function()
{

    var

sumOfScores = this.scores.reduce(function(prev,
cur, index, array) {

      return

prev + cur;

    });

    this.avgScore
= sumOfScores / this.scores.length;

  }

}

//如果執行下面的代碼，gameController.avgScore屬性的實際取值將由appController的scores而來

//不要執行下面的代碼，我們只是爲了對這種情況進行說明。實際上我們想讓appController.avgScore仍然爲null。

gameController.avgScore
= appController.avg();

avg方法的this關鍵字指向的是gameController對象，如果使用appController調用該方法，this將會指向appController(但事實上這並不是我們期望的結果，因爲我們只想借用方法的實現邏輯而非具體的數據來源)。

解決方案：

爲了保證gameController只借用appController的avg方法的邏輯，我們使用apply方法：

1

2

3

4

5

6

7


//
我們要使用apply方法，注意這裏傳入appController.avg方法的第二個參數

appController.avg.apply(gameController,
gameController.scores);

 

//儘管avg方法是借來的，但是現在avgScore屬性已經被成功地應用到gameController上了。

console.log(gameController.avgScore);
//
46.4

//appController.avgScore仍然是null，只有gameController的avgScore被更新了

console.log(appController.avgScore);
//
null

gameController只借用了appController的avg方法，這時this將指向gameController，因爲我們把gameController作爲apply方法的第一個參數進行傳遞。apply方法的第一個參數將會顯式設置this的取值。

結語

希望您在文中有所收穫。現在你可以使用文中介紹的絕招（bind方法，apply方法，call方法，以及把this賦值給一個變量）來對付跟this相關的任何問題。

正如已經瞭解到的，this在上下文改變、被作爲回調函數使用、被不同的對象調用、或者方法被借用的情況下，this將一直指向調用當前方法的對象。

轉載自：http://www.jb51.net/article/16863.htm

this是面嚮對象語言中的一個重要概念，在JAVA,C#等大型語言中，this固定指向運行時的當前對象。但是在javascript中，由於 javascript的動態性（解釋執行，當然也有簡單的預編譯過程），this的指向在運行時才確定。這個特性在給我們帶來迷惑的同時也帶來了編程上的自由和靈活，結合apply(call)方法，可以使JS變得異常強大。
2.變化的this
在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是指向該函數所屬的對象（運行時）。當我們在頁面中定義了函數 doSomething()的時候，它的owner是頁面，或者是JavaScript中的window對象（或 global對象）。對於一個onclick屬性，它爲它所屬的HTML元素所擁有，this應該指向該HTML元素。
2.1在幾種常見場景中this的變化
函數示例
function doSomething ()
{
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
1. (A)作爲普通函數直接調用時，this指向window對象.
2. (B)作爲控件事件觸發時
1） inline event registration 內聯事件註冊 .將事件直接寫在HTML代碼中(<element
onclick=”doSomething()”>), 此時this指向 window對象。
2） Traditional event registration 傳統事件註冊（DHTML方式）.
形如 element.onclick = doSomething; 此時this指向 element對象
3） <element onclick=”doSomething(this)”>作爲參數傳遞可以指向element
3. (C)作爲對象使用時this指向當前對象。形如：new doSomething();
4. (D)使用apply 或者call方法時，this指向所傳遞的對象。
形如：var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisàobj

下面我來闡述如何在事件處理中來使用this，之後我會附加一些this相關的例子。
Owner
接下來文章中我們將要討論的問題是：在函數doSomething()中this所指的是什麼？
Javascript代碼
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
在JavaScript中，this通常指向的是我們正在執行的函數本身（譯者注：用owner代表this所指向的內容），或者是，指向該函數所屬的對象。當我們在頁面中定義了函數doSomething()的時候，它的owner是頁面，或者是JavaScript中的window對象（或 global對象）。對於一個onclick屬性，它爲它所屬的HTML元素所擁有，this應該指向該HTML元素。
這種“所有權”就是JavaScript中面向對象的一種方式。在Objects as associative arrays中可以查看一些更多的信息。

如果我們在沒有任何更多準備情況下執行doSomething()，this關鍵字會指向window，並且該函數試圖改變window的 style.color。因爲window並沒有style對象，這個函數將非常不幸的運行失敗，併產生JavaScript錯誤。
Copying
因此如果我們想充分利用this，我們不得不注意使用this的函數應該被正確的HTML元素所擁有。換句話說，我們應該複製這個函數到我們的onclick屬性。Traditional event registration會關心它。
Javascript代碼
element.onclick = doSomething;
element.onclick = doSomething;
這個函數被完整複製到onclick屬性（現在成爲了函數）。因此如果這個event handler被執行，this將指向HTML元素，並且該元素的顏色得以改變。

這種方法使得我們能夠複製這個函數到多個event handler。每次this都將指向正確的HTML元素：

這樣你就可以最大限度使用this。每當執行該函數，this所指向的HTML元素都正確響應事件，這些HTML元素擁有doSomething()的一個拷貝。
Referring
然而，如果你使用inline event registration(內聯事件註冊)
Javascript代碼
<element onclick="doSomething()">
<element onclick="doSomething()">
你將不能拷貝該函數！反而這種差異是非常關鍵的。onclick屬性並不包含實際的函數，僅僅是一個函數調用。
Javascript代碼
doSomething();
doSomething();
因此，它將聲明“轉到doSomething()並且執行它”。當我們到達doSomething()，this關鍵字又重新指向了全局的window對象，函數返回錯誤信息。

The difference
如果你想使用this來指向HTML元素響應的事件，你必須確保this關鍵字被寫在onclick屬性裏。只有在這種情況下它才指向event handler所註冊的HTML元素。
Javascript代碼
element.onclick = doSomething;
alert(element.onclick)
element.onclick = doSomething;
alert(element.onclick)
你將得到
Javascript代碼
function doSomething() {
this.style.color = '#cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
正如你所見，this關鍵字被展現在onclick函數中，因此它指向HTML元素。
但是如果執行
Javascript代碼
<element onclick="doSomething()">
alert(element.onclick)
<element onclick="doSomething()">
alert(element.onclick)
你將得到
Javascript代碼
function onclick() {
doSomething()
}
function onclick() {
doSomething()
}
這僅僅是到doSomething()函數的一個引用。this關鍵字並沒有出現在onclick函數中，因此它不指向HTML元素。
例子--拷貝
下面的例子中，this被寫入onclick函數裏：
Javascript代碼
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() {this.style.color = '#cc0000';}
<element onclick="this.sytle.color = '#cc0000';">
例子--引用
下述情況中，this指向window：
Javascript代碼
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
<element onclick="doSomething()">
注意attachEvent()的出現。Microsoft event registration model最主要的弊端是attachEvent()創建了一個指向函數的引用，而不是複製它。因此有時不可能知道哪個HTML正在處理該事件。
組合使用
當使用內聯事件註冊時，你可以將this發送到函數以至於可以正常使用：
Javascript代碼
<element onclick="doSomething(this)">
function doSomething(obj) {
//this出現在event handler中並被髮送到函數
//obj指向HTML元素，因此可以這樣：
obj.style.color = '#cc0000';
}

python gdal 安裝使用（Windows， python 3.6.8）

前端-JS-this

前端-js-this

前端-工具

編寫高性能JavaScript (讀書筆記)

ajax

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結