this(回顾)

概念

函数执行的主体(不是上下文)：意思时谁把函数执行的，那么执行主体就是谁

使用情况

1. 全局作用域下的this指向 window (非严格模式)
2. 函数中的this：点前面是谁，就指向谁(当前的作用域)
3. 立即执行函数，定时器的this指向 window
4. 构造函数的this，指向当前实例
5. 箭头函数的this指向创建时的作用域
6. bind，call，apply 可以改变this指向

不同环境下的全局作用域

1. 浏览器环境下，全局作用域指向 window，frames，this
2. node环境下，指向 global
3. 通用：globalThis

this题目

经典例题1

点前面是谁就指向谁

例题链接
扩展例题链接

var length = 10
function fn(){
  console.log(this.length)
}
var obj = {
  length:5,
  methods:function(fn){
    fn() //没有点，即没有调用关系，this指向window
    arguments[0]() //可理解为，argument.fn(),指向arguments
  }
}
obj.methods(fn,1)// 10  2

定时器的this指向window

例题链接

var x = 4;
var obj = {
  x: 3,
  bar: function () {
    var x = 2
    setTimeout(function () {
      var x = 1
      console.log(this.x)//4
    }, 1000)
  }
}
obj.bar()

箭头函数的this区别

例题
经典例题

call,apply,bind

call

定义：基于 Function.prototype.call 方法，改变this 指向
使用方法：fn.call(thisArg, arg1, arg2, …)
注意：参数1：若为 undefined 或 null，this指向 window ( 严格模式为undefined )

封装 call

Function.prototype.myCall1 = function (ctx) {
  ctx = ctx || window;
  ctx.fn = this;
  var args = [].slice.call(arguments,1);
  var res = eval("ctx.fn(" + args.join() + ")");
  delete ctx.fn;
  return res;
};
// es6
Function.prototype.myCall2 = function (ctx = globalThis, ...args) {//解构赋值 会把 null 赋值过来
  if (ctx === null) {
    ctx = globalThis;
  }
  ctx.fn = this;
  let res = eval(`ctx.fn(${args.join()})`);
  delete ctx.fn;
  return res;
};

apply

定义：改变this指向
使用方法：fu.apply(thisArg, [argsArray])
注意：参数2必须是数组或类数组

封装

Function.prototype.myApply = function (ctx) {
  ctx = ctx || window;
  ctx.fn = this;
  var args = [].slice.call(arguments,1);
  var res = eval("ctx.fn(" + args.join() + ")");
  delete ctx.fn;
  return res;
};
// es6
Function.prototype.Apply2 = function (ctx, ...args) {
  ctx = ctx || globalThis;
  return this.call(ctx, ...args);
};

bind

定义：改变this指向，生成一个新函数
使用方法：fn.bind(thisArg, arg1, arg2, …)
注意：bind是预处理this，不会让函数执行，返回新函数 ==》 柯里化函数
IE6~IE8不支持

封装 bind

Function.prototype.myBind = function (ctx) {
  ctx = ctx || window;
  var self = this;
  var args = [].slice.call(arguments, 1)
  return function () {
    var temp = [].slice.call(arguments,0)
    args=args.concat(temp); 
    self.apply(ctx, args);
  };
};
// es6
Function.prototype.myBind = function (context, ...params) {
  return (...res) => this.apply(context, [...params, ...res]);
};

区别

1. 参数：apply的参数2传入数组或类数组
2. 函数执行：bind不执行函数，而是生成一个新函数
3. 兼容性：bind在IE6~8不支持