JavaScript中的this

cucumber 發布于2019-08-26 10:18 / 3410人閱讀

摘要：在中，只有兩種指向，一種是指向當前的封閉作用域，或者是指向當前作用域的外層，的最頂層就是對象。在非嚴格模式下，默認指向全局對象。瀏覽器環境全局函數方法用于在指定的毫秒數后調用函數或計算表達式。它會不停地調用函數，指導被調用或者窗口被關閉。

1：基本概念

this字面意思是當前，當前執行代碼的環境對象或者是上下文。代表著當前方法執行的環境上下文，那么何為環境上下文，通俗的說，誰調用了函數，誰就是這個函數的環境上下文。

在js中，this只有兩種指向，一種是指向當前的封閉作用域，或者是指向當前作用域的外層，this的最頂層就是window對象。

關于this必須要了解的是嚴格模式，嚴格模式是js里面的一個子集，是具有限制性JavaScript變體，嚴格模式也是js的一種，但是加了一些限制。

比如：

在嚴格模式下通過拋出錯誤來消除了一些原有的靜默錯誤(靜默錯誤：語法有錯誤但是js并沒有提示，默認允許這個操作)。比如要取一個函數的傳入參數，在非嚴格模式下，可以直接拿到它的grument，但在嚴格模式下會拋出一個錯誤。

嚴格模式修復了一些導致JavaScript引擎難以執行優化的缺陷

禁用了在ECMAScript的未來版本中可能會定義的一些語法

進入"嚴格模式"的標志："use strict";

    // 為整個腳本開啟嚴格模式 
    "use strict";
    var v = "Hi!  I"m a strict mode script!";
    
    // 為函數開啟嚴格模式 
    function strict() {
        "use strict";
        function nested() { 
            return "And so am I!"; 
        }
        return "Hi!  I"m a strict mode function!  " + nested();
    }

2：全局環境

在全局環境下，無論是否在嚴格模式下，在全局執行環境下(任何函數體外部)this指向全局對象。也就是說在全局執行環境，這個this永遠指向全局對象，這個全局對象在瀏覽器中就是window。

    //瀏覽器環境
    var name = "Eric";
    console.log(window.name === this.name);  /* true */
    console.log(window === this);            /* true */

3：函數體內部

在函數體內部，this的值取決于函數被調用的方式。函數被調用的方式有很多種：

簡單調用，也就是說沒有添加任何額外的操作，沒有添加一個this的綁定或者是改變。

簡單調用分為嚴格模式與非嚴格模式。

在非嚴格模式下，this默認指向全局對象。

  // 瀏覽器環境
  function simple(){
      return this;
  }
  console.log(simple() === window);
  // true

在嚴格模式下，保持進入執行環境時的值，沒有指定時默認undefined。

  // 瀏覽器環境
  function simple2(){
      "use strict";
      return this;
  }
  simple2() === undefined;
  // true 
  window.simple2() === window;
  // true

this傳遞，在js中this綁定有兩種：

一種是call/apply，可以看作是一種，它們都是一個綁定this的立即執行的一個方法，綁定之后會立即執行這個函數，兩者的區別在于傳遞參數的不同，一個是傳一個參數，一個是傳一堆參數；call/apply實際上是綁定值的是一個對象，存在一個ToObject過程。call/apply是一個立即執行的綁定this的一個操作。

  // 瀏覽器環境 
  var object = {
      name: "Eric"
  };
  var name = "Iven";
  function getName(arg) {
      return this.name;
  }
  
  getName(); /* Iven */
  getName.call(object); /* Eric */
  getName.apply(object); /* Eric */

另一種是bind，與上面不同的是bind不會立即執行，它只是實現一個綁定的過程，返回的是一個柯里化的函數，這個柯里化的函數就是call/apply。bind只能被綁定一次。

  name = "Davy";
  function bindThis(){
      return this.name;
  }
  var getName1 = bindThis.bind({ name: "Eric" });
  console.log(getName1()); /* Eric */
  
  var getName2 = getName1.bind({ name: "Iven" });
  console.log(getName2()); /* Eric */

箭頭函數在執行的時候會形成一個封閉的作用域，this與封閉作用域的this保持一致，call/apply/bind都將會被忽略。

// 瀏覽器環境 
var globalThis = this;
var arrowsFunction = () => this;
console.log(arrowsFunction() === globalObject); /* true */

作為對象的方法被調用(有一個靠近原則)：在對象里面定義了一個函數，然后通過對象去調用這個函數。

// 瀏覽器環境 
var object = {
    name: "Eric",

    getName: function() {
        return this.name;
    }
};
console.log(object.getName()); /* Eric */


function getName2() {
    return this.name;
}
object.getName = getName2;
console.log(object.getName()); /* Eric */


object.object = {
    getName: getName2,
    name: "Iven"
};
console.log(object.object.getName()); /* Iven */

4：全局函數

setTimeout

setInterval

alert

setInterval()方法用于在指定的毫秒數后調用函數或計算表達式。

語法：setTimeout(code，millisec)，參數code必需，要調用的函數后執行的JavaScript代碼串；millisec必需，在執行代碼前等待的毫秒數。

注意：setTimeout()只執行code一次，如果需要多次調用，請使用setInterval()或者讓code自身再次調用setTimeout()，也就是利用遞歸。

setInterval()方法可按照指定的周期來調用函數或計算表達式。它會不停地調用函數，指導clearInterval()被調用或者窗口被關閉。由setInterval()返回的ID值可以用作clearInterval()方法的參數。

語法：setInterval(code，millisec[,"lang"])

云服務器 GPU云服務器 javaScript中的this js中的this js中的this機制 js中的this與html

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

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

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
JavaScript進階之’this‘

摘要：所以相同點是，在全局范圍內，全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數中，與封閉詞法環境的保持一致。我通常把這些原始函數叫做構造函數。在里面你可以嵌套函數，也就是你可以在函數里面定義函數。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 評論0 收藏0
理解 JavaScript 中的 this 關鍵字

摘要：原文許多人被中的關鍵字給困擾住了，我想混亂的根源來自人們理所當然地認為中的應該像中的或中的一樣工作。盡管有點難理解，但它的原理并不神秘。在瀏覽器中，全局對象是對象。運算符創建一個新對象并且設置函數中的指向調用函數的新對象。原文：Understanding the this keyword in JavaScript 許多人被JavaScript中的this關鍵字給困擾住了，我想混亂的...

jayzou 2019-08-21 10:32 評論0 收藏0