JavaScript中this指向问题

刚开始学到this,我也学得一知半解 ，越学越懵逼，完全搞不懂。这篇博客我就来整理一下this指向问题！

首先我们要知道this是什么呢？

• this 是 JavaScript 语言的一个关键字。
• 定义：this是包含它的函数作为方法被调用时所属的对象。
  定义看起来有点复杂：但是我们可以从3个方面理解:
  (1)包含它的函数
  (2)作为方法被调用时
  (3)所属的对象

下面从案例来分析一下吧：

   function add() {
         
          console.log(this);
       }
       add();

这个的this的函数是 add，add();说明当做方法调用了， 然后这个this指定的对象是window对象,我们都知道在默认的情况下this指向的是全局（window对象）。

this调用的几种方式

his 的指向，是当我们调用函数的时候确定的。 调用方式的不同决定了this 的指向不同，一般指向我们的调用者.。例图所示：

作为普通函数调用

  function good(x) {
         this.x=x;
     }
     good(5); //x成为一个值为5的全局变量

构造函数 this 指向

   function Star() {};
        Star.prototype.sing = function() {

        }
        var ldh = new Star();

构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象。

对象的方法 this指向

在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象。下面对象的方法 this指向的是对象 o

    var o = {
            sayHi: function() {
                console.log('对象方法的this:' + this);
            }
        }
        o.sayHi();

绑定事件函数 this 指向

这里是绑定了一个btn对象，所以this的指向是它的调用者

  var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定时间函数的this:' + this);
        };

定时器函数 this 指向

   window.setTimeout(function() {
            console.log('定时器的this:' + this);

        }, 1000);

立即执行函数 this指向

  (function() {
            console.log('立即执行函数的this' + this);
        })();

使用 apply 或 call 调用

让我们再一次重申，在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子：

function Point(x, y){ 
    this.x = x; 
    this.y = y; 
    this.moveTo = function(x, y){ 
        this.x = x; 
        this.y = y; 
    } 
 } 

 var p1 = new Point(0, 0); 
 var p2 = {x: 0, y: 0}; 
 p1.moveTo(1, 1); 
 p1.moveTo.apply(p2, [10, 10]);

在上面的例子中，我们使用构造函数生成了一个对象 p1，该对象同时具有 moveTo 方法；使用对象字面量创建了另一个对象 p2，我们看到使用 apply 可以将 p1 的方法应用到 p2 上，这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能，不同的是最后的参数不是作为一个数组统一传入，而是分开传入的。

call改变this的指向

function fn(x,y){
    console.log("调通函数");
    console.log(x+y);
  
    }
    var o={
        name:'系队'
    }
    fn.call(o,3,5);//输出调通函数 8