js中this在各种环境下的指向和案例

js中this在各种环境下的指向和案例

1、全局环境

在全局环境中，this指向全局对象（浏览器中是window对象，Node.js中是global对象）。

console.log(this); // 输出全局对象，如window或global

2、普通函数环境

在函数中，this的指向取决于函数的调用方式。

• 如果函数作为普通函数调用，this指向全局对象。

例如：

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

foo(); // 输出全局对象，如window或global


//即使是嵌套的函数， this 也是指向全局对象
function outer() {
  function inner(){
    console.log(this);	//window或global
  }
  inner();
};   
outer();

• 但如果函数作为对象方法调用，this指向调用该方法的对象。
  例如：

var obj = {
  foo: function() {
    console.log(this);
  }
};

obj.foo(); // 输出obj对象

• 如果函数使用构造函数方式调用，this指向新创建的对象。
  例如：

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

var obj = new Foo(); // 输出新创建的对象  Foo {}

• 如果函数使用call、apply、bind方法调用，this指向作为参数传递的对象。
  例如

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

var obj = {};
foo.call(obj); // 输出obj对象 {}

3、箭头函数环境

箭头函数内部的this指向定义时所在的上下文，而不是调用时所在的上下文，也可以说是this为父级指向。
例如：

var obj = {
  foo: function() {
  //1
    var arrowFunc = () => {
      console.log(this);//此时this指向为上一层也就是注释1处，则输出obj对象
    }
    arrowFunc();
  }
};

obj.foo(); // 输出obj对象 {foo: ƒ}

注意，若此例子中arrowFunc改为普通函数，那就是在普通函数中调用，此时this就为全局对象window或global