JavaScript函数中this的指向

JavaScript函数中this的指向

this的取值在函数真正被调用执行的时候确定，函数定义时无法确定。分为四种情况。

1、构造函数

所谓构造函数就是用来new对象的函数。

function Foo() {
  this.name = 'mayandev';
  this.year = 1997;

  console.log(this);  // Foo {name: "mayandev", year: 1997}
}

var f1 = new Foo();

console.log(f1.name);
console.log(f1.year);

上面的代码中，如果函数作为构造函数使用，那么其中的this就代码它即将new出来的对象。

如果是直接调用函数，则：

function Foo() {
  this.name = 'mayandev';
  this.year = 1997;

  console.log(this);  // Foo {name: "mayandev", year: 1997}
}

var f1 = new Foo();

console.log(f1.name);
console.log(f1.year);

上面的代码中，如果函数作为构造函数使用，那么其中的this就代码它即将new出来的对象。

如果是直接调用函数，则：

function Foo() {
  this.name = 'mayandev';
  this.year = 1997;

  console.log(this);  //Window 
}

Foo();

在这种情况下，this指向window

2、函数作为对象的一个属性

如果函数作为对象的一个属性，并作为对象的属性被调用时，this指向该对象。

var obj = {
  x: 10,
  fn: function () {
    console.log(this); 	// Object {x: 10, fn: }
    console.log(this.x)  // 10
  }
};
obj.fn();

如果fn函数不作为obj的一个属性被调用，this就是指向window。

下面代码中的this就是指向window。

var obj = {
  x: 10,
  fn: function () {
    console.log(this); 	// Window
    console.log(this.x)  // undefined
  }
};
var fn1 = obj.fn;
fn1();

因此this的指向由函数所在域确定。

3、函数用call或者apply调用

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

var obj = {
  x: 10
};

var fn = function () {
  console.log(this);  // Object {x: 10}
  console.log(this.x); // 10
}

fn.call(obj);

4、在全局&调用普通函数

在全局环境下，this永远时windows。

console.log(this === window);

下面的代码需要注意：

var obj = {
  x : 10,
  fn: function () {
    function f() {
      console.log(this);
      console.log(this.x);
    }
    f();
  }

};

obj.fn();

上面的代码中，虽然f是在obj.fn内部定义的，但它仍然是一个普通的函数，this仍然指向window。