成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript的this和作用域

wapeyang / 1494人閱讀

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

本文主要討論一下JS的作用域和this關(guān)鍵字。作用域,就是你的方法或者變量可訪問的區(qū)域,是他們執(zhí)行的上下文。如果你見過這樣的代碼:

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,當(dāng)然這不是很必要。全局作用域?qū)ο蟮膶傩钥梢栽诖a的任何地方訪問到。

另外的作用域就只有局部作用域了。在JavaScript里一般就是一個方法內(nèi)部的作用域。比如:

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

變量x是在方法內(nèi)部初始化的,那么就只能在方法內(nèi)部訪問。

一些需要注意的地方

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

function someFunction(){
  x = 5;
}

// 執(zhí)行一個這個方法,完成x的全局設(shè)置
someFunction();

console.log(x); // 5

這是一個非常差的實踐。你應(yīng)該盡量少的往全局作用域添加屬性。這也是為什么你會經(jīng)??吹揭恍?,比如jQuery會這么干:

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

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

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

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
}

這很容易理解。但是當(dāng)我們試圖要探究this關(guān)鍵字的時候就又變得復(fù)雜了。我相信很多人都遇到過這樣的問題:

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

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

this是在方法執(zhí)行的時候自動賦值的變量。它的值和方法的調(diào)用方式有很大的關(guān)系。比如:

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總是指向出發(fā)這個事件的元素對象。比如使用一個通用的事件監(jiān)聽器來處理一系列的有相似事件的元素。當(dāng)使用addEventListener把一個方法添加到一個元素的事件處理器的時候,這個方法的this值就被改變了。注意,this的值是從調(diào)用者里傳給方法的。

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

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

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

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/92634.html

相關(guān)文章

  • 談?wù)?em>javascript語法里一些難點問題(二)

    摘要:講作用域鏈?zhǔn)紫纫獜淖饔糜蛑v起,下面是百度百科里對作用域的定義作用域在許多程序設(shè)計語言中非常重要。原文出處談?wù)務(wù)Z法里一些難點問題二 3) 作用域鏈相關(guān)的問題 作用域鏈?zhǔn)莏avascript語言里非常紅的概念,很多學(xué)習(xí)和使用javascript語言的程序員都知道作用域鏈?zhǔn)抢斫鈐avascript里很重要的一些概念的關(guān)鍵,這些概念包括this指針,閉包等等,它非常紅的另一個重要原因就...

    Enlightenment 評論0 收藏0
  • 十分鐘快速了解《你不知道 JavaScript》(上卷)

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

    趙春朋 評論0 收藏0
  • [譯] 你想知道關(guān)于 JavaScript 作用一切

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

    Flands 評論0 收藏0
  • JavaScript 闖關(guān)記》之作用閉包

    摘要:作用域和閉包是最重要的概念之一,想要進(jìn)一步學(xué)習(xí),就必須理解作用域和閉包的工作原理。全局和局部作用域的關(guān)系在函數(shù)體內(nèi),局部變量的優(yōu)先級高于同名的全局變量。作用域鏈的用途,是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。 作用域和閉包是 JavaScript 最重要的概念之一,想要進(jìn)一步學(xué)習(xí) JavaScript,就必須理解 JavaScript 作用域和閉包的工作原理。 作用域 任何...

    Jacendfeng 評論0 收藏0
  • 深入javascript——作用閉包

    摘要:注意由于閉包會額外的附帶函數(shù)的作用域內(nèi)部匿名函數(shù)攜帶外部函數(shù)的作用域,因此,閉包會比其它函數(shù)多占用些內(nèi)存空間,過度的使用可能會導(dǎo)致內(nèi)存占用的增加。 作用域和作用域鏈?zhǔn)莏avascript中非常重要的特性,對于他們的理解直接關(guān)系到對于整個javascript體系的理解,而閉包又是對作用域的延伸,也是在實際開發(fā)中經(jīng)常使用的一個特性,實際上,不僅僅是javascript,在很多語言中都...

    oogh 評論0 收藏0
  • 這一次,我們換種姿勢學(xué)習(xí) javascript

    摘要:操作符或調(diào)用函數(shù)時傳入?yún)?shù)的操作都會導(dǎo)致關(guān)聯(lián)作用域的賦值操作。此外可以使用和來設(shè)置對象及其屬性的不可變性級別。忽視這一點會導(dǎo)致許多問題。使用調(diào)用函數(shù)時會把新對象的屬性關(guān)聯(lián)到其他對象。 前言 《你不知道的 javascript》是一個前端學(xué)習(xí)必讀的系列,讓不求甚解的JavaScript開發(fā)者迎難而上,深入語言內(nèi)部,弄清楚JavaScript每一個零部件的用途。本書介紹了該系列的兩個主題:...

    zone 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<