JavaScript中this总结

转自：https://github.com/daijingfeng/blog/issues/2      讲的很详细很好，我也每个例子都有验证，便于日后翻阅。

JavaScript中的this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

先来列举一下都有哪些函数调用方式：

• 普通函数调用
• 对象方法调用
• call()、apply() 调用
• bind()
• 构造函数调用
• ES6箭头函数

通俗来说，“函数被谁调用，this就指向谁”。

普通函数调用

函数在全局作用域下运行；在非严格模式下，this指向全局对象window，在严格模式下，this会变成undefined。

function foo1(){
        return this;
    }
    console.log(foo1()===window);  //true

    function foo2(){
        'use strict';
        return this;
    }
    console.log(foo2()===undefined);   //true

对象方法调用

当以对象里的方法的方式调用函数时，它们的this是调用函数的对象。

 var obj={
        x:1,
        foo:foo
    };
    function foo(){
        console.log(this);   //{x: 1, foo: ƒ}
        console.log(this.x);   //1
    }
    obj.foo();

上面代码中，调用foo的是对象obj ，所以这里的this指向对象obj。

如果将对象里的foo方法赋给一个变量：

var obj={
        x:1,
        foo:foo
    };
    function foo(){
        console.log(this);  //window
        console.log(this.x);   //undefined
    }
    var fn=obj.foo;
    fn();

将obj.foo赋给了fn变量，而fn是在全局作用域中运行，因此this指向window，由于window下没有x这个变量，所以this.x为undefined。

如果把obj.foo传递给一个自己声明的函数。

function foo() {
  console.log(this); // window
  console.log(this.x); // undefined
}

var obj = {
  x: 1,
  foo: foo
};

// 自定义函数
function todoFn(cb) {
  cb();    
};

todoFn(obj.foo);

将obj.foo传递给自定义函数作为回调函数执行。结果一样。因为它仍然是在全局作用域中运行。

最后来看看在setTimeout()中又会输出怎样的结果。

var obj={
        x:1,
        foo:foo
    };
    function foo(){
        console.log(this);   //{x: 1, foo: ƒ}
        setTimeout(function(){
            console.log(this);  //window
        },0);
    }
    obj.foo();

第一个this还是对象方法调用的方式;但在setTimeout()里的this指向的是全局作用域window。为什么会是这样呢？

原因是，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上，该函数是在全局作用域中执行的，所以this就指向window.

思考一个问题。

上面代码的后三段代码中，都出现了同样的问题，就是他们的this都丢失了。怎么做才能让他们的this仍然指向原来的对象？

后面即将提到的call()、apply()及bind()方法都能解决这一问题。

call()、apply()调用

使用call()或者apply()可以改变上下文的this值。

var obj={
        x:'local',
    };
    //定义一个全局变量
    var x='global';
    //定义函数，返回值取决于调用方式
    function speak(){
        return this.x;
    }
    console.log(speak());   // "global"
    console.log(speak.call(obj));    //"local"
    console.log(speak.apply(obj));    //"local"

直接调用speak()时，相当于普通函数的调用，this指向window,值为global;使用call()或apply()作用一致，都让this指向了对象obj.只不过在给call()和apply()传递参数时有区别，如：

function add(c,d){
        return this.a+this.b+c+d;
    }
    var obj={
        a:1,
        b:2
    };
    //第一个参数作为this使用的对象，而后续参数作为参数传递给函数
    console.log(add.call(obj,3,4));  //10
    //第一个参数作为this使用的对象，第二个参数是穿第一个数组
    console.log(add.apply(obj,[3,4]));  //10

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

可以看出他们的不同之处在参数传递上有区别。

apply：最多只能有两个参数——新this对象和一个数组argArray。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表，即一一列举出来。

bind()方法：

Function.prototype.bind()会创建一个新的包装函数，这个函数会忽略他当前的this绑定（无论绑定的对象是什么），并把我们供的对象绑定到this上。

 var x=9;
    var obj={
        x:81,
        getX:function(){
            return this.x;
        }
    }
    //相当于对象方法调用，this指向对象obj
    console.log(obj.getX());   //81
    //将对象obj的方法getX赋值给f,f执行时是在全局环境中，this指向全局作用域
    var f=obj.getX;
    console.log(f());  //9
    var f2=obj.getX();
    console.log(f2);   //81
    //创建一个新函数，将this绑定到对象obj中
    var f2=obj.getX.bind(obj);
    console.log(f2());   //81

接着上面【对象方法调用】里的几个丢失this的例子。如何用call()、apply()、或bind()来绑定this到指定对象。

先看看这个例子：

  function foo(){
       console.log(this);   //{x: 1, foo: ƒ}
       console.log(this.x);   //1
   }

   var obj={
       x:1,
       foo:foo
   };

   var fn1=obj.foo;
   fn1.call(obj);
   fn1.apply(obj);

   var fn2=obj.foo.bind(obj);
   fn2();

再看看这个回调函数的例子：

 function foo(){
       console.log(this);   // {x: 1, foo: ƒ}
       console.log(this.x);   // 1
   }
   var obj={
       x:1,
       foo:foo
   }
   //自定义函数
    function todoFn(cb){
       cb.call(obj);
       //cb.apply(obj);
    }
    todoFn(obj.foo);

只需要在执行回调函数的时候使用call()或apply()将this绑定到obj对象即可。

最后看定时器的例子：

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  setTimeout(function(){
    console.log(this); // {x: 1, foo: ƒ}
  }.bind(this), 0);   //这里的this替换成obj也可以
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

这里使用了bind()方法，将上下文的this绑定到定时器里的匿名函数它最终还是指向对象obj.

区分一下call()、apply()、bind()的区别：

call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。

 构造函数调用

如果函数或者方法调用之前带有关键字new,他就构成构造函数调用。使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：

• 创建一个全新的对象。
• 这个新对象会被执行【原型】连接。
• 这个新对象会绑定到函数调用的this。
• 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

来看一个例子：

function foo(x){
  this.x = x;
  console.log(this); // foo {x: 2}
}
var f = new foo(2); 
console.log(f.x); // 2

使用new来调用foo()时，会构造一个新对象并把它绑定到foo()调用中的this上。即构造函数的this指向他实例化出来的对象。

箭头函数

箭头函数本身没有this,是根据外层（函数或者全局）作用域来决定this.

先来看一个例子：

var x = 1;
function testFn() {
  var fn1 = function() {
    console.log(this); // window
    console.log(this.x); // 1
  }
  var fn2 = () => {
    console.log(this); // window 
    console.log(this.x); // 1
  }
  fn1(); 
  fn2(); 
}
testFn();

两段代码输出的结果一致，但运行机制不一样。

• fn1是普通函数调用，前面说过普通函数调用this指向window;
• fn2是箭头函数，它会继承外层函数testFn的this，而testFn是在全局作用域中运行的，所以它的this是window，因此fn2箭头函数的this也是window。

对上面的例子做一点改动：

var x = 1;
function testFn() {
  var fn1 = function() {
    console.log(this); // window
    console.log(this.x); // 1
  }
  var fn2 = () => {
    console.log(this); // {x: 2} 
    console.log(this.x); // 2
  }
  fn1(); 
  fn2(); 
}
testFn.call({ x: 2 });

改变了testFn的调用方式。

• fn1依然是普通函数调用，this指向window；
• fn2箭头函数依然是继承它外层函数testFn的this，但这里testFn通过call使this指向了对象{id: 2}，所以fn2的this也指向该对象。

接着上面【对象方法调用】里的setTimeout例子。如果使用箭头函数会怎样呢？

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  console.log(this.x); // 1
  setTimeout(() => {
    console.log(this); // {x: 1, foo: ƒ}
    console.log(this.x); // 1
  }, 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

这里定时器回调的this由它外层函数foo的作用域决定，而foo是由Obj调用，所以他的rhis指向对象obj,所以定时器的this也指向对象obj.

另外，由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

小结：

JavaScript的this取决于被调用的方式。

• 如果是普通函数调用方式。非严格模式下，this指向window，严格模式下，this是undefined；
• 如果是对象调用方式，this指向该对象；
• 如果是call()、apply()或bind()方式调用，this指向被绑定的对象；
• 如果是构造函数调用方式，this指向实例化出来的新对象；
• 如果是箭头函数，是根据当前的词法作用域来决定this， 具体来说，箭头函数会继承外层函数调用的this绑定。