说一说JavaScript中的this

情况1：构造函数

function Foo() {

  this.name = "qcc";

  this.age = "21";

  console.log(this); // Foo { name: "qcc", age: 21 }

}

var person = new Foo();

以上代码中，如果函数作为构造函数用，this就代表即将要new出来的对象。

但是如果直接调用Foo()函数，情况如下：

function Foo() {

  this.name = "qcc";

  this.age = "21";

  console.log(this); // Window

}

Foo();

这种情况下this是window。

情况2：函数作为对象的一个属性

var obj = {

  x: 10,

  fn: function() {

    console.log(this); // Object

    console.log(this.x); // 10

  }

}

obj.fn();

当函数作为一个对象的属性为调用是，this指向该对象。

var obj = {

  x: 10,

  fn: function() {

    console.log(this); // Window

    console.log(this.x); // undefined

  }

}

var f = obj.fn;

f();

情况3：函数用call或者apply调用

当一个函数被call或者apply调用时，this的值就取传入对象的值。

var obj = {

  x: 10,

}

var fn = function() {

  console.log(this); // Object

  console.log(this.x); // 10

}

fn.call(obj);

情况4：全局&普通函数

全局环境下，this永远是Window。

普通函数在调用时，this也时Window。需要注意下面的情况：

var obj = {

  x: 10,

  fn: function() {

    function f() {

      console.log(this); // Window

      console.log(this.x); // undefined

    }

    f();

  }

}

obj.fn();

此时的f();也是普通函数。