Este artículo presenta los métodos y principios de varias llamadas de funciones en JavaScript en detalle, ¡lo cual es de gran ayuda para comprender las funciones de JavaScript!
JavaScript, 5 formas de llamar a las funciones
Una y otra vez, descubrí que el código JavaScript libre de errores es causado por no comprender realmente cómo funcionan las funciones de JavaScript (por cierto, mucho de ese código es escrito por mí). JavaScript tiene la naturaleza de la programación funcional, que se convertirá en una barrera para nuestro progreso cuando elegimos enfrentarlo.
Como principiantes, probemos cinco llamadas de funciones. Desde la superficie pensaremos que esas funciones son muy similares a las de C#, pero podemos ver que todavía hay diferencias muy importantes en el futuro. Ignorar estas diferencias, sin duda, conducirá a errores difíciles de seguir. Primero creemos una función simple, que se utilizará a continuación, y esta función solo devuelve el valor actual de este y los dos parámetros proporcionados.
La copia del código es la siguiente:
<script type = "text/javaScript">
función makearray (arg1, arg2) {
regresar [esto, arg1, arg2];
}
</script>
El método más utilizado, pero desafortunadamente, las llamadas de función global
Cuando aprendemos JavaScript, aprendemos cómo definir funciones usando la sintaxis en el ejemplo anterior.
, También sabemos que llamar a esta función es muy simple, y todo lo que necesitamos hacer es:
La copia del código es la siguiente:
makearray ('uno', 'dos');
// => [ventana, 'uno', 'dos']
Espera un minuto. ¿Qué es esa ventana?
alerta (typeof window.methodthatdoesntexist);
// => indefinido
alerta (typeof Window.makearray);
// =>
Window.makearray ('one', 'dos');
// => [ventana, 'uno', 'dos']
Digo que el método de llamadas más común es desafortunado porque causa que la función que declaramos es global de forma predeterminada. Todos sabemos que los miembros globales no son una mejor práctica para la programación. Esto es particularmente correcto en JavaScript. No se arrepentirá de evitar a los miembros globales en JavaScript.
JavaScript Función Llamar a la regla 1
En las funciones que no se llaman directamente por objetos de propietario explícitos, como myFunction (), hará que este valor se convierta en el objeto predeterminado (ventana en el navegador).
Llamadas de funciones
Creemos un objeto simple ahora, use la función Makearray como su método. Usaremos el método JSON para declarar un objeto, y también llamaremos a este método
La copia del código es la siguiente:
// Creando el objeto
var arraymaker = {
SomeProperty: 'algún valor aquí',
hacer: makearray
};
// Invocar el método Make ()
arraymaker.make ('one', 'dos');
// => [Arraymaker, 'One', 'Two']
// Sintaxis alternativa, usando soportes cuadrados
Arraymaker ['make'] ('one', 'dos');
// => [Arraymaker, 'One', 'Two']
Vea la diferencia aquí, este valor se convierte en el objeto en sí. Puede preguntarse por qué la definición de función original no ha cambiado, por qué no es una ventana. Bueno, así es como se pasan las funciones en Jsavar. Las funciones son un tipo de datos estándar en JavaScript, o para ser precisos, un objeto. Puede pasarlos o copiarlos. Es como si toda la función y la lista de parámetros y el cuerpo de la función se copiaran y asignen a la propiedad de la propiedad en el Maker de ArrayMaker, por lo que es como definir un Maker ArrayMaker como este:
La copia del código es la siguiente:
var arraymaker = {
SomeProperty: 'algún valor aquí',
Make: function (arg1, arg2) {
regresar [esto, arg1, arg2];
}
};
JavaScript Función Llamar Regla 2
En un método, la sintaxis de llamada, como obj.myfunction () u obj ['myfunction'] (), el valor de esto es obj
Esta es la principal fuente de errores en el código de manejo de eventos. Echa un vistazo a estos ejemplos
La copia del código es la siguiente:
<input type = "botón" value = "botón 1" id = "btn1" />
<input type = "botón" value = "botón 2" id = "btn2" />
<input type = "button" value = "button 3" id = "btn3" onClick = "ButtonClicked ();"/>
<script type = "text/javaScript">
función buttonclicked () {
Var text = (this === Ventana)? 'Window': this.id;
alerta (texto);
}
var button1 = document.getElementById ('btn1');
var button2 = document.getElementById ('btn2');
botón1.OnClick = ButtonClicked;
button2.onclick = function () {ButtonClicked (); };
</script>
Al hacer clic en el primer botón, se mostrará "BTN" porque es una llamada de método, este es el objeto al que pertenece (elemento del botón). Al hacer clic en el segundo botón, mostrará "ventana" porque Buttonclicked se llama directamente (a diferencia de OBJ.ButtonClicked ().) Esto es lo mismo que nuestro tercer botón, que coloca la función de manejo de eventos directamente en la etiqueta. Entonces, el resultado de hacer clic en el tercer botón es el mismo que el segundo.
Usar la biblioteca JS como jQuery tiene la ventaja. Cuando se define un controlador de eventos en jQuery, la biblioteca JS ayudará a anular este valor para asegurarse de que contenga referencias al elemento de origen del evento actual.
La copia del código es la siguiente:
// usa jQuery
$ ('#btn1'). Click (function () {
alerta (this.id); // jQuery asegura que 'esto' será el botón
});
¿Cómo sobrecarga JQuery el valor de esto? Continuar leyendo
Los otros dos: aplicar () y llamar ()
Cuanto más use las funciones de JavaScript, más encontrará que necesitará aprobar funciones y llamarlas en diferentes contextos. Al igual que Qjuery en las funciones de manejo de eventos, a menudo necesita restablecer este valor. Recuerde lo que le dije, en las funciones de JavaScript también son objetos. Los objetos de función contienen algunos métodos predefinidos, dos de los cuales se aplican () y call (), que podemos usar para restablecer esto.
La copia del código es la siguiente:
var gasguzzler = {año: 2008, modelo: 'Dodge Bailout'};
makearray.apply (Gasgizzler, ['one', 'dos']);
// => [Gasguzzler, 'One', 'Two']
makearray.call (Gasgizzler, 'one', 'dos');
// => [Gasguzzler, 'One', 'Two']
Estos dos métodos son similares, la diferencia es la diferencia en los siguientes parámetros. Function.apply () usa una matriz para pasar a la función, mientras que la función.call () pasa estos parámetros de forma independiente. En la práctica, encontrará que aplicar () es más conveniente en la mayoría de los casos.
JSAVARScript Función Llamar Regla 3
Si queremos sobrecargar el valor de esto sin copiar la función a un método, podemos usar myfunction.apply (obj) o myfunction.call (obj).
Constructor
No quiero profundizar en la definición de tipos en JavaScript, pero en este momento necesitamos saber que no hay clase en JavaScript, y cualquier tipo personalizado requiere una función de inicialización. También es una buena idea definir su tipo utilizando un objeto prototipo (como propiedad de la función de inicialización). Creemos un tipo simple
La copia del código es la siguiente:
// declarar un constructor
function arraymaker (arg1, arg2) {
this.someproperty = 'lo que sea';
this.TheTray = [this, arg1, arg2];
}
// declarar el método de instanciación
Arraymaker.prototype = {
somemethod: function () {
alerta ('Somemethod llamado');
},
getArray: function () {
Devuelve esto.
}
};
var am = new Arraymaker ('uno', 'dos');
var otro = new Arraymaker ('primero', 'segundo');
am.getArray ();
// => [am, 'uno', 'dos']
Uno muy importante y notable es el nuevo operador que aparece frente a una llamada de función. Sin eso, su función es como una función global, y las propiedades que creamos se crearán en un objeto global (ventana), y no desea hacerlo. Otro tema es que debido a que no hay valor de retorno en su constructor, si olvida usar el nuevo operador, algunas de sus variables se asignarán indefinidas. Por esta razón, es un buen hábito comenzar con mayúsculas. Esto se puede usar como un recordatorio para no olvidar el nuevo operador anterior al llamar.
Con tal precaución, el código en la función de inicialización es similar a la función de inicialización que escribió en otros idiomas. El valor de esto será el objeto que creará.
JavaScript Función Llamar Regla 4
Cuando usa una función como una función de inicialización, como myFunction (), JavaScript Runtime especificará el valor de esto como un objeto recién creado.
Espero que comprender las diferencias en los diversos métodos de llamadas de funciones mantenga su código SJavaScript alejado de los errores, y algunos de estos errores se asegurarán de que siempre sepa que el valor de este es el primer paso para evitarlos.