详解JavaScript中的this指向问题

题记

JS中的this指向一直是个让初学者头疼的问题。今天，我们就一起来瞅瞅this倒地是咋回事，详细说说this指向原则，从此不再为了this指向操碎了心。

开篇

首先我们都知道this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它所在函数的对象。 那么接下来我们一步步探索下这个问题。

探索一

function a() {
      VAR user = "清蒸胖头鱼";
      console.LOG(this.name);
     //undefined  console.log(this);
 //Window }
     a();
     window.a();
    //两种结果相同

如我们上文所说的this的最终指向的是那个调用它所在函数的对象，这里a其实是由window对象点出来的。

探索二

var obj = {
  name: '清蒸胖头鱼',  F1: function () {
       console.log(this.name);
//清蒸胖头鱼  }
 }
    ;
     obj.f1();
    

再次强调一点this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁；这个例子this所在的f1函数是由obj对象调用的，所以这里的this指向obj对象。

探索三

如果要彻底的搞懂this必须看接下来的几个例子

var obj = {
  a: 5,  b: {
   a: 10,   fn: function () {
        console.log(this.a);
 //10   }
  }
 }
    ;
     obj.b.fn();
    

不是说this的最终指向的是那个调用它所在函数的对象吗？这里为什么不指向obj对象呢？

这里需要补充三点：

1. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。
2. 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
3. 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

看到这相信大家基本掌握了this指向的原则了吧，再碎碎念一遍：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它所在函数的对象。

下面给大家介绍this几种不同的使用情况

构造函数(new 关键字)情况

function Student() {
      this.name = '清蒸胖头鱼';
 }
     var s1 = new Student();
     console.log(s1.name);
    // 清蒸胖头鱼

这里之所以对象s1可以点出函数Student里面的name 是因为new关键字可以改变this的指向，将这个this指向对象s1.

// new 关键字执行的过程 1. 在函数体内创建一个空的对象. 2. 让当前this指向这个空的对象. 3. 通过this给当前空的对象添加键值对. 4. 返回已经添加好所有键值对的对象给外面的变量.

定时器里的this指向情况

var num = 0;
 function Obj() {
      this.num = 1;
  this.getNum1 = function () {
       console.log(this.num);
  }
    ;
  this.getNum2 = function () {
   setInterval(function () {
        console.log(this.num);
   }
    , 1000);
  }
    ;
 }
     var o = new Obj();
     o.getNum1();
    //1  (o.num) o.getNum2();
//0 (window.num)

o.getNum2()值之所以为0，也就是这里的this指向window，再拿出我们的this指向原则解释：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它所在函数的对象。

解： this.num所在的函数为定时器setInterval内的function () { console.log(this.num); } ，根据this指向原则当该函数被执行，this指向它的上一级对象。setInterval，又因setInterval是window点出了的，所以this指向window。

call、apply、bind 改变指向情况

var num = 0;
 function Obj() {
      this.num = 1;
  this.getNum1 = function () {
       console.log(this.num);
  }
    ;
  this.getNum2 = function () {
   setInterval(function () {
        console.log(this.num);
   }
    .bind(this), 1000);
//利用bind将this绑定到这个函数上  }
    ;
 }
     var o = new Obj();
     o.getNum1();
    //1  (o.num) o.getNum2();
    //1 (o.num) 

解释：

bind()方法是Function.PRototyPE上的一个方法,当被绑定函数调用时,bind方法会创建一个新函数，并将第一个参数作为新函数的运行时的this。

根据原则：

没使用bind方法前：被调用时：this.num指向的是调用它所在函数的对象，也就是window.setTimeout对象。 使用bind方法后：被调用时：将原来的this重新指向到→调用getSum2函数（就是新this所在的函数）的对象。这里构造函数，通过new调用，所以指向o对象。

bind方法在该情况比较常用,当然如果使用call或apply方法来代替也行，得到的结果也是正确的，但是call和apply方法会在调用后马上执行，那样就没了延时的效果，定时器也就没有意义了。

以上就是详解JavaScript中的this指向问题的详细内容，更多关于JavaScript this指向的资料请关注其它相关文章！

• javascript this指向相关问题及改变方法
• 详解JavaScript的this指向和绑定
• 我所理解的JavaScript中的this指向
• JavaScript this关键字指向常用情况解析
• 浅谈JavaScript中this的指向问题
• 浅谈JavaScript中this的指向更改
• JavaScript this指向相关原理及实例解析
• JavaScript This指向问题详解
• 浅谈JS中几种轻松处理''this''指向方式
• js中的this的指向问题详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！