在利用JavaScript開發(fā)的時(shí)候，經(jīng)常遇見因?yàn)閠his引發(fā)的問題，很容易給我們程序員高興死，所以我要記錄一篇有關(guān)this的文章，好讓朕遇見的時(shí)候不至于高興死。

我們先了解一下this的使用場景唄...

我們直接使用this看看會(huì)返回個(gè)啥。

• 瀏覽器環(huán)境下

this    //返回Window
this === window     //返回true

瀏覽器環(huán)境之中this就是代表當(dāng)前的全局對(duì)象Window

• Node命令行環(huán)境

this     //返回global
this === global       //返回true

Node環(huán)境之中this代表當(dāng)前的全局對(duì)象global，利用Node運(yùn)行js腳本文件時(shí)this代表的是空對(duì)象

根據(jù)我的理解，不論這個(gè)this出現(xiàn)在什么場合，他都總是返回一個(gè)對(duì)象

寫個(gè)簡單的例子，這誰都會(huì)

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name: '張三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：張三"
B.describe() // "姓名：李四"

很好發(fā)現(xiàn)，這是哪個(gè)實(shí)例調(diào)用的，那個(gè)this就是那個(gè)實(shí)例。
我們現(xiàn)在再直接調(diào)用f()函數(shù)，函數(shù)內(nèi)部會(huì)去找全局對(duì)象中掛載的name屬性，如果沒有就返回undefined.

接著我們測試個(gè)好玩的，在回調(diào)函數(shù)內(nèi)測試這個(gè)this。

let obj = {};
obj.f = function(){
       console.log(this === obj); 
}
document.querySelector("h1").addEventListener("click",obj.f)

這樣乍一看，調(diào)用函數(shù)的是obj對(duì)象，這個(gè)函數(shù)應(yīng)該返回的是個(gè)true，但是我們點(diǎn)擊發(fā)現(xiàn)，他返回的是false。原因是現(xiàn)在的this指向的并不是obj對(duì)象了，而是頁面上的Dom對(duì)象。

我的解決辦法是，如下

let obj = {};
obj.f = function(){
      console.log(this === obj);
}
let myfunc = obj.f.bind(obj)
document.querySelector("h1").addEventListener("click",myfunc)  

這樣返回的就是true了，代碼中用到了bind()函數(shù)了，這個(gè)以后再介紹吧。
大意就是給這個(gè)f函數(shù)綁定this對(duì)象就是obj...

其他我想嗦的東西

剛才我們測試來著，如果直接調(diào)用函數(shù)體內(nèi)打印this的函數(shù)，他會(huì)返回全局對(duì)象,global Window，但是當(dāng)我們給我們的js代碼設(shè)置為嚴(yán)格模式'use strict'后，這個(gè)this就是undefined，如果函數(shù)內(nèi)是如this.啥啥啥的就會(huì)報(bào)錯(cuò)的

以及箭頭函數(shù)沒有this