你不知道的this

zoomdong 發布于2019-08-26 10:56 / 771人閱讀

摘要：話不多說，讓我們一起探討你不知道的牛刀小試答案初露鋒芒答案函數，第行是一個定時器，哪怕定時器的延遲時間為，仍然先執行第行。故為當使用定時器調用函數時，先執行函數內代碼，在進行函數調用。如果都不是的話，使用默認綁定。

MDN中的this定義

當前執行代碼的環境對象。

多么簡約凝練的概括，寥寥11個字，將伴隨程序員的前世今生。話不多說，讓我們一起探討你不知道的this

牛刀小試

  function foo() {
      console.log( this.a );
  }
  var a = 10;
  foo();

答案：
10 
this —> window

  function foo() { 
      console.log( this.a );
  }
  var obj2 = { 
      a: 42,
      foo: foo 
  };
  var obj1 = { 
      a: 2,
      obj2: obj2 
  };
  obj1.obj2.foo();

42
this -> obj2

初露鋒芒

  function foo() {
      setTimeout(() => this.a = 1, 0)
      console.log( this.a );
  }
  function foo2() {
      setTimeout(() => this.a = 1, 500)
      console.log( this.a );
  }
  function doFoo(fn) {
      this.a = 4
      fn();
  }
  var obj = {
      a: 2,
      foo: foo,
      foo2: foo2
  };
  var a =3
  doFoo( obj.foo );
  setTimeout( obj.foo, 0 )
  setTimeout( obj.foo2, 100 )

答案：
4 
1
1
foo函數，第2行是一個定時器，哪怕定時器的延遲時間為0，仍然先執行第3行。故為4
當使用定時器調用函數時，先執行函數內代碼，在進行函數調用。故為1
同理： 故為1

展露頭腳

a = 3
function foo() {
    console.log( this.a );
}
var obj = {
    a: 2
};
foo.call( obj ); 
foo.call( null );
foo.call( undefined ); 
foo.call(  ); 
var obj2 = {
    a: 5,
    foo
}
obj2.foo.call() // 3，不是5!
//bind返回一個新的函數
function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}
var obj = {
    a: 2
}
var bar = foo.bind( obj );
var b = bar( 3 ); 
console.log( b );

答案：
2 undefined
3 undefined
3 undefined
3 undefined
3 undefined
2 3
5
第8行： this -> obj = 2, msg沒有傳值，故為undefined
第9～12行： 當call的第一個參數為null, undefined或者不傳值時，只想window， this -> window = 3, msg沒有傳值，故為undefined
第25行：bind改變指向 -> obj，第26行：msg為3， 故為2 3
第27行：執行函數，為2+3 = 5

銳不可當 隱式丟失

一個最常見的 this綁定問題就是被隱式綁定的函數會丟失綁定對象，也就是說它會應用默認綁定，從而把 this 綁定到全局對象或者 undefined 上，取決于是否是嚴格模式

function foo() { 
    console.log( this.a );
}
function doFoo(fn) {
    fn()
}
var obj = {
    a: 2,
    foo: foo 
};
var a = "oops, global";
doFoo( obj.foo );

答案： oops, global
第5行fn()引用第位置其實foo, 因此doFoo（）相當于是一個不帶修飾符的函數調用，因此應用了默認綁定—> window = oops, global

舍我其誰

function foo(something) { 
    this.a = something;
}
var obj1 = { 
    foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a );
obj1.foo.call( obj2, 3 );
console.log( obj2.a );
var bar = new obj1.foo( 4 ); 
console.log( obj1.a );

答案：
2
3
2
4
new 綁定比隱式綁定優先級高,也閉隱式綁定綁定優先級高

總結

函數是否在new中調用(new綁定)?如果是的話this綁定的是新創建的對象。
var bar = new foo()

函數是否通過call、apply(顯式綁定)或者硬綁定調用?如果是的話，this綁定的是指定的對象。
var bar = foo.call(obj2)

函數是否在某個上下文對象中調用(隱式綁定)?如果是的話，this 綁定的是那個上下文對象。
var bar = obj1.foo()

如果都不是的話，使用默認綁定。如果在嚴格模式下，就綁定到undefined，否則綁定到全局對象。
var bar = foo()

GPU云服務器云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

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

你不知道的Virtual DOM（五）：自定義組件

摘要：現在流行的前端框架都支持自定義組件，組件化開發已經成為提高前端開發效率的銀彈。二對自定義組件的支持要想正確的渲染組件，第一步就是要告訴某個標簽是自定義組件。下面的例子里，就是一個自定義組件。解決了識別自定義標簽的問題，下一步就是定義標簽了。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、...

lk20150415 2019-08-23 11:41 評論0 收藏0
你不知道的Virtual DOM（六）：事件處理&異步更新

摘要：如果列表是空的，則存入組件后將異步刷新任務加入到事件循環當中。四總結本文基于上一個版本的代碼，加入了事件處理功能，同時通過異步刷新的方法提高了渲染效率。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的兩大前端框架，React和Vue，都不約而同的借助Virtual DO...

caozhijian 2019-08-23 11:51 評論0 收藏0
《你不知道的JavaScript》 (下) 閱讀摘要

摘要：本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱不錯，下冊的知識點就這么少，非常不推介看下冊上中下三本的讀書筆記你不知道的上讀書筆記你不知道的中讀書筆記你不知道的下讀書筆記第三本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱；不錯，下冊的知識點就這么少，非...

Jacendfeng 2019-08-23 14:35 評論0 收藏0
《你不知道的javascript》筆記_this

下一篇：《你不知道的javascript》筆記_對象&原型寫在前面上一篇博客我們知道詞法作用域是由變量書寫的位置決定的，那this又是在哪里確定的呢？如何能夠精準的判斷this的指向？這篇博客會逐條闡述書中有這樣幾句話： this是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數調用時的各種條件this的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式當一個函數被調用時...

cpupro 2019-08-23 14:16 評論0 收藏0
《你不知道的JavaScript》 (上) 閱讀摘要

摘要：但是如果非全局的變量如果被遮蔽了，無論如何都無法被訪問到。但是如果引擎在代碼中找到，就會完全不做任何優化。結構的分句中具有塊級作用域。第四章提升編譯器函數聲明會被提升，而函數表達式不會被提升。本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱；上中下三本的讀書筆記：《你不知道的JavaScript》 (上) 讀書筆記...

FingerLiu 2019-08-23 14:35 評論0 收藏0
你不知道的javascript (1) --- this

摘要：的定義執行上下文。這本書也是舉了好幾個例子來說明，這句話的含義。我個人也認為，不通過代碼，非常難說明問題。所以，修改的是全局的，并不是自身的。 this 先說明一下，this是我JavaScript的盲區，寫這篇文章，就是為了讓自己能重新認識this，并且搞清楚，js里面的this，到底是什么。這個系列主要是記錄我自己看《你不知道的JavaScript》這本書的筆記。 this的定義...

Corwien 2019-08-23 16:12 評論0 收藏0