关于JavaScript中的this指向问题总结篇
在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 id="btn">点击我</div>
</body>
const btn=document.getElementById('btn');
btn.addEventListener('click',function () {
console.log(this); //<div id="btn">点击我</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();
大家在看看我开头说的第三条准则：es6的箭头函数中，this指向创建者，并非调用者，fun1 在全局函数下创建，所以this指向全局window，而fun2在对象data下创建，this指向data对象，所以在func2函数内部this指向data对象，个人认为es6的箭头函数的this指向是对我上面所说的javascript设计缺陷的改进，（个人认知）。
6:改变this的指向
call、apply、bind这三个函数是可以人为的改变函数的this指向的，在这里就不多说这三者的区别了，在往后的博客里我会详细解释这三者的区别的。现在先拿一个来举一个例子
const func=function(){
console.log(this);
};
func(); //window
func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}
这三个方法都是可以人为的改变this的指向，区别是call、apply会将该方法绑定this之后立即执行，而bind方法会返回一个可执行的函数。
说这很多总结起来就是我开头说的4点
1:全局变量默认挂载在window对象下
2:一般情况下this指向它的调用者
3:es6的箭头函数中，this指向创建者，并非调用者
4:通过call、apply、bind可以改改变this的指向
说实话第一次写博客，确实挺忐忑的，会不会有人看我的博客？会不会写的不正确？……想好多了，总结了：不好的地方欢迎指正。
以上所述是小编给大家介绍的关于JavaScript中的this指向问题总结篇，希望对大家有所帮助，如果大家有任何问题，欢迎给我留言，小编会及时回复大家的！
相关文章
本篇文章主要介绍了webpack打包node.js后端项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了微信小程序获取手机验证码的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
如果简单的嵌套一般都是外面用双引号，则里面用单引号，反之亦同，如果特别负责的嵌套大家看下如下的方法。2009-05-05
JavaScript onclick与addEventListener使用的区别介绍
addEventListener()方法用于向指定元素添加事件句柄，使用 removeEventListener()方法来移除，onclick和addEventListener事件区别是：onclick事件会被覆盖，而addEventListener可以先后运行不会被覆盖，addEventListener可以监听多个事件2022-09-09
下面小编就为大家分享一篇js 提取某()特殊字符串长度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
如果我们需要比较两个数组是否相等，不能像比较基本类型(String、Number、Boolean等)一样，使用 === (或 ==) 来判断，所以如果要比较数组是否相等，需要使用一些特殊方法。本文为大家整理了四种常见用法，需要的可以参考一下2023-02-02
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下2015-04-04
本节主要介绍了js键盘事件的keyCode，在你按下键时会弹出它的键码,需要的朋友可以参考下2014-07-07
JavaScript 模块化开发实例详解【seajs、requirejs库使用】
这篇文章主要介绍了JavaScript 模块化开发,结合实例形式详细分析了基于seajs、requirejs库的JavaScript模块化使用相关操作技巧,需要的朋友可以参考下2020-05-05
下面小编就为大家分享一篇javaScript动态添加Li元素的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论