Llamada escrita a mano, aplicar, vincular

(1) llamar

Uso básico de llamada

function person () {
  console.log(this.name)
}

let me = {
  name: 'zfb'
}

person.call(me) // zfb

person.call (me) significa llamar a la función person, y apuntar esto en la función person al objeto me, y los parámetros de la llamada se pasan uno por uno.

function person (a, b) {
  console.log(this.name)
  console.log(a)
  console.log(b)
}

let me = {
  name: 'zfb'
}

person.call(me, 1, 2)
// zfb
// 1
// 2

La función de la llamada es modificar este punto, lo anterior apunta al objeto me

(Dos) aplicar

La diferencia entre solicitar y llamar es. El parámetro que se aplica acepta es una matriz, incluso si es un parámetro, debe colocarse en la matriz

Al recibir, uno a uno

function person (a, b) {
  console.log(this.name)
  console.log(a)
  console.log(b)
}

let me = {
  name: 'zfb'
}

person.apply(me, [1, 2])
// zfb
// 1
// 2

(3) Circunstancias especiales

Si el primer parámetro pasado para llamar y aplicar no está definido o es nulo, esto apunta a la ventana

function person (a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}

let me = {
  name: 'zfb'
}

person.apply(undefined, [1, 2])
person.call(undefined, 1, 2)
person.apply(null, [1, 2])
person.call(null, 1, 2)

Salida:

(Cuatro) enlazar

La función de bind es cambiar este punto, pero a diferencia de call y apply, call y apply se ejecutarán inmediatamente después de la vinculación, pero la vinculación no se ejecutará inmediatamente y es necesario volver a llamar

function person (a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}

let me = {
  name: 'zfb'
}

person.bind(me, 1, 2) // 这时候控制台什么都没发生
person.bind(me, 1 ,2)() // 手动调用
// {name: "zfb"}
// 1
// 4 

En otras palabras, bind devuelve una nueva función, y luego necesitamos llamar a la nueva función

const newFunction = person.bind(me, 1, 2) // 这时候控制台什么都没发生
console.log(newFunction) 
// ƒ person (a, b) {
//   console.log(this)
//   console.log(a)
//   console.log(b)
// }
newFunction() // 调用新返回的函数
// {name: "zfb"}
// 1
// 4

Entonces, pase los parámetros, puede pasar los parámetros a la nueva función de retorno

person.bind(me)(1, 2)
// {name: "zfb"}
// 1
// 4 

Si vincula nulo o indefinido, también esto apunta a la ventana

person.bind(null)(1, 2)
person.bind(undefined)(1, 2)

(5) Método de llamada de escritura a mano 

La esencia de fn.call (obj) es obj.fn ()

let me = {
  name: 'zfb',
  person: function (a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
  }
}
me.person(1, 2)

Entonces, lo que tenemos que hacer es montar la función vinculada al objeto al que apunta este

Function.prototype.call = function (obj, ...args) {
  // 如果第一个参数是 null 或者 undefined 赋值为 window
  if (obj === null || obj === undefined) {
    obj = window
  }
  // 谁调用call，this就指向谁
  obj.p = this
  // 给obj添加一个方法，把参数传进去调用 如果有返回值就返回赋值给result
  var result = obj.p(...args)
  // 添加了之后要删除
  delete obj.p
  // 返回 result 这个返回值
  return result
}

Del mismo modo, aplicar es el mismo

Function.prototype.apply = function (obj, args) {
  // 如果第一个参数是 null 或者 undefined 赋值为 window
  if (obj === null || obj === undefined) {
    obj = window
  }
  // 谁调用call，this就指向谁
  obj.p = this
  // 给obj添加一个方法，把参数传进去调用 如果有返回值就返回赋值给result
  var result = obj.p(...args)
  // 添加了之后要删除
  delete obj.p
  // 返回 result 这个返回值
  return result
}

La única diferencia entre llamar y aplicar es que los tipos de parámetros aceptados no se utilizan, uno es el valor después de la deconstrucción y el otro es la matriz sin deconstrucción

(6) atar

bind devuelve una nueva función

Function.prototype.bind = function (obj, ...args) { // bind 函数传参数
  // bind 返回一个新函数
  return (...arg2s) => { // 新函数传参数
    return this.call(obj, ...args, ...arg2s) // call 返回一个返回值，将返回值返回
  }
}

Hay dos formas de pasar parámetros en enlace

person.bind(me, 1, 2)() // bind 函数传参数
person.bind(me)(1, 2) // bind 返回的新函数传参数

Lo anterior son todos los puntos de conocimiento ~