this到底指向啥？看完這篇就知道了！
JS中的this是一個老生常談的問題了，因為它并不是一個確定的值，在不同情況下有不同的指向，所以也經常使人困惑。本篇文章會談談我自己對this的理解。
this到底是啥
其實this就是一個指針，它指示的就是當前的一個執行環境，可以用來對當前執行環境進行一些操作。因為它指示的是執行環境，所以在定義這個變量時，其實是不知道它真正的值的，只有運行時才能確定他的值。同樣一段代碼，用不同的方式執行，他的this指向可能是不一樣的。我們來看看如下代碼：
- function func() {
- this.name = "小小飛";
- console.log(this); // 看一下this是啥
- }
這個方法很簡單，只是給this添加了一個name屬性，我們把這個方法復制到Chrome調試工具看下結果：
上圖中我們直接調用了func()，發現this指向的是window，name屬性添加到了window上。下面我們換一種調用方式，我們換成new func()來調用：
我們看到輸出了兩個func {name: "小小飛"}，一個是我們new返回的對象，另一個是方法里面的console。這兩個值是一樣的，說明這時候方法里面this就指向了new返回的對象，而不是前面例子的window了。這是因為當你使用new去調用一個方法時，這個方法其實就作為構造函數使用了，這時候的this指向的是new出來的對象。
下面我們分別講解下幾種情況
使用new調用時，this指向new出來的對象
這個規則其實是JS面向對象的一部分，JS使用了一種很曲折的方式來支持面向對象。當你用new來執行一個函數時，這個函數就變成了一個類，new關鍵字會返回一個類的實例給你，這個函數會充當構造函數的角色。作為面向對象的構造函數，必須要有能夠給實例初始化屬性的能力，所以構造函數里面必須要有某種機制來操作生成的實例，這種機制就是this。讓this指向生成的實例就可以通過this來操作實例了。關于JS的面向對象更詳細的解釋可以看這篇文章。
this的這種特性還有一些妙用。一個函數可以直接調用，也可以用new調用，那假如我只想使用者通過new調用有沒有辦法呢？下圖截取自Vue源碼：
Vue巧妙利用了this的特性，通過檢查this是不是Vue的一個實例來檢測使用者是通過new調用的還是直接調用的。
沒有明確調用者時，this指向window
這個其實在最開始的例子就講過了，那里沒有明確調用者，this指向的是window。我們這里講另外一個例子，函數里面的函數，this指向誰？
- function func() {
- function func2() {
- console.log('this:', this); // 這里的this指向誰？
- }
- func2();
- }
我們執行一下看看：
直接執行：
使用new執行：
我們發現無論是直接執行，還是使用new執行，this的值都指向的window。直接執行時很好理解，因為沒有明確調用者，那this自然就是window。需要注意的是使用new時，只有被new的func才是構造函數，他的this指向new出來的對象，他里面的函數的this還是指向window。
有明確調用者時，this指向調用者
看這個例子：
- var obj = {
- myName: "小小飛",
- func: function() {
- console.log(this.myName);
- }
- }
- obj.func(); // 小小飛
上述例子很好理解，因為調用者是obj，所以func里面的this就指向obj，this.myName就是obj.myName。其實這一條和上一條可以合在一起，沒有明確調用者時其實隱含的調用者就是window，所以經常有人說this總是指向調用者。
下面我們將這個例子稍微改一下：
- var myName = "大飛哥";
- var obj = {
- myName: "小小飛",
- func: function() {
- console.log(this.myName);
- }
- }
- var anotherFunc = obj.func;
- anotherFunc(); // 輸出是啥？
這里的輸出應該是“大飛哥”，因為雖然anotherFunc的函數體跟obj.func一樣，但是他的執行環境不一樣，他其實沒有明確的調用者，或者說調用者是window。這里的this.myName其實是window.myName，也就是“大飛哥”。
我們將這個例子再改一下：
- let myName = "大飛哥";
- var obj = {
- myName: "小小飛",
- func: function() {
- console.log(this.myName);
- }
- }
- var anotherFunc = obj.func;
- anotherFunc(); // 注意這里輸出是undefined
這次我們只是將第一個var改成了let，但是我們的輸出卻變成了undefined。這是因為let，const定義變量，即使在最外層也不會變成window的屬性，只有var定義的變量才會成為window的屬性。
箭頭函數并不會綁定this
這句話的意思是箭頭函數本身并不具有this，箭頭函數在被申明確定this，這時候他會直接將當前作用域的this作為自己的this。還是之前的例子我們將函數改為箭頭函數：
- var myName = "大飛哥";
- var obj = {
- myName: "小小飛",
- func: () => {
- console.log(this.myName);
- }
- }
- var anotherFunc = obj.func;
- obj.func(); // 大飛哥
- anotherFunc(); // 大飛哥
上述代碼里面的obj.func()輸出也是“大飛哥”，是因為obj在創建時申明了箭頭函數，這時候箭頭函數會去尋找當前作用域，因為obj是一個對象，并不是作用域，所以這里的作用域是window，this也就是window了。
再來看一個例子：
- var myName = "大飛哥";
- var obj = {
- myName: "小小飛",
- func: function () {
- return {
- getName: () => {
- console.log(this.myName);
- }
- }
- }
- }
- var anotherFunc = obj.func().getName;
- obj.func().getName(); // 小小飛
- anotherFunc(); // 小小飛
兩個輸出都是“小小飛”，obj.func().getName()輸出“小小飛”很好理解，這里箭頭函數是在obj.func()的返回值里申明的，這時他的this其實就是func()的this，因為他是被obj調用的，所以this指向obj。
那為什么anotherFunc()輸出也是“小小飛”呢？這是因為anotherFunc()輸出的this，其實在anotherFunc賦值時就確定了：
- var anotherFunc = obj.func().getName;其實是先執行了obj.func()
- 執行obj.func()的時候getName箭頭函數被申明
- 這時候箭頭函數的this應該是當前作用域的this，也就是func()里面的this
- func()因為是被obj調用，所以this指向obj
- 調用anotherFunc時，其實this早就確定了，也就是obj，最終輸出的是obj.myName。
再來看一個構造函數里面的箭頭函數，前面我們說了構造函數里面的函數，直接調用時，他的this指向window，但是如果這個函數時箭頭函數呢：
- var myName = "大飛哥";
- function func() {
- this.myName = "小小飛";
- const getName = () => {
- console.log(this.myName);
- }
- getName();
- }
- new func(); // 輸出啥？
這里輸出的是“小小飛”，原理還是一樣的，箭頭函數在申明時this確定為當前作用域的this，在這里就是func的作用域，跟func的this一樣指向new出來的實例。如果不用new，而是直接調用，這里的this就指向window。
DOM事件回調里面，this指向綁定事件的對象
- function func(e) {
- console.log(this === e.currentTarget); // 總是true
- console.log(this === e.target); // 如果target等于currentTarget,這個就為true
- }
- const ele = document.getElementById('test');
- ele.addEventListener('click', func);
currentTarget指的是綁定事件的DOM對象，target指的是觸發事件的對象。DOM事件回調里面this總是指向currentTarget，如果觸發事件的對象剛好是綁定事件的對象，即target === currentTarget，this也會順便指向target。如果回調是箭頭函數，this是箭頭函數申明時作用域的this。
嚴格模式下this是undefined
- function func() {
- "use strict"
- console.log(this);
- }
- func(); // 輸出是undefined
注意這里說的嚴格模式下this是undefined是指在函數體內部，如果本身就在全局作用域，this還是指向window。
- <html>
- ...
- <script>
- "use strict"
- console.log(this); // window
- </script>
- ...
- </html>
this能改嗎
this是能改的，call和apply都可以修改this，ES6里面還新增了一個bind函數。
使用call和apply修改this
- const obj = {
- myName: "大飛哥",
- func: function(age, gender) {
- console.log(`我的名字是${this.myName}, 我的年齡是${age}，我是一個${gender}`);
- }
- }
- const obj2 = {
- myName: "小小飛"
- }
- obj.func.call(obj2, 18, "帥哥"); // 我的名字是小小飛, 我的年齡是18，我是一個帥哥
注意上面輸出的名字是"小小飛"，也就是obj2.myName。正常直接調用obj.func()輸出的名字應該是obj.myName，也就是"大飛哥"。但是如果你使用call來調用，call的第一個參數就是手動指定的this。我們將它指定為obj2，那在函數里面的this.myName其實就是obj2.myName了。
apply方法跟call方法作用差不多，只是后面的函數參數形式不同，使用apply調用應該這樣寫，函數參數應該放到一個數組或者類數組里面：
- obj.func.apply(obj2, [18, "帥哥"]); // 我的名字是小小飛, 我的年齡是18，我是一個帥哥
之所以有call和apply兩個方法實現了差不多的功能，是為了讓大家使用方便，如果你拿到的參數是一個一個的，那就使用call吧，但是有時候拿到的參數是arguments，這是函數的一個內置變量，是一個類數組結構，表示當前函數的所有參數，那就可以直接用apply，而不用將它展開了。
使用bind修改this
bind是ES5引入的一個方法，也可以修改this，但是調用它并不會立即執行方法本身，而是會返回一個修改了this的新方法：
- const obj = {
- myName: "大飛哥",
- func: function(age, gender) {
- console.log(`我的名字是${this.myName}, 我的年齡是${age}，我是一個${gender}`);
- }
- }
- const obj2 = {
- myName: "小小飛"
- }
- const func2 = obj.func.bind(obj2); // 返回一個this改為obj2的新方法
- func2(18, "帥哥"); // 我的名字是小小飛, 我的年齡是18，我是一個帥哥
bind和call，apply最大的區別就是call，apply會立即執行方法，而bind并不會立即執行，而是會返回一個新方法供后面使用。
bind函數也可以接收多個參數，第二個及以后的參數會作為新函數的參數傳遞進去，比如前面的bind也可以這樣寫：
- const func3 = obj.func.bind(obj2, 18); // 注意我們這里已經傳了一個年齡參數
- func3("帥哥"); //注意這里只傳了性別參數，年齡參數已經在func3里面了，輸出還是：我的名字是小小飛, 我的年齡是18，我是一個帥哥
自己寫一個call
知道了call的作用，我們自己來寫一個call：
- Function.prototype.myCall = function(...args) {
- // 參數檢查
- if(typeof this !== "function") {
- throw new Error('Must call with a function');
- }
- const realThis = args[0] || window;
- const realArgs = args.slice(1);
- const funcSymbol = Symbol('func');
- realThis[funcSymbol] = this; // 這里的this是原方法，保存到傳入的第一個參數上
- //用傳入的參數來調方法，方法里面的this就是傳入的參數了
- const res = realThis[funcSymbol](...realArgs);
- delete realThis[funcSymbol]; // 最后刪掉臨時存儲的原方法
- return res; // 將執行的返回值返回
- }
自己寫一個apply
apply方法跟call方法很像，區別只是在取調用參數上：
- Function.prototype.myApply = function(...args) {
- if(typeof this !== "function") {
- throw new Error('Must call with a function');
- }
- const realThis = args[0] || window;
- // 直接取第二個參數，是一個數組
- const realArgs = args[1];
- const funcSymbol = Symbol('func');
- realThis[funcSymbol] = this;
- const res = realThis[funcSymbol](...realArgs);
- delete realThis[funcSymbol];
- return res;
- }
自己寫一個bind
自己寫一個bind需要用到前面的apply，注意他的返回值是一個方法
- Function.prototype.myBind = function(...args) {
- if(typeof this !== "function") {
- throw new Error('Must call with a function');
- }
- const _func = this; // 原方法
- const realThis = args[0] || window; // 綁定的this
- const otherArgs = args.slice(1); // 取出后面的參數作為新函數的默認參數
- return function(...args2) { // 返回一個方法
- return _func.apply(realThis, [...otherArgs,...args2]); // 拼接存儲參數和新參數，然后用apply執行
- }
- }
總結
- 函數外面的this，即全局作用域的this指向window。
- 函數里面的this總是指向直接調用者。如果沒有直接調用者，隱含的調用者是window。
- 使用new調用一個函數，這個函數即為構造函數。構造函數里面的this是和實例對象溝通的橋梁，他指向實例對象。
- 箭頭函數里面的this在它申明時確定，跟他當前作用域的this一樣。
- DOM事件回調里面，this指向綁定事件的對象(currentTarget)，而不是觸發事件的對象(target)。當然這兩個可以是一樣的。如果回調是箭頭函數，請參考上一條，this是它申明時作用域的this。
- 嚴格模式下，函數里面的this指向undefined，函數外面(全局作用域)的this還是指向window。
- call和apply可以改變this，這兩個方法會立即執行原方法，他們的區別是參數形式不一樣。
- bind也可以修改this，但是他不會立即執行，而是返回一個修改了this的函數。
文章的最后，感謝你花費寶貴的時間閱讀本文，如果本文給了你一點點幫助或者啟發，請不要吝嗇你的贊和GitHub小星星，你的支持是作者持續創作的動力。
