执行上下文、this和call/apply/bind函数 （个人笔记）

this和call/apply/bind函数 （个人笔记）

一、什么是执行上下文

在执行一段代码之前，需要先解析代码。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。这一步执行完，才开始正式执行程序。

函数执行上下文同理，只是会多出来this、arguments和函数的参数。

二、this指向

this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，看图

三、call/apply/bind函数 可以改变函数this指向

call、apply、bind的区别：
call和apply第一个参数都为指定函数体内部this的指向，第二个参数apply函数为数组或者类数组对象，call为逗号隔开的每个单独参数；
bind与call、apply不同的是返回值是一个函数（用做立即执行函数或者用变量来进行接收）

实现原理(call)为例：
①判断调用对象是否为函数（即使call函数是函数的原型属性，但是也有其他数据类型通过call的方式来调用这三个方法，所有有必要判断调用对象是否是函数）
②判断上下文对象是否存在，如果不存在，则设置为window（这个也很哈好理解，如果要改变的this的指向在全局上下文里面找不到，所以就默认成window）
③处理传入的参数，截取第一个参数后的所有参数(第一个参数为要改变的this的指向，后面的才是函数的入参，截取可以用slice方法)
④将需要调用的函数设置为要改变this指向的对象的一个方法
⑤把处理过的入参传入，调用这个函数，得到结果
⑥将属性删掉，把结果return

Function.prototype.myCall = function(context) {
  // 判断调用对象
  if (typeof this !== "function") {
    console.error("type error");
  }
  // 获取参数
  let args = [...arguments].slice(1),
    result = null;
  // 判断 context 是否传入，如果未传入则设置为 window
  context = context || window;
  // 将调用函数设为对象的方法
  context.fn = this;
  // 调用函数
  result = context.fn(...args);
  // 将属性删除
  delete context.fn;
  return result;
};