Fonctions d'utilisation et implémentation manuscrite de call, apply et bind

usage

1.appliquer

applyAccepte deux paramètres, le premier paramètre est thisle pointeur et le deuxième paramètre est le paramètre accepté par la fonction, transmis sous forme de tableau

La fonction d'origine sera exécutée immédiatement après avoir modifié thisle pointeur, et cette méthode ne modifie temporairement thisle pointeur qu'une seule fois.

grammaire:

func.apply(thisArg, [argsArray])

thisArg : l'objet pointé par this lorsque la fonction est en cours d'exécution, obligatoire
argsArray : les paramètres passés lors de l'exécution de la fonction, sous forme de tableau, facultatif

exemple:

function fn (a,b,c) {
    console.log(this.name)
    console.log(a, b, c)
}
let obj = {name: '科比'}
fn.apply(obj, [1,2,3])
// 输出  科比 1 2 3

2.appeler

De applymême, thisla fonction d'origine sera exécutée immédiatement après avoir modifié le pointeur, et cette méthode ne modifie temporairement thisle pointeur qu'une seule fois.

La différence est que les paramètres passés dans apply doivent être sous forme de tableau, alors que call n'a pas cette restriction.

grammaire:

func.call(thisArg[, args1, args2, args3,....])

thisArg : l'objet pointé par this lorsque la fonction est en cours d'exécution, obligatoire
args1, etc. : paramètres passés lors de l'exécution de la fonction, facultatif

exemple:

function fn (a,b,c) {
    console.log(this.name)
    console.log(a, b, c)
}
let obj = {name: '科比'}
fn.call(obj, 1, 2, 3)
// 输出  科比  1 2 3

3. lier

La méthode bind est très similaire à call. Le premier paramètre thispointe également vers , et ce qui est transmis plus tard est également une liste de paramètres (mais cette liste de paramètres peut être transmise plusieurs fois)

Après avoir modifié thisle pointeur, il ne sera pas exécuté immédiatement, mais renverra une thisfonction qui modifie définitivement le pointeur.

grammaire:

func.bind(thisArg[, args1, args2, args3,....])

function fn (a, b, c, d) {
    console.log(this.name)
    console.log(a, b, c, d)
}
let obj = {name: '科比'}
let bindFn = fn.bind(obj, 1, 2, 3)
bindFn('bind') // 输出  科比  1 2 3 'bind'

Comme le montre l'exemple , une nouvelle fonction est renvoyée, pointée  bindlors de l'exécution de la nouvelle fonction , puis les paramètres transmis sont fusionnés avec les paramètres transmis lors de l'appel de la nouvelle fonction et transmis ensemble à la nouvelle fonction.thisobjbind

Mise en œuvre manuscrite :

Vous pouvez savoir à partir de l'utilisation ci-dessus pour appliquer, appeler, lier :

Appliquez, appelez et liez tous les points à appliquer, ce qui peut changer cela
. Call exécutera la fonction appelée et bind renvoie une nouvelle fonction.
Le deuxième paramètre de apply nécessite un tableau, tandis que call et bind ne limitent pas le type de données. Il transmettra ensemble les paramètres restants à la fonction. Bind fusionnera également les paramètres transmis lorsque la nouvelle fonction est appelée et les transmettra au nouvelle fonction.
Ils sont tous liés au prototype Function.
Voyons comment l'implémenter par écriture manuscrite. Parce qu'ils sont tous liés au prototype Function.

1.appliquer

Function.prototype.apply = function (context, args) {
  // 不传默认是全局，window
  context = context || window
  // args不传时默认是空数组，防止下面用spread操作符时报错
  args = args ? args : []
  // 把this存到context.fn，这里的this是调用的函数
  context.fn = this
  // 执行调用的函数，this指向context，参数用spread操作符扩展
  const res = context.fn(...args)
  // 删除，不污染context
  delete context.fn
  // 返回res
  return res
}

function fn (a,b,c) {
    console.log(this.name)
    console.log(a, b, c)
}
let obj = {name: '码上游'}
fn.apply(obj, [1,2,3])
// 输出  码上游  1 2 3

2.appeler

call est le même que apply. La raison principale est que les paramètres sont différents de apply. Il suffit d'apporter de petites modifications ;

le code s'affiche comme ci-dessous :

Function.prototype.call = function (context, ...args) {
  // 不传默认是全局，window
  context = context || window
  // args不传时默认是空数组，防止下面用spread操作符时报错
  args = args ? args : []
  // 把this存到context.fn，这里的this是调用的函数
  context.fn = this
  // 执行调用的函数，this指向context，参数用spread操作符扩展
  const res = context.fn(...args)
  // 删除，不污染context
  delete context.fn
  // 返回res
  return res
}

Il est principalement utilisé lors de calll'obtention du deuxième paramètre de la fonction , afin que tous les paramètres restants puissent être obtenus en arguments, et que tout le reste soit pareil.argsspread操作符

function fn (a,b,c) {
    console.log(this.name)
    console.log(a, b, c)
}
let obj = {name: '科比'}
fn.call(obj, 1, 2, 3)
// 输出  科比  1 2 3

3. lier

Bind est différent. Il renvoie une nouvelle fonction. Cette nouvelle fonction peut être appelée ou utilisée comme constructeur à l'aide newd'opérateurs, une distinction doit donc être faite ici.

Function.prototype.bind = function (context, ...args) {
  // 不传默认是全局，window
  context = context || window
  // 把this存到fn，这里的this是调用的函数
  let fn = this
  return function newFn (...fnArgs) {
    let res
    // 要考虑新函数是不是会当作构造函数
    if (this instanceof newFn) {
      // 如果是构造函数则调用new 并且合并参数args，fnArgs
      res = new fn(...args, ...fnArgs)
    } else {
      // 当作普通函数调用 也可以用上面定义的_call
      res = fn.call(context, ...args, ...fnArgs)
    }
    return res
  }
}

vérifier

function fn (a, b, c, d) {
    console.log(this.name)
    console.log(a, b, c, d)
}
let obj = {name: '科比'}
let bindFn = fn.bind(obj, 1, 2, 3)
bindFn('bind') // 输出  科比  1 2 3 'bind'
 

let bindFn = fn.bind(obj, 1, 2, 3)
let instance = new bindFn()
instance.constructor === fn // true