在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念：
1:全局变量默认挂载在window对象下
2:一般情况下this指向它的调用者
3:es6的箭头函数中，this指向创建者，并非调用者
4:通过call、apply、bind可以改改变this的指向
下面我们具体分析一下
1:在函数调用时
（非严格模式)
const func = function () { console.log(this); const func2 = function () { console.log(this); }; func2(); //Window }; func(); //Window
（严格模式）
'use strict' const func = function () { console.log(this); const func2 = function () { console.log(this); }; func2(); //undefined }; func(); //undefined
结合第四和第一两条规则:func这个函数是全局的，默认挂载在window对象下，this指向它的调用者即window，所以输出window对象，但是在严格模式下，this不允许指向全局变量window，所以输出为undefined（func2在函数直接调用时默认指向了全局window，其实这属于javascript设计上的缺陷，正确的设计方式是内部函数的this 应该绑定到其外层函数对应的对象上，为了规避这一设计缺陷，聪明的 JavaScript 程序员想出了变量替代的方法，约定俗成，该变量一般被命名为 that。这种方式在接下来会讲到）。
2:作为对象方法
const user = { userName: '小张', age: 18, selfIntroduction: function () { const str = '我的名字是:' + this.userName + ",年龄是:" + this.age; console.log(str); const loop = function () { console.log('我的名字是:' + this.userName + ",年龄是:" + this.age); }; loop(); //我的名字是:undefined,年龄是:undefined } }; user.selfIntroduction(); //我的名字是:小张,年龄是:18
按照咱的第一条规则，this指向他的调用者，selfIntroduction（）方法的调用者是user，所以在selfIntroduction（）方法内部this指向了他的父对象即user，而loop方法输出的为undefined的原因就是我在上面所说的javascript的设计缺陷了，在这种情况下，我们通常选择在selfIntroduction（）方法里将this缓存下来。
const user = { userName: '小张', age: 18, selfIntroduction: function () { const str = '我的名字是:' + this.userName + ",年龄是:" + this.age; console.log(str); const that=this; const loop = function () { console.log('我的名字是:' + that.userName + ",年龄是:" + that.age); }; loop(); //我的名字是:小张,年龄是:18 } }; user.selfIntroduction(); //我的名字是:小张,年龄是:18
此时loop的this指向就理想了。
const user={ userName:'小张', age:18, selfIntroduction:function(){ const str='我的名字是:'+this.userName+",年龄是:"+this.age; console.log(str); } }; const other =user.selfIntroduction; other(); //我的名字是:undefined,年龄是:undefined const data={ userName:'小李', age:19, }; data.selfIntroduction=user.selfIntroduction; data.selfIntroduction(); //我的名字是:小李,年龄是:19
在看这段代码，将selfIntroduction（）赋值给了全局变量other，调用other（）方法，other挂载在全局函数window对象下，window对象下没有userName 和 age 这两个属性，所以输出为undefined。第二段代码，申明了data对象，包含了username和age属性，记住我们的第二条规则一般情况下this指向它的调用者，大家就明白了，data是selfIntroduction（）的函数的调用者，所以输出了data的userName和age。
3:在html里作为事件触发
<body> <div>点击我</div> </body>
const btn=document.getElementById('btn'); btn.addEventListener('click',function () { console.log(this); //<div>点击我</div> })
在种情况其实也是遵循了第二条规则一般情况下this指向它的调用者，this指向了事件的事件源即event。
4:new关键字（构造函数）
const fun=function(userName){ this.userName=userName; } const user=new fun('郭德纲'); console.log(user.userName); //郭德纲
这个就不多赘述了，new关键字构造了一个对象实例，赋值给了user，所以userName就成为了user对象的属性。
5:es6（箭头函数）
const func1=()=>{ console.log(this); }; func1(); //Window
const data={ userName:'校长', selfIntroduction:function(){ console.log(this); //Object {userName: "校长", selfIntroduction: function} const func2=()=>{ console.log(this); //Object {userName: "校长", selfIntroduction: function} } func2(); } } data.selfIntroduction();