Uso inteligente de aplicar, llamar y vincular en JavaScript

Aplicar, llamar

En JavaScript, llame y aplique existir para cambiar el contexto (contexto) de una función cuando se ejecuta. En otras palabras, es cambiar la dirección de esto dentro del cuerpo de la función.

Una característica importante de JavaScript es que las funciones tienen los conceptos de "contexto de definición" y "contexto de tiempo de ejecución" y "contexto se pueden cambiar".

Primero obtengamos una castaña:

 function fruits () {} fruits.prototype = {color: "rojo", say: function () {console.log ("Mi color es" + this.color);}} var Apple = new Fruits; Apple.say (); // mi color es rojo

Pero si tenemos un objeto banana = {color: "amarillo"}, y no queremos redefinir el método de decir para ello, entonces podemos usar el método Say of Apple por llamada o aplicar:

 banana = {color: "amarillo"} Apple.say.call (banana); // Mi color es Yellowapple.say.apply (plátano); // mi color es amarillo

Por lo tanto, se puede ver que la llamada y la aplicación parecen cambiar dinámicamente esto. Cuando un objeto no tiene un método determinado (el plátano no dice método en este castaño), pero otros lo son (Apple tiene un método en este castaño), podemos usar llamadas o aplicarlo para operarlo con otros métodos de objetos.

La diferencia entre aplicar y llamar

Tanto para aplicar como para llamar, las funciones son exactamente las mismas, pero los métodos para aceptar parámetros son diferentes. Por ejemplo, hay una función definida de la siguiente manera:

 var func = function (arg1, arg2) {};

Puede llamarlo de la siguiente manera:

 FURC.CALL (this, arg1, arg2); func.apply (this, [arg1, arg2])

Cuando este es el contexto que desea especificar, puede ser cualquier objeto JavaScript (todo en JavaScript es un objeto), la llamada debe pasar los parámetros y aplicar medios para poner parámetros en la matriz.

En JavaScript, el número de parámetros de una función no se fija, por lo que si desea decir las condiciones aplicables, use la llamada cuando sus parámetros se conocen claramente.

Cuando no esté seguro, use Aplicar y luego presione el parámetro en la matriz y paselo. Cuando el número de parámetros es incierto, todos los parámetros también se pueden atravesar a través de la matriz de argumentos de pseudo dentro de la función.

Para consolidar y profundizar la memoria, los siguientes son algunos usos comunes:

Agradecer a las matrices

 var array1 = [12, "foo", {nombre "Joe"}, -2458]; var array2 = ["doe", 555, 100]; Array.prototype.push.apply (array1, array2); / * Array1 El valor es [12, "foo", {nombre "Joe"}, -2458, "Doe", 555, 100] */

Obtenga los valores máximos y mínimos en la matriz

 números var = [5, 458, 120, -215]; var maxinnumbers = math.max.apply (matemáticas, números), // 458maxinnumbers = math.max.call (math, 5, 458, 120, -215); // 458

El número en sí no tiene un método máximo, pero las matemáticas lo tienen, por lo que podemos usar su método con llamadas o aplicar.

Verifique si se trata de una matriz (siempre que el método toString () no haya sido reescrito)

 functionSArray (obj) {return object.prototype.ToString.call (obj) === '[Array de objetos]';}

Matriz de clase (pseudo) utilizando el método de matriz

 var domnodes = array.prototype.slice.call (document.getElementsBytagName ("*"));

Hay una estructura de objeto llamada pseudo-matriz en JavaScript. Lo que es más especial es el objeto de los argumentos, y también hay quienes llaman GetElementsByTagName, Document.ChildNodes, etc., que devuelven los objetos nodelistas, todos pertenecen a pseudo-matrices. No puede usar push, pop y otros métodos bajo matriz.

Pero podemos convertir array.prototype.slice.call en una matriz real con el objeto con el atributo de longitud, para que el dominio pueda aplicar todos los métodos en la matriz.

Comprender y usar profundamente aplicar y llamar

Tomemos prestada una pregunta de entrevista para comprender aplicar y llamar más profundamente.

Defina un método de registro para que pueda proxy del método console.log. La solución común es:

 función log (msg) {console.log (msg);} log (1); // 1Log (1,2); // 1

El método anterior puede resolver las necesidades más básicas, pero cuando el número de parámetros pasados es incierto, el método anterior fallará. En este momento, puede considerar usar aplicar o llamar. Tenga en cuenta que el número de parámetros pasados aquí es incierto, por lo que es mejor usarlo. El método es el siguiente:

 function log () {console.log.apply (console, argumentos);}; log (1); // 1Log (1,2); // 1 2

El siguiente requisito es agregar un abandono "(aplicación)" a cada mensaje de registro, como:

 log ("Hola mundo"); // (aplicación) Hola mundo

¿Cómo hacerlo con más elegancia? En este momento, debe pensar que el parámetro de argumentos es un pseudo-matriz, que se convierte en una matriz estándar a través de array.prototype.slice.call, y luego usa el método de matriz sin desplazar, así:

 función log () {var args = array.prototype.slice.call (argumentos); args.unshift ('(app)'); console.log.apply (console, args);};

Atar explicación detallada

Después de hablar de aplicar y llamar, hablemos de Bind. El método bind () es muy similar a aplicar y llamar, y también puede cambiar la señalización de esto en el cuerpo de la función.

La explicación de MDN es: el método bind () creará una nueva función, llamada función de enlace. Cuando se llama a esta función de enlace, la función de enlace utilizará el primer parámetro del método bind () cuando se crea como este, y el segundo parámetro del método bind () y los parámetros posteriores más los parámetros de la función de enlace de ejecución en sí mismo como los parámetros de la función original para llamar a la función original.

Echemos un vistazo a cómo usarlo. En el modo de monómero común, generalmente usamos _as, eso, yo, etc. para guardar esto para que podamos continuar haciendo referencia después de cambiar el contexto. Como esto:

 var foo = {bar: 1, eventBind: function () {var _this = this; $ ('. Someclass'). on ('click', function (event) {/ * actúa en el evento */console.log (_this.bar); // 1});}}

Debido al mecanismo específico de JavaScript, el entorno de contexto ha cambiado en eventbind: function () {} a $ ('. Someclass'). On ('Click', function (Event) {}). Los métodos anteriores para usar variables para guardar esto son útiles y no hay problema. Por supuesto, usar bind () puede resolver este problema de manera más elegante:

 var foo = {bar: 1, eventBind: function () {$ ('. someclass'). on ('click', function (event) {/ * actuar en el evento */console.log (this.bar); //1}.bind(this));}}}}}}

En el código anterior, bind () crea una función. Cuando se llama a este evento de clic, esta palabra clave se establecerá en el valor aprobado (aquí se refiere a los parámetros pasados en cuando se llama bind ()). Por lo tanto, aquí pasamos en el contexto deseado este (en realidad foo) en la función bind (). Luego, cuando se ejecuta la función de devolución de llamada, esto apunta al objeto FOO. Otro castaño simple:

 var bar = function () {console.log (this.x);} var foo = {x: 3} bar (); // UndefinedVar func = Bar.Bind (foo); func (); // 3

Aquí creamos una nueva función func. Al usar Bind () para crear una función de enlace, cuando se ejecuta, esto se establecerá en Foo, en lugar del alcance global como cuando llamamos a Bar ().

Hay una pregunta interesante. Si bind () es dos veces en una fila, o bind () es tres veces seguidas, ¿cuál es el valor de salida? Como esto:

 var bar = function () {console.log (this.x);} var foo = {x: 3} var sed = {x: 4} var func = bar.bind (foo) .bind (sed); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //?

La respuesta es que ambas veces aún emitirán 3 en lugar de los 4 y 5 esperados. La razón es que en JavaScript, múltiples veces bind () no es válida. Por una razón más profunda, la implementación de Bind () es equivalente a usar una función para envolver una llamada / aplicar internamente. El segundo enlace () es equivalente a envolver el primer enlace () nuevamente, por lo que el enlace después de la segunda vez no puede entrar en vigencia.

Aplicar, llamar a la comparación de enlaces

Entonces, ¿cuáles son las diferencias y diferencias entre aplicar, llamar y vincular? Cuándo usar aplicar, llamar y cuándo usar BIND. Una simple castaña:

 var obj = {x: 81,}; var foo = {getx: function () {return this.x;}} console.log (foo.getx.bind (obj) ()); //81console.log(foo.getx.call(obj)); //81console.log(foo.getx.apply(obj)); //81console.log(foo.getx.apply(obj)); //81console.log(foo.getx.apply(obj)); // 81

Las tres salidas son 81, pero preste atención al que usa el método Bind (), que tiene más soportes después.

Es decir, la diferencia es que cuando desea cambiar el contexto, no ejecutar de inmediato, sino devoluciones de llamada, use el método bind (). aplicar/llamar ejecuta la función inmediatamente.

Resumamos de nuevo:

• Aplicar, llamar, Bind se usan para cambiar la señalización de este objeto de la función;

• Los primeros parámetros de aplicar, llamar y vincular son los objetos que esto quiere señalar, es decir, el contexto que desea especificar;

• Aplicar, llamar y Bind puede usar todos los parámetros posteriores para pasar los parámetros;

• El enlace devuelve la función correspondiente, que es fácil de llamar más adelante; Aplicar y llamar se llaman de inmediato.

Lo anterior es el uso inteligente de aplicar, llamar y vincular en JavaScript introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!