欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

关于JavaScript中的this指向问题总结篇

程序员文章站 2022-05-14 19:55:49
在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念： 1:全局变量默...

在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指向问题总结篇，希望对大家有所帮助，如果大家有任何问题，欢迎给我留言，小编会及时回复大家的！

上一篇： AngularJS ui-router (嵌套路由)实例

下一篇： Angular.js自动化测试之protractor详解

推荐阅读