js中最烦的this指向问题，(超详细哦)

JS中的this
this的指向随着学习的深入越来越复杂、繁琐。在这里对this的指向问题做一总结，分享给大家收藏备用。为了方便大家，也有为懒人准备的总结，下面会逐条详细解释。总结：1.this指向当前函数执行时的当前对象：fn（）；//window不是声明对象！！！！！！ 不是声明对象！！！！！！！！2.没有明确的执行对象时指向window：var a = fn（）；//window3.函数作为window内置函数的回调函数时指向window：例如：setTimeout、setInterval和匿名函数4.evel函数、箭头函数向上查询当前作用域（一般也就是其声明对象）5.apply、call、blind函数可强制命令this的指向：apply（obj）；6.new关键字后的构造函数中this指向为新new出来的对象。下面进行逐条解释（建议pc端利用右侧导航栏进行观看）1.this指向当前函数执行时的当前对象.正常情况下的this均指向其执行对象这里的当前对象包括：window、当前对象、数组、html节点标签。例如：//当前对象window.b=2222let obj={ a:111, fn:function(){ alert(this.a);//111 alert(this.b);//undefined }}obj.fn();123456789再例如：//windowvar username='cn’function fn(){ alert(this.username);//cn}fu();12345这里值得注意的是：所指向的不是声明位置是执行者你看！var someone = { name: “Bob”, showName: function(){ alert(this.name); }};var other = { name: “Tom”, showName: someone.showName}other.showName();　　//Tom12345678910111213这里虽然声明在someone中但是执行函数却是在other故this执行other啦~2.没有明确的执行对象时指向window。例如：var a（全局局部变量均可）之后调用函数中的thisvar name = “Tom”;var Bob = { name: “Bob”, show: function(){ alert(this.name); }}var show = Bob.show;show();　　//Tom12345678910113.函数作为window内置函数的回调函数时指向window。这里最常见的就是setTimeout、setInterval和匿名函数：例如：匿名函数：var name = “Bob”; var nameObj ={ name : “Tom”, showName : function(){ alert(this.name); }, waitShowName : function(){ !function(__callback){ __callback(); }(this.showName); } }; nameObj.waitShowName();　　//Bob1234567891011121314setTimeout、setInterval与其相似不再赘述感觉好不方便啊，那么如果想强行改变其this的指向呢？我们可以先把this赋值给变量，再用变量操作回其函数。var name = “Bob”; var nameObj ={ name : “Tom”, showName : function(){ alert(this.name); }, waitShowName : function(){ var that = this; setTimeout(function(){ that.showName(); }, 1000); }}; nameObj.waitShowName();　　//Tom1234567891011121314154.evel函数、箭头函数向上查询当前作用域。例如：let obj={ a:222, fn:function(){ setTimeout(()=>{console.log(this.a)}); }};obj.fn();//2221234567这里是向上查询 最终this指向obj。（一般均是声明位置）evel类似不再赘述5.apply、call、blind函数可强制命令this的指向。例如：var name = “window”;var someone = { name: “Bob”, showName: function(){ alert(this.name); }};var other = { name: “Tom”}; someone.showName.apply(); //windowsomeone.showName.apply(other); //Tom123456789101112131415方法实用 可随意改变指向。6.new关键字后的构造函数中this指向为新new出来的对象。例如：function Person(__name){ this.name = __name; //这个this指向用该构造函数构造的新对象，这个例子是Bob对象}Person.prototype.show = function(){ alert(this.name);}var Bob = new Person(“Bob”);Bob.show(); //Bob123456789这里new后的构造函数为person其中的this就指向new出的新对象Bob。