在寫(xiě)JS代碼時(shí)，this的出場(chǎng)頻率頗高，擔(dān)負(fù)了傳遞對(duì)象，作用域等等功能，堪稱全能超人。

但是this復(fù)雜多變，初學(xué)的時(shí)候想弄清楚并不簡(jiǎn)單，繞著繞著就迷路了。

“我是誰(shuí)？我從哪來(lái)？我要到哪去？”

對(duì)于常見(jiàn)的this指向總結(jié)成一張簡(jiǎn)圖，佐以示例代碼食用，味道更佳。

示例代碼

例1：

// 瀏覽器中 console.log(this); 復(fù)制代碼

例2：

// Node.js cli中 console.log(this); 復(fù)制代碼

// Node.js module中 // 具體原因可查看Node模塊作用域知識(shí) //main.js console.log(this === global); console.log(this === module.exports); 復(fù)制代碼

例3：

//瀏覽器中 function foo() {console.log(this); } foo(); 復(fù)制代碼

例4：

//瀏覽器中 function foo() {"use strict";console.log(this); } foo(); 復(fù)制代碼

例5：

// 瀏覽器中 var _this; function Foo() {_this = this; } var foo = new Foo(); console.log(_this); foo === _this; 復(fù)制代碼

例6：

// 瀏覽器中 var foo = {method: function() {console.log(this === foo);} } foo.method(); 復(fù)制代碼

例7:

// 瀏覽器暫不支持ES6語(yǔ)法，在Node 8.0以上版本試驗(yàn) // test.js function foo() {let bar = () => {console.log('from bar->' + this);};console.log('from foo->' + this)bar();// 箭頭函數(shù)免疫call/apply修改作用域bar.call(666); } foo.call(555); foo.call(777); 復(fù)制代碼

下一次總結(jié)this常見(jiàn)的陷阱及避坑建議(￣.￣)

參考

2ality.com/2014/05/thi…

總結(jié)

以上是生活随笔為你收集整理的一张图学习常见this的指向的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。