JavaScript 之 this 指向問題

Alan 發布于2019-08-19 17:17 / 401人閱讀

摘要：一等公民對象函數在提指向問題之前，肯定是有必要說明一等公民對象，既然是對象，那么就能像普通的值一樣傳遞。在普通瀏覽器中指向的是在中指向的是全局對象全局環境中或者模塊環境中。即指向或者的第一個參數。第二條規則，指向的不是原文鏈接

1. 一等公民對象——函數

在提this指向問題之前，肯定是有必要說明一等公民對象function ，既然function是對象，那么就能像普通的值一樣傳遞。嗯，在匿名函數中，這樣的做法是非常常見的。

函數會在代碼的運行前進行解析，這就保證了函數存在于當前上下文的任意一個地方，即在函數定義的前面去調用也是正確的。

foo();

function foo () {};

函數是一個對象，所以我們常常會看見把一個匿名的函數給一個值。

var foo = function () {};

賦值語句只有在執行的時候才會運行，也就是說所看到的var foo = 1 是分為兩部分的：

var foo;
...
foo = 1;
...

所以可能會出現下面的問題

foo;     //undefined
foo();   //TypeError
var foo = function () {
  console.log(1);
}

因為他和下面的寫法是一樣的

var foo;

foo;

foo();

foo = function () {
  console.log(1);
}

正常的，我們這樣寫是沒有問題的

foo;   // undefined 

var foo = function () {
  console.log(1);
}

foo(); // 1

2. this指向問題

javascript中的this和一般語言中的this是有點區別的，在不同的情況下，指向也有所不同：

1.全局范圍內

指向的是全局對象。在普通瀏覽器中指向的是window, 在Node中指向的是全局對象global（全局環境中）或者module.exports(模塊環境中)。

2.函數調用中

在普通的函數調用中，this依舊指向全局對象。（這個設計似乎并沒有什么作用，應該是一個錯誤的設計。并且在很多的情況下不注意都會引來很多的麻煩）

Foo.method = function () {
  function test () {
      //這里的this指向的不是Foo.而是全局對象
  }        
}

一般我們會創建一個局部的變量去指代上一層的對象

Foo.method = function () {
  that = this;   //按照下面一條規則，這兒的this指向的是Foo
  function (test) {
    // that
  }
}

3.方法調用中

指向調用它的對象

4.調用構造函數

指向新創建的對象

5.顯式設置this

指向顯式指向的對象。即指向call或者apply的第一個參數。

注意：

像下面這樣對方法進行賦值的時候，函數內this的指向也不是賦值時所調用方法的對象。

var test = Obj.method();

test(); // 第二條規則，this指向的不是Obj

原文鏈接：http://life.rccoder.net/javascript/1210.html

云服務器 GPU云服務器改變this指向 this的指向 javascript的this javaScript中的this

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

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

javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
JavaScript深入之bind的模擬實現

摘要：也就是說當返回的函數作為構造函數的時候，時指定的值會失效，但傳入的參數依然生效。構造函數效果的優化實現但是在這個寫法中，我們直接將，我們直接修改的時候，也會直接修改函數的。 JavaScript深入系列第十一篇，通過bind函數的模擬實現，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數...

FingerLiu 2019-08-20 16:15 評論0 收藏0
學習JavaScript之this,call,apply

摘要：在全局對象中調用，自然讀取的是全局對象的值構造器調用說明作為構造器調用時，指向返回的這個對象。最直觀的表現就是，去看一些優秀框架的源代碼時，不再是被繞的暈乎乎的。學習起因：在之前的JavaScript學習中，this,call,apply總是讓我感到迷惑，但是他們的運用又非常的廣泛。遂專門花了一天，來弄懂JavaScript的this,call,apply。中途參考的書籍也很多，以...

wenhai.he 2019-08-19 17:30 評論0 收藏0
深入理解 Javascript 之 this

摘要：深入淺出的理解問題的由來寫法一寫法二雖然和指向同一個函數，但是執行結果可能不一樣。該變量由運行環境提供。所以，就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。深入淺出this的理解問題的由來 var obj = { foo: function(){} } var foo = obj.foo; // 寫法一 obj.foo(); // 寫法二 foo...

OnlyMyRailgun 2019-08-23 10:54 評論0 收藏0
JavaScript陰溝里翻船之運算符優先級

摘要：操作符的兩種形態其實在的操作符描述中，語法是你會發現被中括號所包圍也就意味著可缺省，因此，如果對于不含參數的構造函數而言與二者并無區別，那我們接著思考一個問題，對于前面返回函數的而言，當的時候為什么執行的是而不是呢。　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法變現，堅持下去也是靠的是自己的熱情和大家的鼓勵。各位讀者的Star是激勵我前進的動力，請不要吝...

selfimpr 2019-08-23 13:41 評論0 收藏0