前言：一轉眼從事前端已經6年了，從當時的小白到如今大廠的技術專家,中間也走過不少彎路，從今天開始我會持續更新前端技術文章，并且整體的文章會進行體系梳理，整個知識體系分為：基礎精講，框架講解，框架及工具原理，前端面試題精講，大廠面試題收錄精講，前端新技術講解。通過完善的技術精講助力各位快速成長，同時也希望各位能夠在我的幫助下獲得比較好的offer，少走彎路，大家一起加油。那么開始我們的第一篇文章吧。
頭疼的this
為什么說是頭疼的this,對于常年使用C++,C#,Java等這些面向對象語言的程序員來說，幾乎天天都和this打交道。在這些語言里，this含義非常明確，就是指向當前的對象實例，我們用起來也是相當的放心。然而，到了JavaScript這個動態語言里，this的寫法沒變，但是其含義卻大大地不同了,JavaScript中的this總是讓人迷惑，應該是js眾所周知的坑之一。個人也覺得js中的this不是一個好的設計，由于this晚綁定的特性，它可以是全局對象，當前對象，或者…有人甚至因為坑大而不用this，我們一般在面試中面試官又會扔過來一堆各種各樣的考察this的題目，很是頭疼。
那到底什么是this?this是什么？
一、this的指向
首先我們先要記住this的幾個特點：
this 總是（非嚴格模式下）指向一個對象，而具體指向哪個對象是在運行時基于函數的
執行環境動態綁定的，而非函數被聲明時的環境；除了不常用的with和eval的情況，具體到實際應用中，this指向大概可以分為四種：
作為對象的方法調用；
作為普通函數調用；
構造器調用；
call 或 apply調用；
箭頭函數中，this指向函數上層作用域的this；
構造器和普通函數的區別在于
被調用的方式；A,call(B) => 可以理解成在B的作用域內調用了A方法；
1.1 作為對象的方法調用
當函數作為對象的方法被調用時，this指向該對象
var obj = {a: 'jianxi',getName: function(){console.log(this === obj);console.log(this.a);}};obj.getName(); // true jainxi
1.2 作為普通函數被調用
當函數不作為對象的屬性被調用，而是以普通函數的方式，this總是指向全局對象（在瀏覽器中，通常是Window對象）
window.name = 'jianxi';var getName = function(){console.log(this.name);};getName(); // jianxi
或者下面這段迷惑性的代碼
window.name = 'koa'var obj = {name: 'jianxi',getName: function(){console.log(this.name)}};var getNew = obj.getName;getNew(); // koa
而在ES5的嚴格模式下，this被規定為不會指向全局對象，而是undefined
1.3 構造器調用
除了一些內置函數，大部分Js中的函數都可以成為構造器，它們與普通函數沒什么不同
構造器和普通函數的區別在于被調用的方式：當new運算符調用函數時，總是返回一個對象，this通常也指向這個對象
var MyClass = function(){this.name = 'jianxi';}var obj = new MyClass()obj.name; // jianxi
但是，如果顯式的返回了一個object對象，那么此次運算結果最終會返回這個對象。
var MyClass = function () {this.name = 1;return {name: 2}}var myClass = new MyClass();console.log('myClass.name:', myClass.name); // { name: 2}
只要構造器不顯示的返回任何數據，或者返回非對象類型的數據，就不會造成上述問題。
1.4 call或apply調用
跟普通的函數調用相比，用call和apply可以動態的改變函數的this
var obj1 = {name: 1,getName: function (num = '') {return this.name + num;}};var obj2 = {name: 2,}// 可以理解成在 obj2的作用域下調用了 obj1.getName()函數console.log(obj1.getName()); // 1console.log(obj1.getName.call(obj2, 2)); // 2 + 2 = 4console.log(obj1.getName.apply(obj2, [2])); // 2 + 2 = 4
1.5箭頭函數
箭頭函數不會創建自己的this，它只會從自己的作用域鏈的上一層繼承this。因此，在下面的代碼中，傳遞給setInterval的函數內的this與封閉函數中的this值相同：
this.name = 2var obj = {name: '1',getName: () => {console.log(this.name)}}obj.getName()
1.6常見的坑
就像標題一樣，有的時候this會指向undefined
情況一
var obj = {name: '1',getName: function (params) {console.log(this.name)}};obj.getName();var getName2 = obj.getName;getName2()
這個時候，getName2()作為普通函數被調用時，this指向全局對象——window。
情況二
當我們希望自己封裝Dom方法，來精簡代碼時：
var getDomById = function (id) {return document.getElementById(id);};getDomById('div1') //dom節點
那么我們看看這么寫行不行？
var getDomById = document.getElementByIdgetDomById('div1') // Uncaught TypeError: Illegal invocation(非法調用)
這是因為:
當我們去調用
document對象的方法時，方法內的this指向document。當我們用getId應用document內的方法，再以普通函數的方式調用，函數內容的this就指向了全局對象。
利用call和apply修正情況二
document.getElementById = (function (func) {return function(){return func.call(document, ...arguments)}})(document.getElementById)// 利用立即執行函數將document保存在作用域中
二、call和apply
不要因為它的“強大”而對它產生抗拒，了解并熟悉它是我們必須要做的，共勉！
1.call和apply區別
先來看區別，是因為它們幾乎沒有區別，下文代碼實例call和apply都可以輕易的切換。
當它們被設計出來時要做到的事情一摸一樣，唯一的區別就在于傳參的格式不一樣
apply接受兩個參數
第一個參數指定了函數體內this對象的指向
第二個參數為一個帶下標的參數集合（可以是數組或者類數組）
call接受的參數不固定
第一個參數指定了函數體內this對象的指向
第二個參數及以后為函數調用的參數
因為在所有（非箭頭）函數中都可以通過arguments對象在函數中引用函數的參數。此對象包含傳遞給函數的每個參數，它本身就是一個類數組，我們apply在實際使用中更常見一些。
call是包裝在apply上面的語法糖，如果我們明確的知道參數數量，并且希望展示它們，可以使用call。
當使用call或者apply的時候，如果我們傳入的第一個參數為null，函數體內的this會默認指向宿主對象，在瀏覽器中則是window。
借用其他對象的方法
我們可以直接傳null來代替任意對象
Math.max.apply(null, [1, 2, 3, 4, 5])
2.call和apply能做什么？
使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數——來時MDN
調用構造函數來
實現繼承;調用函數并且指定上下文的
this;調用函數并且不指定第一個參數;
1.調用構造函數來實現繼承
通過“借用”的方式來達到繼承的效果：
function Product(name, price) {this.name = name;this.price = price;}function Food(name, price) {Product.call(this, name, price); //this.category = food;}var hotDog = new Food('hotDog', 20);
2.調用函數并且指定上下文的 this
此時this被指向了obj
function showName() {console.log(this.id + ':' + this.name);};var obj = {id: 1,name: 'jianxi'};showName.call(obj)
3.使用call單純的調用某個函數
Math.max.apply(null, [1,2,3,10,4,5]); // 10
三、模擬實現一個call
先來看一下call幫我們需要做什么？
var foo = {value: 1};function show() {console.log(this.value);};show.call(foo); //1
就像解方程，要在已知條件中尋找突破哦口：
call使得this的指向變了，指向了foo;show函數被執行了;傳入的參數應為
this+ 參數列表;
第一版代碼
上面提到的3點，僅僅完成了一點，且傳入的參數
var foo = {value: 1}function show() {console.log(this.value);}Function.prototype.setCall = function (obj) {console.log(this); // 此時this指向showobj.func = this; // 將函數變成對象的內部屬性obj.func(obj.value) // 指定函數delete obj.func // 刪除函數，當做什么都沒發生～}show.setCall(foo)
第二版代碼
為了解決參數的問題，我們要能獲取到參數，并且正確的傳入：
var foo = {value: 1}function show(a, b) {console.log(this.value);console.log(a + b)}Function.prototype.setCall = function (obj) {obj.fn = this; // 將函數變成對象的內部屬性var args = [];for(let i = 1; i < arguments.length; i++){args.push('arguments[' + i + ']');}eval('obj.fn(' + args + ')'); // 傳入參數delete obj.fn; // 刪除函數，當做什么都沒發生～}show.setCall(foo, 1, 2); // 1 3
此時，我們就可以做到，傳入多個參數的情況下使用call了，但是如果你僅想用某個方法呢？
第三版代碼
Function.prototype.setCall = function (obj) {var obj = obj || window;obj.fn = this;var args = [];for(var i = 1, len = arguments.length; i < len; i++) {args.push('arguments[' + i + ']');}var result = eval('obj.fn(' + args +')');delete obj.fn;return result;};// 測試一下var value = 2;var obj = { value: 1 };function bar(name, age) {console.log(this.value);return {value: this.value,name: name,age: age}}bar.setCall(null); // 2console.log(bar.setCall(obj, 'kevin', 18));
三、bind
提到了call和apply，就繞不開bind()，來看一下MDN上對**bind()**的解釋：
bind() 方法創建一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定為 bind() 的第一個參數，而其余參數將作為新函數的參數，供調用時使用。
bind 可以被new , 可以進行構造函數
我們用Js來模擬一個bind方法，以便加深我們的認識
Function.prototype.newBind = function(context) {if(typeof this !== 'function') {throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');}var self = this;var args = Array.prototype.slice.call(arguments, 1); // 間接調用數組方法，獲取第一次傳的參數let tempFn = function {}; // 利用一個空函數作為中轉tempFn.prototype = this.prototype; // 修改返回函數的 prototype 為綁定函數的 prototype，實例就可以繼承綁定函數的原型中的值var resultFn = function () {var innerArgs = Array.prototype.slice.call(arguments);if (this instanceof tempFn) { // 如果 返回函數被當做構造函數后，生成的對象是 tempFn 的實例，此時應該將 this 的指向指向創建的實例。return self.apply(this, args.concat(innerArgs));} else {return self.apply(context, args.concat(innerArgs))}}resultFn = new tempFn();return resultFn;}
這樣看上去，bind總會幫我們返回同樣的this值，還是挺堅挺的哦～
如果您看到了最后，不妨收藏、點贊、評論一下吧！！！
持續更新，您的三連就是我最大的動力，共勉！