JavaScript中的this

tain335 發布于2019-08-20 14:44 / 3267人閱讀

之前關注了一個公眾號: JavaScript,里面詳細描述了this的各種情況,在此總結一下.
只考慮當宿主環境是瀏覽器的時候,并且處于非嚴格模式下:
this是在運行時綁定的,并不是在編寫時綁定的,this的綁定只取決于函數的調用方式.
在全局范圍內，this等價于window對象。

console.log(this === window); //true

在全局范圍內，用var聲明一個變量和給this或者window添加屬性是等價的。

var foo = "bar";
console.log(foo); //"bar"
console.log(window.foo); //"bar"
console.log(this.foo); //"bar"

在全局范圍內，直接給一個變量賦值(不用var聲明)和給this或者window添加屬性(也可能是改變屬性值)是等價的。

//添加
foo = "bar";
console.log(foo); //"bar"
console.log(window.foo); //"bar"
console.log(this.foo); //"bar"

//改變
foo = "bar";
function changeFoo() {
  foo = "foo"; //因為在函數內沒有用var定義foo,所以此時的foo和上面的foo是同一個變量
}
console.log(this.foo); //"bar"
changeFoo();
console.log(this.foo); //"foo"

普通函數調用

  foo = "bar"; 
  function changeFoo() {
    this.foo = "foo";
  }
  console.log(this.foo); //"bar"
  changeFoo();
  console.log(this.foo); //"foo"

new調用

foo = "bar";
function changeFoo() {
  this.foo = "foo";
}
console.log(this.foo); //"bar"
console.log(new changeFoo().foo); //"foo"
console.log(this.foo); //"bar"

function Thing() {
  console.log(this); // 此時的this是一個新創建的空對象,即{},并且{}.__proto__ === Thing.prototype
  console.log(this.foo); //該對象沒有自有屬性,會去訪問this.__proto__上的foo屬性
}
Thing.prototype.foo = "bar";
var thing = new Thing(); //"bar"
console.log(thing.foo); //"bar"

當作對象的方法調用

var obj = {
  name: "irene",
  getName: function() {
    console.log(this.name); 
  }
}
obj.getName(); //"irene".此時this指向對象obj

簡單坑:
var getName = obj.getName;
getName(); // undefined.此時是普通函數調用,this指向全局對象window

高級坑:
var obj2 = {
  name: "irene2"
}
(obj2.getName = obj.getName)(); // undefined.此時復制操作的返回值是function() {console,.log(this.name);},然后調用這個函數,又是普通函數調用的情況,所以this指向全局對象window.

高級坑:
var obj = {
  name: "irene",
  foo: function() {
    console.log(this);
  }
  foo2: function() {
    console.log(this);
    setTimeout(function(){
      console.log(this);
    }, 1000);
  }
};
obj.foo(); //指向obj,屬于當作對象的方法調用的情況
obj.foo2(); //第一個this指向obj,和上面的情況一致,1s之后,輸出的this指向全局對象,屬于普通函數調用的情況.這是為何???

我個人的理解是醬紫的:JS只有一個線程,稱為主線程.先執行主線程中執行棧里的代碼,當主線程執行棧為空時,才會進行事件循環來查看是否有待處理事件,當事件循環檢測到任務隊列中有事件就取出相關回調放入執行棧中,由主線程執行.setTimeout的第一個函數參數function() {console.log(this);}會被添加到了任務隊列中.當obj.foo2();執行完之后(即主線程執行棧為空),取出任務隊列中的function() {console.log(this);}放入執行棧中,然后執行.此時的執行環境是全局環境,所以this指向全局對象window.關于JS的線程/事件循環/任務隊列可以參考http://www.cnblogs.com/3body/...

簡單坑:
var personA = {
  name: "xl",
  showName: function() {
    console.log(this.name);
  }
};

var personB = {
  name: "xll",
  getName: personA
};

var personC = {
  name: "xll",
  getName: personA.showName
};

personB.getName.showName(); //"xl"
personC.getName(); //"xll"

簡單坑:
var name = "jay";
var person = {
  name: "irene",
  getName: function() {
    return function() {
      return this.name;
    }
  }
};
console.log(person.getName()()); //"jay"

簡單坑:
function a() {
  var t = "r";
  function b() {
    console.log(this);
    console.log(t);
  }
  b();
  return b;
}
a(); //普通函數調用,所以this指向全局對象window

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81878.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