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

資訊專欄INFORMATION COLUMN

你不知道的this

zoomdong / 782人閱讀

摘要：話不多說，讓我們一起探討你不知道的牛刀小試答案初露鋒芒答案函數(shù)，第行是一個(gè)定時(shí)器，哪怕定時(shí)器的延遲時(shí)間為，仍然先執(zhí)行第行。故為當(dāng)使用定時(shí)器調(diào)用函數(shù)時(shí)，先執(zhí)行函數(shù)內(nèi)代碼，在進(jìn)行函數(shù)調(diào)用。如果都不是的話，使用默認(rèn)綁定。

MDN中的this定義

當(dāng)前執(zhí)行代碼的環(huán)境對(duì)象。

多么簡(jiǎn)約凝練的概括，寥寥11個(gè)字，將伴隨程序員的前世今生。話不多說，讓我們一起探討你不知道的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函數(shù)，第2行是一個(gè)定時(shí)器，哪怕定時(shí)器的延遲時(shí)間為0，仍然先執(zhí)行第3行。故為4
當(dāng)使用定時(shí)器調(diào)用函數(shù)時(shí)，先執(zhí)行函數(shù)內(nèi)代碼，在進(jìn)行函數(shù)調(diào)用。故為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返回一個(gè)新的函數(shù)
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行： 當(dāng)call的第一個(gè)參數(shù)為null, undefined或者不傳值時(shí)，只想window， this -> window = 3, msg沒有傳值，故為undefined
第25行：bind改變指向 -> obj，第26行：msg為3， 故為2 3
第27行：執(zhí)行函數(shù)，為2+3 = 5
銳不可當(dāng) 隱式丟失

一個(gè)最常見的 this綁定問題就是被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象，也就是說它會(huì)應(yīng)用默認(rèn)綁定，從而把 this 綁定到全局對(duì)象或者 undefined 上，取決于是否是嚴(yán)格模式

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()引用第位置其實(shí)foo, 因此doFoo（）相當(dāng)于是一個(gè)不帶修飾符的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定—> window = oops, global
舍我其誰(shuí) 
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 綁定比隱式綁定優(yōu)先級(jí)高,也閉隱式綁定綁定優(yōu)先級(jí)高
總結(jié)

函數(shù)是否在new中調(diào)用(new綁定)?如果是的話this綁定的是新創(chuàng)建的對(duì)象。
var bar = new foo()

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106865.html

相關(guān)文章

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

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

    lk20150415 評(píng)論0 收藏0

  • 你不知道的Virtual DOM（六）：事件處理&異步更新

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

    caozhijian 評(píng)論0 收藏0

  • 《你不知道的JavaScript》 (下) 閱讀摘要

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

    Jacendfeng 評(píng)論0 收藏0

  • 《你不知道的javascript》筆記_this

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

    cpupro 評(píng)論0 收藏0

  • 《你不知道的JavaScript》 (上) 閱讀摘要

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

    FingerLiu 評(píng)論0 收藏0

  • 你不知道的javascript (1) --- this

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

    Corwien 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<