关于this的指向

this的指向，是在函数被调用的时候确定

也就是执行上下文被创建的时候确定的，因此，一个函数中this的指向非常灵活。但是在函数执行过程中，this一旦被确定，就不可更改。

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

    function fn() {
      this = obj; // 试图修改this 报错
      console.log(this.a)
    }
           

一、全局对象中的this

全局环境中的this，指向它本身。

// 通过this绑定到全局对象
  this.a2 = 20;

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

  // 仅仅只有赋值操作，标识符会隐式绑定到全局对象
  a3 = 30;

  // 输出结果
  console.log(a1); // 1
  console.log(a2); // 20
  console.log(a3); // 30
           

二、函数中的this

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

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

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

    console.log(obj.c); // 40
    console.log(obj.fn()); // 10
           

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

// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局
    function fn() {
      'use strict'
      console.log(this);
    }

    fn(); // undefined  独立调用
    window.fn(); // window 被window所拥有
           

在上面的例子中，fn（）为独立的调用者，按照定义的理解，它内部的this指向就为undefined。而window.fn(）则因为fn被window所拥有，内部的this就指向了window对象。

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

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

foo.getA（）

中，getA是调用者，它不是独立调用，被对象foo所拥有，因此它的this指向了foo。而

test（）

作为调用者，尽管与foo.getA的引用相同，但是它是独立调用的，因此this指向为undefined，在非严格模式中，自动转向全局window。

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

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

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

    active(obj.getA); // 20
           

三、使用call，apply显式指定this

javaScript内部提供了一种机制，让我们可以手动设置this的指向。他们就是call和apply，所有的函数都有这两个方法，除了参数不同，其功能一样。他们的第一个参数都是this将要指向的对象。

function fn() {
      console.log(this.a);
    }
    var obj = {
      a: 20
    }

    fn.call(obj); // 20
           

fn并非为obj的方法，但是通过call，我们将fn内部的this绑定为obj，因此就可以使用this.a 访问obj的a的属性了。而call和apply区别是他们后面传递的参数，call是以一个一个的形式传递，apply是以数组的形式传递。

四、构造函数与原型方法上的this

function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    Person.prototype.getName = function () {
      return this.name;
    }

    var p1 = new Person('Nick', 20);
    p1.getName(); // 'Nick'
           

通过new操作符调用构造函数，会经历一下4个阶段：

• 创建一个新的对象；
• 将构造函数的this指向这个新对象；
• 指向构造函数的代码，为这个对象添加属性方法等；
• 返回新的对象；

因此当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1所接收。因此，我们可以说这个时候，构造函数的this指向了新的实例对象，p1。

而原型方法上的this：

p1.getName()

中的getName为调用者，它被p1所拥有，因此，getName中的this指向了p1。