JavaScript的this和作用域

wapeyang 發布于2019-08-22 13:56 / 1481人閱讀

摘要：本文主要討論一下的作用域和關鍵字。另外的作用域就只有局部作用域了。在里一般就是一個方法內部的作用域。你應該盡量少的往全局作用域添加屬性。它的值和方法的調用方式有很大的關系。比如使用一個通用的事件監聽器來處理一系列的有相似事件的元素。

本文主要討論一下JS的作用域和this關鍵字。作用域，就是你的方法或者變量可訪問的區域，是他們執行的上下文。如果你見過這樣的代碼：

function someFunc() {
  var _this = this;
  something.on("click", function() {
    console.log(_this);
  });
};

你就會很好奇為什么要用this賦值給一個變量_this呢？你看完這篇文章就會清楚這個問題的答案了。

第一種作用域叫做全局作用域（Global Scope）這很容易定義，如果一個方法、變量是全局作用域的，那么它就可以從任何的地方訪問到。在瀏覽器里，全局作用域就是window對象。所以，如果你的代碼里有：

var x = 9;

你其實是在給window.x賦值為9（在瀏覽器里運行的時候）。如果你喜歡的話，也可以寫成window.x = 9，當然這不是很必要。全局作用域對象的屬性可以在代碼的任何地方訪問到。

另外的作用域就只有局部作用域了。在JavaScript里一般就是一個方法內部的作用域。比如：

function someFunction() {
  var x = 5;
}
console.log(x); // undefined

變量x是在方法內部初始化的，那么就只能在方法內部訪問。

一些需要注意的地方

如果你聲明了一個變量，而且在聲明的時候忘記使用var關鍵字。那么，這個變量自動被置為全局變量。比如：

function someFunction(){
  x = 5;
}

// 執行一個這個方法，完成x的全局設置
someFunction();

console.log(x); // 5

這是一個非常差的實踐。你應該盡量少的往全局作用域添加屬性。這也是為什么你會經常看到一些庫，比如jQuery會這么干：

(function() {
  var jQuery = {/*全部的方法都在這里*/};
  window.jQuery = jQuery;
})();

把全有的屬性、方法都放在一個方法里。然后立刻執行這個方法就會把全部的屬性和方法都綁定在了局部作用域里。最后把jQuery對象綁定到全局作用域，間接的把之前定義的屬性和方法都暴露出來方便調用。顯然我大量的減少了jQuery的代碼，但是這就是jQuery代碼如何工作的。

由于局部作用域只有通過方法的定義來實現。任何在一個方法內部定義的方法都可以訪問外部方法里定義的變量。比如：

function outer() {
  var x = 5;
  function inner() {
    console.log(x); // 5
  }

  inner();
}

但是outer()方法不可以訪問inner()方法定義的任何變量。

function outer() {
  var x = 5;
  function inner() {
    console.log(x); // 5
    var y = 100;
  }

  inner();
  console.log(y); // undefined
}

這很容易理解。但是當我們試圖要探究this關鍵字的時候就又變得復雜了。我相信很多人都遇到過這樣的問題：

${"myLink"}.on("click", function() {
  console.log(this);  // 指向myLink

  $.ajax({
    // 設置ajax相關
    success: function() {
      console.log(this);  // 指向的是全局對象。 ？？？
    }
  });
});

this是在方法執行的時候自動賦值的變量。它的值和方法的調用方式有很大的關系。比如：

function foo() {
  console.log(this);  // global object
}

theApp = {};
theApp.foo = function() {
  console.log(this);  // 指向theApp對象
}

var link = doeument.getElementById("myLink");
link.addEventListener("click", function() {
  console.log(this); // 指向link
});

MDN對第三個例子的解釋非常到位:

事件的this總是指向出發這個事件的元素對象。比如使用一個通用的事件監聽器來處理一系列的有相似事件的元素。當使用addEventListener把一個方法添加到一個元素的事件處理器的時候，這個方法的this值就被改變了。注意，this的值是從調用者里傳給方法的。

這么做：$("myLink").on("click", function() {})意味著link被點擊的時候方法就會執行。由于這個方法是處理link的事件的，所以this的值就是這個link元素。

在Ajax請求的success回調方法只是一個普通的方法。所以，當它被調用的時候this指向的是全局對象。任何對象，不是對象方法或者事件的時候會遇到的情況。

上面的原因也就是你在很多地方看到var _this = this;或者var that = this;的原因。來看一個例子：

$("myLink").on("click", function() {
  console.log(this); //指向myLink
  var _this = this;
  $.ajax({
    // ajax設置
    success: function() {
      console.log(this);  // 指向全局對象
      console.log(_this); // 指向myLink
    }
  });
});

原文地址：https://javascriptplayground....

GPU云服務器云服務器 this作用域 javascript作用域鏈 javascript的this js作用域和上下文

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92634.html

談談javascript語法里一些難點問題（二）

摘要：講作用域鏈首先要從作用域講起，下面是百度百科里對作用域的定義作用域在許多程序設計語言中非常重要。原文出處談談語法里一些難點問題二 3) 作用域鏈相關的問題作用域鏈是javascript語言里非常紅的概念，很多學習和使用javascript語言的程序員都知道作用域鏈是理解javascript里很重要的一些概念的關鍵，這些概念包括this指針，閉包等等，它非常紅的另一個重要原因就...

Enlightenment 2019-08-21 10:27 評論0 收藏0
十分鐘快速了解《你不知道的 JavaScript》（上卷）

摘要：最近剛剛看完了你不知道的上卷，對有了更進一步的了解。你不知道的上卷由兩部分組成，第一部分是作用域和閉包，第二部分是和對象原型。附錄詞法這一章并沒有說明機制，只是介紹了中的箭頭函數引入的行為詞法。第章混合對象類類理論類的機制類的繼承混入。最近剛剛看完了《你不知道的 JavaScript》上卷，對 JavaScript 有了更進一步的了解。《你不知道的 JavaScript》上卷由兩部...

趙春朋 2019-08-26 12:16 評論0 收藏0
[譯] 你想知道的關于 JavaScript 作用域的一切

摘要：原文鏈接原文作者你想知道的關于作用域的一切譯中有許多章節是關于的但是對于初學者來說甚至是一些有經驗的開發者這些有關作用域的章節既不直接也不容易理解這篇文章的目的就是為了幫助那些想更深一步學習了解作用域的開發者尤其是當他們聽到一些關于作用域的原文鏈接: Everything you wanted to know about JavaScript scope原文作者: Todd Mott...

Flands 2019-08-19 18:38 評論0 收藏0
《JavaScript 闖關記》之作用域和閉包

摘要：作用域和閉包是最重要的概念之一，想要進一步學習，就必須理解作用域和閉包的工作原理。全局和局部作用域的關系在函數體內，局部變量的優先級高于同名的全局變量。作用域鏈的用途，是保證對執行環境有權訪問的所有變量和函數的有序訪問。作用域和閉包是 JavaScript 最重要的概念之一，想要進一步學習 JavaScript，就必須理解 JavaScript 作用域和閉包的工作原理。作用域任何...

Jacendfeng 2019-08-22 10:49 評論0 收藏0
深入javascript——作用域和閉包

摘要：注意由于閉包會額外的附帶函數的作用域內部匿名函數攜帶外部函數的作用域，因此，閉包會比其它函數多占用些內存空間，過度的使用可能會導致內存占用的增加。作用域和作用域鏈是javascript中非常重要的特性，對于他們的理解直接關系到對于整個javascript體系的理解，而閉包又是對作用域的延伸，也是在實際開發中經常使用的一個特性，實際上，不僅僅是javascript，在很多語言中都...

oogh 2019-08-21 10:18 評論0 收藏0
這一次，我們換種姿勢學習 javascript

摘要：操作符或調用函數時傳入參數的操作都會導致關聯作用域的賦值操作。此外可以使用和來設置對象及其屬性的不可變性級別。忽視這一點會導致許多問題。使用調用函數時會把新對象的屬性關聯到其他對象。前言《你不知道的 javascript》是一個前端學習必讀的系列，讓不求甚解的JavaScript開發者迎難而上，深入語言內部，弄清楚JavaScript每一個零部件的用途。本書介紹了該系列的兩個主題：...

zone 2019-08-26 11:54 評論0 收藏0