javascript基础- 函数中 this 指向、call、apply、bind

前言

本文简单讲解函数中this的指向问题，及涉及主动改变 this 指向的 call apply bind三个方法的实现原理。

函数内this的指向

在函数内部，this 的值取决于函数如何被调用。

我们先定义两个函数，分别使用和不使用严格模式，返回this，以供后续使用。

function fnReturnThis() {
  return this
}
function fnReturnThisStrict() {
  "use strict"
  return this
}
console.log(this === window) // true

典型函数调用

console.log(fnReturnThisStrict() === undefined) // true

const obj = { 
  fnReturnThis, 
  fnReturnThisStrict 
}
console.log(obj.fnReturnThis()) // obj
console.log(obj.fnReturnThisStrict()) // obj

const obj2 = {
  fnReturnThis: obj.fnReturnThis,
  fnReturnThisStrict: obj.fnReturnThisStrict,
  obj,
}
console.log(obj2.fnReturnThis()) // obj2
console.log(obj2.fnReturnThisStrict()) // obj2

console.log(obj2.obj.fnReturnThis()) // obj
console.log(obj2.obj.fnReturnThisStrict()) // obj

const fnReturnObj = {
  fnReturnWrapper: function() { 
    return fnReturnThisStrict()
  }
}
console.log(fnReturnObj.fnReturnWrapper()) // undefined

• 可以看到，通常情况下，函数内的this都指向当前函数的调用对象（.前面的对象）
• 部分特殊场景，在非严格模式下存在如下差异化

非严格模式差异化

console.log(fnReturnThis()) // window
console.log(fnReturnThisStrict()) // undefined

console.log(fnReturnThis.call(null)) // window
console.log(fnReturnThisStrict.call(null)) // null

console.log(fnReturnThis.call(undefined)) // window
console.log(fnReturnThisStrict.call(undefined)) // undefined

console.log(fnReturnThis.call(false)) // Boolean {false}
console.log(fnReturnThisStrict.call(false)) // false

console.log(fnReturnThis.call(0)) // Number {0}
console.log(fnReturnThisStrict.call(0)) // 0

console.log(fnReturnThis.call(BigInt(0))) // BigInt {0}
console.log(fnReturnThisStrict.call(BigInt(0))) // 0n

const symbol = Symbol()
console.log(fnReturnThis.call(symbol)) // Symbol {Symbol()}
console.log(fnReturnThisStrict.call(symbol) === symbol) // true

console.log(fnReturnThis.call('0')) // String {'0'}
console.log(fnReturnThisStrict.call('0')) // '0'

const fnReturnObj = {
  fnReturnWrapper: function() { 
    console.log(
      this,
      fnReturnThis(),
      fnReturnThisStrict()
    )
  }
}
fnReturnObj.fnReturnWrapper() // fnReturnObj  window  undefined

• 非严格模式下，一个特殊的过程称为 this 替换,确保 this 的值总是一个对象
  • 如果一个函数被调用时 this 被设置为 undefined 或 null，this 会被替换为 globalThis
  • 如果函数被调用时 this 被设置为一个原始值，this 会被替换为原始值的包装对象。
• 而严格模式下，this的值自始自终都遵循规范，若未指定值，则指向当前函数的调用对象，否则为指定值。

通过修改原型链，也符合上述标准

Number.prototype.fnReturnThis = fnReturnThis
Number.prototype.fnReturnThisStrict = fnReturnThisStrict
const num = 1
console.log(num.fnReturnThis()) // Number {1}
console.log(num.fnReturnThisStrict()) // num

作为回调函数执行，同样也符合上述标准

function callbackFn(fnReturnThis) {
  return fnReturnThis()
}
console.log(callbackFn(fnReturnThis)) // window
console.log(callbackFn(fnReturnThisStrict)) // undefined

const objUnStrict = { fnReturnThis }
const objStrict = { fnReturnThis: fnReturnThisStrict }
function callbackFn2(obj) {
  return obj.fnReturnThis()
}
console.log(callbackFn2(objStrict)) // objStrict
console.log(callbackFn2(objUnStrict)) // objUnStrict

console.log(Array.from(new Array(1)).map(fnReturnThis)[0]) // window
console.log(Array.from(new Array(1)).map(fnReturnThisStrict)[0]) // undefined

console.log(Array.from(new Array(1)).map(fnReturnThis, null)[0]) // window
console.log(Array.from(new Array(1)).map(fnReturnThisStrict, null)[0]) // null

console.log(Array.from(new Array(1)).map(fnReturnThis, 0)[0]) // Number {0}
console.log(Array.from(new Array(1)).map(fnReturnThisStrict, 0)[0]) // 0

所以要确定函数中this，只需按以下步骤：

• 找到谁调用的这个函数（一定要找准确），谁调用this就是谁
  • 严格模式下，this就是调用对象
  • 非严格模式下，this一定为一个对象
    • 如果为undefined 或 null，则会被替换为 globalThis
    • 如果为其它原始值，则会被替换为这个原始值的包装对象。

主动修改this指向，call apply 与 bind

apply<T, R>(this: (this: T) => R, thisArg: T): R;
apply<T, A extends any[], R>(this: (this: T, ...args: A) => R, thisArg: T, args: A): R;

call<T, A extends any[], R>(this: (this: T, ...args: A) => R, thisArg: T, ...args: A): R;

bind<T>(this: T, thisArg: ThisParameterType<T>): OmitThisParameter<T>;
bind<T, A extends any[], B extends any[], R>(this: (this: T, ...args: [...A, ...B]) => R, thisArg: T, ...args: A): (...args: B) => R;

由于函数中的this指向是在函数执行前确定的，所以同一个函数以不同方式执行会导致函数内部this指向不可预测（只看函数，你永远不会知道下一次这个函数是被谁调用），所以，在必要的时候，需要用call apply 与 bind来指定函数内部this：

function PlusN(n = 1) { 
  this.a = this.a + n
}
const obj = {
  a: 1,
  plusN: PlusN,
}
obj.plusN(1)
console.log(obj.a) // 2

const plus = obj.plusN

plus.call(obj, 1)
console.log(obj.a) // 3

plus.apply(obj, [1])
console.log(obj.a) // 4

const plusBind = PlusN.bind(obj)
plusBind(1)
console.log(obj.a) // 5

plus(1) // TypeError Cannot read properties of undefined (reading 'a')

// 作为构建函数
console.log(new PlusN()) // PlusN {a: 1}
const PlusNBind = PlusN.bind(obj)
console.log(new PlusNBind()) // PlusN {a: 1}
console.log(obj.a) // 5 不会影响 obj

从原理实现 call apply

call apply都是接受第一个参数作为函数内的this，其它入参为函数入参。返回函数执行结果。

也就是需要用第一个入参来调用函数，后续入参作为函数入参。并返回函数执行结果。

Function.prototype.myCall = function() {
  // 获取传入的数组参数
  let [context, ...args] = arguments

  // if myApply
  // args = args[0] 

  // 这里我们只做原理解析，注入原始值的情况不做考虑
  if (!(context instanceof Object)) throw new TypeError('context must be an object')
  
  // 将函数挂载到传入的context对象上
  let fnSymbolKey = Symbol()
  context[fnSymbolKey] = this

  // 记录返回值
  let res = args.length === 0
    ? context[fnSymbolKey]()
    : context[fnSymbolKey](...args)
  
  // 从上下文中删除函数引用
  delete context[fnSymbolKey]

  // 返回返回值
  return res
}

从原理实现 bind

从目标函数上调用，接受第一个参数作为函数内的this，其它入参为函数入参，返回一个函数，执行函数返回绑定this后的函数执行结果，支持追加函数入参（偏函数）。

Function.prototype.myBind = function(...params) {
  if (typeof this !== "function") throw new TypeError("what is trying to be bound is not a function")
  let [oThis, ...args] = params
  
  const Obj = { [this.name]: this }
  let functionToBind = this
  let FunctionBound = function(...boundFunctionParams) {
    return functionToBind.myCall(
      // 作为构建函数使用
      this instanceof FunctionBound ? this : oThis,
      // 偏函数功能
      ...args.concat(...boundFunctionParams)
    )
  }
  // 作为构建函数，将原型对象赋给新的函数
  FunctionBound.prototype = this.prototype
  return Obj[this.name]
}