一文读懂this

在学习js的过程中，this是绕不过的一道坎。今天我将通过这一篇文章来帮助大家全方位解读this。
对于this指向的理解，有这样一种说法：谁调用它，它就指向谁。
在大多数情况下，这样理解其实是说的通的。

一、函数在调用时就确定了this指向。

示例一：
var a = 10;
var obj = {
  a: 20
}

function fn () {
  console.log(this.a)
}
fn();   // 10
fn.call(obj)   // 20

二、在函数执行过程中，this一旦被确定，就不可更改了。

示例二：
var a = 10;
var obj = {
  a: 20
}

function fn () {
  this = obj;   // 这句话试图修改this，运行后会报错
console.log(this.a);
}

fn();

-1. 全局对象中的this
全局环境中的this，指向它本身。

// 通过this绑定到全局对象
this.a1 = 10;

// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
var a2 = 20;

// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;
console.log（a1）// 10
console.log(a2)  // 20
console.log(a3)  // 30

• 2.函数中的this
  在总结函数总this指向之前，我们有必要通过一些奇怪的例子，来感受一下函数中this的捉摸不定。

// demo01
var a = 20;
function fn () {
  console.log(this.a);
}
fn()  // 20--->相当于window.fn(),详细后边会说

// demo02
var a = 20;
function fn () {
function foo () {
console.log(this.a)
}
foo()
}
fn() // 20

// demo03
var a = 20;
var obj = {
  a: 10,
  c: this.a + 20,
  fn: function () {
        return this.a
  }
}

console.log(obj.c)  // 40  --->this指向window
console.log(obj.fn())  // 10  --->this指向obj

1.在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。
2.如果调用者函数被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
3.如果函数独立调用，那么该函数内部的this指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

function fn () {
  'use strict';
  console.log(this)
}
fn ()  // undefined
window.fn() // window

// 我们修改一下demo03的代码，看一下会发生什么变化。
'use strict';
var a = 20;
function foo () {
 var a = 1;
 var obj = {
   a: 10,
   c: this.a + 20,
   fn: function () {
         return this.a
   }
 }
 return obj.c
}

console.log(foo())  // 报错--->此时this指向undefined，obj.c = undefined.a + 20,所以报错
console.log(window.foo())  // 因为js是单线程，上边输出报错，所以这儿不会执行。如果上边错误解决，此处输出40，this指向window。

再来看一些容易理解错误的例子，加深一下对调用者与是否独立运行的理解。

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

var a = 20;
function getA() {
    return this.a;
}
var foo = {
    a: 10,
    getA: getA
}
console.log(foo.getA());  // 10

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

function active(fn) {
    fn(); // 真实调用者，为独立调用
}

var a = 20;
var obj = {
    a: 10,
    getA: foo
}

active(obj.getA);   // 20--->this指向window