关于this指向的深刻理解以及重写call/apply/bind

this指向的问题，因为涉及知识点较多，在初学时总是不甚了解。文档看多了反而晕头转向，今天反复看了波老师的文档，借此机会写下一些自己的想法，巩固记忆，加深理解。

🍓参考资料：前端基础进阶（七）：全方位解读this

最开始初学时，有一种说法，深得我心：谁调用它，this就指向谁。

这里的“它”是指函数，谁调用这个函数，这个函数里的this就指向谁。

这种说法，也对，但不全对，只概括了this指向的一种情况。在后期开发的过程中，更意识到了这种说法的缺陷。

this指向是在什么时候确定的？

首先，第一个问题，this指向是在什么时候确定的？

让我们回顾执行上下文。执行上下文在创建阶段，做了三件事情：

• 创建变量对象
• 建立作用域链
• 确定this指向

🆗，既然this指向是在执行上下文创建阶段确定的，那么执行上下文又是在什么时候被创建的？

• 执行上下文可以简单理解成当前代码的执行环境，它会创建一个作用域;
• 执行环境分为全局环境、函数环境和eval（多数时不用，可忽略）;
• 全局的执行上下文在script代码一开始运行时就创建;
• 函数的执行上下文在函数被调用时创建;

当我知道了“确定this指向->执行上下文创建阶段->函数被调用”这一套之后，我尝试着问自己，
“调用函数发生了什么？”
我没有立马答上来，我便意识到我还需要深刻地理解和记忆。

结论：this指向是在执行上下文创建阶段确定的

❤大家也可以理解成“ this指向是在函数被调用时确定的 ”，但是一定要牢记调用函数会创建执行上下文，然后才是确定this指向。

this到底指向谁呢？

因为this指向是在调用函数时确定的，那么一个函数的this指向，可以非常灵活。下面的例子，同一个函数，由于调用方式的不同，this指向了不一样的对象。

var a = 10;
var obj = {
  a: 20
}
function fn() {
  console.log(this.a);
}
fn(); // 10
fn.call(obj); // 20，使用call改变了this指向

除此之外，在函数执行过程中，this一旦被确定，就不可更改了。

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

一、全局对象中的this

全局对象的this，是一个较特殊的存在，指向它本身，也就是指向全局环境。

// 通过this绑定到全局对象
this.a2 = 20;
// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
var a1 = 10;
// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;
// 输出结果会全部符合预
console.log(a1);
console.log(a2);
console.log(a3);

二、函数中的this

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

要准确地确定this指向，找到函数的调用者以及区分它是否是独立调用十分关键。

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

fn();  // fn是调用者，独立调用
window.fn();  // fn是调用者，被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

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

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);

三、使用call，apply指定目标this

JavaScript内部提供了一种机制，让我们可以自行手动设置this的指向，就是call和apply。

❤大家在理解call和apply的时候记住，要理解成调用一个函数，指定this为目标对象，而不是让对象调用一个不属于它的方法。

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

fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

call与applay后面的参数，都是向将要执行的函数传递参数。其中call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同。

四、构造函数中的this

function Person(name, age) {
    // 这里的this指向了谁?
    this.name = name;
    this.age = age;   
}
Person.prototype.getName = function() {
    // 这里的this又指向了谁？
    return this.name;
}

// 上面的2个this，是同一个吗，他们是否指向了原型对象？

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

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

• 创建一个新的对象；
• 将构造函数的this指向这个新的对象（原构造函数独立调用，内部this指向undefined）；
• 执行构造函数的代码，为这个对象添加属性、方法等；
• 返回新的对象；

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

五、箭头函数中的this（特殊）

MDN官方解释：

• 引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。
• 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
• 箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。
• 箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
• 由于 箭头函数没有自己的this指针，通过 call()、apply()或bind()方法调用一个函数时，只能传递参数，不能绑定this，他们的第一个参数会被忽略。

参考资料：箭头函数 - JavaScript | MDN

重写call/apply/bind方法

区别

• call和bind可接受多个参数，第一个参数为this指向的目标对象；
• apply只能接受两个参数，第一个参数是this指向目标对象，第二个参数是一个数组，存放函数使用的参数；
• bind返回一个函数，call、apply立即执行；
• bind实现了函数柯里化，可以分两次向目标函数传递参数；

call

// call
  Function.prototype.myCall = function (context, ...args) {
    if (context == undefined || context == null) {
      context = window;
    }
    console.log(context)
    context.fn = this;
    console.log('this', this)  // myCall的调用者，是一个function；
    const result = context.fn(...args);
    console.log(context)       // 对象，包含this指向，和执行的函数；
    delete context.fn;         // 可能是因为引用类型数据更改了原来的变量，需要delete
    console.log(result)        // 函数执行的返回
    return result;
  }

  const obj1 = {
    basicNum: 1,
    sum: function (a, b) {
      return (a + b + this.basicNum);
    }
  }
  const obj2 = {
    basicNum: 10,
  }

  console.log(obj1.sum(2, 3));
  console.log(obj1.sum.call(obj2, 2, 3));
  console.log(obj1.sum.myCall(obj2, 2,3));

apply

// apply
  Function.prototype.myApply = function (context, args) {
    if (context == undefined || context == null) {
      context = window;
    }
    context.fn = this;
    const result = context.fn(...args);
    delete context.fn;
    return result
  }

  const obj1 = {
    basicNum: 1,
    sum: function (a, b) {
      return (a + b + this.basicNum);
    }
  }
  const obj2 = {
    basicNum: 10,
  }

  console.log(obj1.sum(2, 3));
  console.log(obj1.sum.apply(obj2, [2, 3]));
  console.log(obj1.sum.myBind(obj2, [2,3]));

bind

// bind
  Function.prototype.myBind = function (context, ...initArgs) {
    if (context == undefined || context == null) context = window;
    const _this = this;
    return function (...args) {
      context.fn = _this;
      const result = context.fn(...initArgs, ...args);
      return result;
    }
  }

  const obj1 = {
    basicNum: 1,
    sum: function (a, b) {
      return (a + b + this.basicNum);
    }
  }
  const obj2 = {
    basicNum: 10,
  }

  console.log(obj1.sum(2, 3));
  console.log(obj1.sum.bind(obj2, 2, 3)());
  console.log(obj1.sum.myBind(obj2, 2)(3));

补充特殊情况，请思考

const obj = {
  birth: 1990,
  getAge: function (year) {
    let fn = y => {
      console.log(this);       // obj
      return y - this.birth;
    }
    console.log(fn.prototype);  // undefined
    return fn.call({ birth: 2000 }, year);
  }
};
console.log(obj.getAge(2020));    // 20 or 30?

按照之前的说法，call改变this指向，那么答案便是2020-2000，应为30；
但是，fn是箭头函数，本身没有this对象，同时也没有原型对象，无法使用call改变this指向;