Explicación detallada del uso de aplicar y llamar en js

Prefacio

Llame y aplique ambos existentes para cambiar el contexto , es decir, el contexto, cuando se ejecuta una función. En otras palabras, es cambiar la dirección de esto dentro del cuerpo de la función .

La función de llamar y aplicar es exactamente la misma, pero la forma de aceptar parámetros es diferente.

Definición del método

aplicar

Function.apply(obj,args) puede recibir dos parámetros:

OBJ: este objeto reemplazará este objeto en la clase de funciones

Args: Esta es una matriz o una matriz de clase. El método de aplicación pasa los elementos en esta colección como parámetros a la función llamada.

llamar

El primer parámetro del método de llamada es el mismo que el método de aplicación , excepto que el segundo parámetro es una lista de parámetros

En el modo no rictamente, cuando nuestro primer parámetro se pasa como nulo o indefinido, esto en el cuerpo de la función apuntará al objeto de host predeterminado, y en el navegador es ventana

 var test = function () {console.log (this === Window);} test.apply (null); // trueTest.call (indefinido); // true

uso

Cómo "secuestrar" a los demás

En este momento, el método logName en Foo será referenciado por Bar, esto apunta a Bar

 var foo = {name: "mingming", logName: function () {console.log (this.name); }} var bar = {nombre: "xiaowang"}; foo.logname.call (bar); // xiaowang

Realizar la herencia

 function animal (nombre) {this.name = name; this.showname = function () {console.log (this.name); }} function Cat (nombre) {animal.call (this, name); } var cat = new Cat ("Cat negro"); cat.showname (); // gato negro

En el desarrollo real, esto a menudo se encuentra inadvertidamente que cambian escenarios.

Hay un método de diversión local. Cuando se llama a la diversión como una función normal, esta diversión interna apunta a la ventana , pero a menudo queremos que apunte al nodo #test , consulte el siguiente código:

 Window.id = "Window"; document.querySelector ('#test'). onClick = function () {console.log (this.id); // test var divertir = function () {console.log (this.id); } diversión (); // ventana}

Usando la llamada, aplicar, podemos resolver fácilmente este problema

 Window.id = "Window"; document.querySelector ('#test'). onClick = function () {console.log (this.id); // test var divertir = function () {console.log (this.id); } divertir.call (this); // test}

Por supuesto, puede hacer esto, pero en el modo Ecmascript 5 Strict , esto en este caso se ha especificado que no apuntará al objeto global, sino que no está definido:

 Window.id = "Window"; document.querySelector ('#test'). onClick = function () {var that = this; console.log (this.id); // test var fun = function () {console.log (that.id); } diversión (); // prueba}

 function func () {"use estrict" alerta (this); // Salida: Undefined} func ();

Otros usos

Matriz de clases

Aquí, los objetos que cumplen con las siguientes condiciones se llaman matrices de clase

1. Tener atributo de longitud

2. Almacene los datos de acuerdo con el índice

3. Empuje, pop y otros métodos que no tienen matrices

¡Las matrices comunes de clases incluyen argumentos y nodelista!

 (function () {array.prototype.push.call (argumentos, 4); console.log (argumentos); // [1, 2, 3, 4]}) (1,2,3)

De esta manera, empuja un 4 a los argumentos

Array.prototype.push puede implementar la combinación de dos matrices

El método Push no proporciona Push una matriz, pero proporciona Push (Param1, Param, ... Paramn) para que también pueda instalar y reemplazar la matriz aplicando, es decir:

 var arr1 = nueva matriz ("1", "2", "3"); var arr2 = new Array ("4", "5", "6"); Array.prototype.push.apply (arr1, arr2); console.log (arr1); // ["1", "2", "3", "4", "5", "6"]

También se puede entender de esta manera, ARR1 llama al método Push , y los parámetros se reemplazan aplicando el ensamblaje de la matriz en un conjunto de listas de parámetros.

Por ejemplo, quiero encontrar el valor máximo en la matriz de clases

 (function () {var maxnum = math.max.apply (null, argumentos); console.log (maxnum); // 56}) (34,2,56);

Juez Tipo

 console.log (objeto.prototype.tostring.call (123)) // [número de objeto] console.log (objeto.prototype.tostring.call ('123') // [objeto String] Console.log (objeto.prototype.ToString.call (invasado) // [Object Undefined] console.log (objeto.prototype.tostring.call (true)) // [object boolean] console.log (objeto.prototype.tostring.call ({})) // [objeto] console.log (objeto.prototype.tostring.call ([]) // [objeto Array] console.log (object.prototype.tostring.call (function () {})) // [función de objeto]

Lo anterior es el contenido completo del resumen del uso de aplicaciones y llamadas. Todos pueden dejar un mensaje para participar en la discusión. También espero que este artículo sea útil para todos en aprender JavaScript.