关于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