Cómo escribir código JS de alta calidad (continuación)_habilidades de javascript
Continuando con el artículo anterior "Cómo escribir código JS de alta calidad", esta vez ordenaré los puntos de conocimiento de las funciones de JavaScript.
2. Usar funciones
Las funciones proporcionan a los programadores las principales funciones abstractas y mecanismos de implementación. Las funciones pueden implementar de forma independiente varias características diferentes en otros lenguajes, como procedimientos, métodos, constructores e incluso clases o módulos.
2.1 Comprender las diferencias entre llamadas a funciones, llamadas a métodos y llamadas a constructores
Para la programación orientada a objetos, funciones, métodos y constructores de clases son tres conceptos diferentes.
Modo de uso:
1, llamada a función
El código es el siguiente:
función hola(nombre de usuario){
devolver nombre de usuario "hola";
}
2, llamada al método
El código es el siguiente:
var obj = {
hola: función(){
return "hola, " this.username;
},
nombre de usuario: "floraLam"
};
ohj.hello(); //"hola, floraLam"
Esta variable está vinculada al objeto porque el método hello está definido en el objeto obj, también podemos asignar la misma referencia de función a otro objeto y obtener la misma respuesta.
El código es el siguiente:
var obj2 = {
hola: obj.hello(),
nombre de usuario: "floraLam "
};
3, uso del constructor
El código es el siguiente:
función Usuario(nombre, contraseñaHash){
this.name = nombre;
this.passwordHash = contraseñaHash;
}
Usar el nuevo operador para llamar al Usuario se considera un constructor.
El código es el siguiente:
var u = new User("floraLam", "123");
A diferencia de las llamadas a funciones y llamadas a métodos, la construcción La llamada a la función toma un objeto nuevo como el valor de esta variable e implícitamente devuelve este nuevo objeto como resultado de la llamada. La principal responsabilidad del constructor es inicializar el nuevo objeto.
2.2 Competencia en funciones de orden superior
Las funciones de orden superior no son más que aquellas funciones que toman funciones como parámetros o valores de retorno y toman funciones como parámetros (generalmente llamadas funciones de devolución de llamada). , porque la función de orden superior "luego la llama") es un modismo particularmente poderoso y expresivo que también se usa ampliamente en programas JavaScript.
Considere el método de clasificación estándar para matrices. Para trabajar con todas las matrices, el método de clasificación requiere que la persona que llama decida cómo comparar dos elementos cualesquiera en la matriz.
El código es el siguiente:
función compararNúmero(x, y){
if(x return -1;
}
if(x gt; y){
devuelve 1;
}
devuelve 0; }
.sort(compareNumbers); //
El código es el siguiente:
.sort(function(x, y){
if(x devuelve -1;
}
if(x gt; y){
devuelve 1;
}
return 0;
}); //
El ejemplo anterior utiliza una función anónima para simplificar aún más
Aprender a usar. Las funciones de orden superior a menudo pueden simplificar el código y hacerlo más fácil. Elimina el tedioso código repetitivo. Podemos usar un bucle para implementar una conversión simple de una matriz de cadenas:
El código es el siguiente:
var nombres = ;
var suma = add.apply(null, matriz); // 7
var statusObj = {estado: "ABCDEFG"};
Foo.prototype.pro_get_status = function(prefijo){
prefijo de retorno "-" this.status
}
var status = Foo.prototype.get_status.apply(statusObj); // "ABCDEFG"
var pro_status = Foo.prototype.get_status.apply(statusObj, ["prefijo"] // "prefijo -ABCDEFG"
Normalmente, la función o método recibe El receptor (el valor vinculado a la palabra clave especial this) está determinado por la sintaxis de la persona que llama. En particular, la sintaxis de llamada al método vincula el objeto de búsqueda del método a esta variable. Sin embargo, a veces es necesario utilizar una función de receptor personalizada. En este momento, debe utilizar el método de llamada o el método de vinculación para personalizar el receptor para llamar al método.
2.4 Utilice el método de vinculación para. extraer el método con un determinado receptor
Dado que el método y el valor son funciones, no hay diferencia en las propiedades, por lo que es fácil extraer los métodos del objeto y extraer la función como una función de devolución de llamada y pasarla directamente a la función de orden superior.
Pero también es fácil olvidar vincular el receptor de la función extraída al objeto del que se extrajo la función.
El código es el siguiente:
var buffer = {
entradas: [],
agregar: función(s){
this.entries.push(s);
}
}
var fuente = ["867", "-" , "5309 "];
source.forEach(butter.add); //error: las entradas no están definidas
En este momento, el destinatario de butter.add no es una mantequilla. objeto.
El receptor de la función depende de cómo se llama. El método forEach se llama en el ámbito global, por lo que la implementación del método forEach utiliza el objeto global como receptor predeterminado. Dado que no hay ningún atributo de entrada en el objeto global, esto. El código arroja Se produjo un error.
El método forEach permite a la persona que llama proporcionar un parámetro opcional como receptor de la función de devolución de llamada.
El código es el siguiente:
var source = ["867", "-", "5309"];
source.forEach(butter. add,butter );
Pero no todas las funciones de alto orden son lo suficientemente reflexivas como para proporcionar a los usuarios receptores de funciones de devolución de llamada.
Hay dos soluciones:
1) Crear una función contenedora que llame explícitamente a add como método de objeto de búfer. No importa cómo se llame a la función empaquetada, siempre se garantiza que insertará sus parámetros en la matriz de destino.
El código es el siguiente:
var source = ["867", "-", "5309"];
source.forEach(function( s){
butter.add(s);
});
2) El método de vinculación del objeto de función requiere un objeto receptor y genera un objeto receptor El método llamado por el método del objeto llama a la función contenedora de la función original.
El código es el siguiente:
var source = ["867", "-", "5309"];
source.forEach(butter. add.bind (buffer));
Observaciones
buffer.add.bind(buffer) crea una nueva función en lugar de modificar la función buffer.add:
buffer.add === buffer.add.bind(buffer); //falso