tolowercase - ¿Cómo y por qué funciona ''a''[''toUpperCase'']() en JavaScript?

touppercase javascript ejemplo

Question

JavaScript sigue sorprendiéndome y esta es otra instancia. Acabo de encontrar un código que no entendí al principio. Así que lo depuré y llegué a este hallazgo:

alert(''a''[''toUpperCase'']());  //alerts ''A''

Ahora esto debe ser obvio si toUpperCase() se define como un miembro del tipo de cadena, pero inicialmente no tenía sentido para mí.

De todas formas,

• ¿esto funciona porque toUpperCase es un miembro de ''a''? ¿O hay algo más detrás de las escenas?

• El code que estaba leyendo tiene una función de la siguiente manera:

  function callMethod(method) {
      return function (obj) {
          return obj[method](); //**how can I be sure method will always be a member of obj**
      }
  }
  
  var caps2 = map([''a'', ''b'', ''c''], callMethod(''toUpperCase'')); // [''A'',''B'',''C''] 
  // ignoring details of map() function which essentially calls methods on every 
  // element of the array and forms another array of result and returns it

  Es una función genérica llamar a CUALQUIER método en CUALQUIER objeto. ¿Pero eso significa que el método especificado ya será un miembro implícito del objeto especificado?

Estoy seguro de que me falta algo de comprensión seria del concepto básico de las funciones de JavaScript. Por favor ayúdame a entender esto.

Answer 1

¿Pero eso significa que el método especificado ya será un miembro implícito del objeto especificado?

No. Alguien podría pasar en un objeto que

1. no tiene una propiedad llamada toUpperCase ; o
2. tiene una propiedad llamada toUpperCase que no es una función

En el primer caso, se generará un error porque el acceso a una propiedad que no existe devuelve undefined , y no podemos invocar undefined como una función.

En el segundo caso, se producirá un error porque, de nuevo, no podemos invocar una función que no funciona.

Recuerde que JavaScript es un lenguaje muy vagamente escrito. Poco o ningún tipo de verificación de tipo ocurre a menos que sea necesario. El código que mostró funciona en ciertos casos porque, en esos casos, el objeto pasado tiene una propiedad llamada toUpperCase , que es una función.

El hecho de que no se garantice que el argumento obj tenga los tipos correctos de propiedades no molesta en absoluto a JavaScript, por así decirlo. Adopta una actitud de "esperar y ver", y no arroja un error hasta que se produce un problema real en el tiempo de ejecución.

Answer 2

Así en Javascript, los objects son objects . Es decir, son de esta naturaleza. Las propiedades de los objetos se pueden establecer usando cualquiera de estos: a.greeting = ''hello''; o a[''greeting''] = ''hello''; . Ambos modos funcionan.

La recuperación funciona igual. a.greeting (sin comillas) es ''hello'' , a[''greeting''] es ''hello'' . Excepción: si la propiedad es un número, solo funciona el método de corchete. El método de puntos no lo hace.

Así que ''a'' es un objeto con ''toUpperCase'' propiedad ''toUpperCase'' que en realidad es una función. Puede recuperar la función y llamarla posteriormente de cualquier manera: ''a''.toUpperCase() o ''a''[''toUpperCase'']() .

Pero imo la mejor manera de escribir la función de mapa sería como

var caps = [''a'',''b'',''c''].map( function(char) { return char.toUpperCase(); } )

¿Quién necesita la función callMethod entonces?

Answer 3

Básicamente, javascript trata todo como un Objeto, o más bien, cada objeto puede verse como un diccionario / matriz asociativa. Y las funciones / métodos se definen exactamente de la misma manera para el objeto, como una entrada en esta matriz asociativa.

Esencialmente, está haciendo referencia / llamando (observe el '' () '') la propiedad ''toUpperCase'', del objeto ''a'' (que es un tipo de cadena, en este caso).

Aquí hay un código de la parte superior de mi cabeza:

function myObject(){
    this.msg = "hey there! ;-)";
    this.woop = function(){
        alert(this.msg); //do whatever with member data
    }
}

var obj = new myObject();
alert( obj.msg );
alert( obj[''msg''] );
obj[''woop'']();

Answer 4

Cada objeto JavaScript es una tabla hash, por lo que puede acceder a sus miembros especificando una clave. por ejemplo, si una variable es una cadena, debe tener la función toUpperCase. Entonces, podrías invocarlo por

var str = "a"
str[''toUpperCase''](). // you get the method by its name as a key and invoke it.

así, por str en línea, podría tener a continuación

"a"["toUpperCase"]()

Answer 5

Casi todo en javascript puede ser tratado como un objeto. En su caso, el alfabeto mismo actúa como un objeto de cadena y toUpperCase puede invocarse como su método. Los corchetes son solo una forma alternativa de acceder a las propiedades de los objetos y dado que toUpperCase es un método, por lo que se necesita simplebracket () junto a [''toUpperCase''] formando [''toUpperCase'']()

''a''[''toUpperCase'']() es equivalente a ''a''.toUpperCase()

''a''[''toUpperCase'']() // returns A
''a''.toUpperCase() // returns A

Answer 6

Lo importante a tener en cuenta aquí es que, dado que Javascript es un lenguaje dynamic , cada objeto es, esencialmente, solo un hash-mapa glorificado ( con algunas excepciones ). Y se puede acceder a todo en un objeto Javascript de dos maneras: notación de corchetes y notación de puntos.

Repasaré rápidamente las dos anotaciones que responden a la primera parte de su pregunta y luego pasaré a la segunda parte.

Notación de corchete

Este modo es más similar a acceder a hashmaps y matrices en otros lenguajes de programación. Puede acceder a cualquier componente (datos (incluidos otros objetos) o función) utilizando esta sintaxis.

Esto es exactamente lo que estás haciendo en tu ejemplo. Tiene ''a'' , que es una cadena (y no un literal de carácter, como lo sería en un lenguaje como C ++).

Usando la notación de corchete, accede a su método toUpperCase . Pero acceder a él todavía no es suficiente; simplemente escribiendo alert , por ejemplo, en Javascript, no se llama el método. Es sólo una declaración simple. Para poder llamar a la función, debe agregar el paréntesis: alert() muestra un cuadro de diálogo simple que contiene undefined , ya que no recibió parámetros. Ahora podemos usar este conocimiento para descifrar su código, que se convierte en:

alert(''a''.toUpperCase());

Que es mucho más legible.

En realidad, una buena manera de entender esto un poco mejor es ejecutar el siguiente Javascript:

alert(alert)

Esto llama a la alert pasándole un objeto de función, también alert , sin ejecutar también la segunda alerta. Lo que se muestra (al menos en Chrome 26) es lo siguiente:

function alert() { [native code] } 

Vocación:

alert(alert())

muestra dos cuadros de mensaje consecutivos que contienen undefined . Esto es fácil de explicar: la alert() interna alert() se ejecuta primero, muestra undefined (porque no tenía ningún parámetro) y no devuelve nada. La alerta externa recibe el valor de retorno de la alerta interna, que no es nada, y también se muestra undefined en un cuadro de mensaje.

¡Prueba todos los casos en jsFiddle!

Notación de puntos

Este es el enfoque más estándar, que permite acceder a los miembros de un objeto mediante el operador punto ( . ). Así es como se vería tu código en notación de puntos:

alert(''a''.toUpperCase())

Mucho más legible. Entonces, ¿cuándo debemos usar la notación de puntos y cuándo debemos usar la notación de corchetes?

Comparación

La principal diferencia entre los dos métodos es la semántica. También hay algunos otros detalles, pero llegaré a esos en un segundo. Lo que es más importante es lo que realmente quieres hacer: una regla de oro es que usas la notación de puntos para los campos y métodos bien establecidos que tiene un objeto, y la notación de corchetes para cuando realmente estás usando tu objeto como un mapa hash .

Un gran ejemplo de por qué esta regla es tan importante se puede mostrar en su ejemplo, ya que el código está usando la notación de corchete en un lugar donde la notación de puntos hubiera sido mucho más sensata, hace que el código sea más difícil de leer. Y eso es algo malo, porque el código se lee muchas veces más de lo que está escrito .

En algunos casos, tiene que usar la notación de corchetes incluso si usar la notación de puntos fuera más sensible:

• si un miembro de un objeto tiene un nombre que contiene uno o más espacios o cualquier otro carácter especial, no puede usar la notación de puntos: el foo.some method() no funciona, pero foo["some method"]() sí ;

• si necesita acceder dinámicamente a los miembros de un objeto, también está bloqueado con la notación de corchetes;

Ejemplo:

for(var i = 0; i < 10; ++i) {
   foo["method" + i](); 
 }

La conclusión es que debe usar la sintaxis de corchete cuando use el objeto como un mapa hash ( foods["burger"].eat() ) y la sintaxis de puntos cuando trabaje con campos y métodos "actuales" ( enemy.kill() ) . Dado que Javascript es un lenguaje dinámico, la línea entre los campos y los métodos "reales" de un objeto y los "otros" datos almacenados dentro puede volverse bastante borrosa. Pero mientras no los mezcle de manera confusa, debería estar bien.

Ahora, en el resto de su pregunta (¡por fin!: P).

¿Cómo puedo estar seguro de que el método siempre será miembro de obj?

Usted no puede Intentalo. Trate de llamar a derp en una cadena. Obtendrá un error en las líneas de:

Uncaught TypeError: Object a has no method ''derp'' 

Es una función genérica llamar a CUALQUIER método en CUALQUIER objeto. ¿Pero eso significa que el método especificado ya será un miembro implícito del objeto especificado?

Sí, en tu caso tendría que ser. De lo contrario terminas con el error que mencioné anteriormente. Sin embargo, no tiene que usar return obj[method](); en la función callMethod() . Puede agregar su propia funcionalidad que luego se usa por la función de mapa. Aquí hay un método codificado que convierte todas las letras en una letra mayúscula:

function makeCap()
{
    return function(obj) {
        return obj.toUpperCase();
    }
}

var caps2 = map([''a'', ''b'', ''c''], makeCap()); // [''A'',''B'',''C''] 
console.log(caps2)

El código en el tutorial al que se vincula utiliza funciones parciales . Son un concepto complicado por sí mismos. Leer más sobre ese tema debería ayudar a aclarar las cosas más de lo que yo podría hacerlas.

Nota: este es el código de la función de mapa utilizada por el código en la pregunta, code .

function map(arr, iterator) {
  var narr = [];
  for (var i = 0; i < arr.length; i++) narr.push(iterator(arr[i], i));
  return narr;
}

Answer 7

Para descomponerlo.

• .toUpperCase() es un método de String.prototype
• ''a'' es un valor primitivo, pero se convierte en su representación de Objeto
• Tenemos dos notaciones posibles para acceder a propiedades / métodos de objetos, puntos y notación de corchetes

Asi que

''a''[''toUpperCase''];

es el acceso mediante notación de corchete en la propiedad toUpperCase , desde String.prototype . Como esta propiedad hace referencia a un método , podemos invocarla adjuntando ()

''a''[''toUpperCase'']();

Answer 8

Puede acceder a los miembros de cualquier objeto con la notación .propertyName o la notación ["propertyName"] . Esa es la característica del lenguaje JavaScript. Para asegurarse de que ese miembro esté en el objeto, simplemente verifique, si está definido:

function callMethod(method) {
    return function (obj) {
        if (typeof(obj[method]) == ''function'') //in that case, check if it is a function
           return obj[method](); //and then invoke it
    }
}

Answer 9

Si estás preguntando cómo funciona realmente, así es como lo leo. Ok, esta es una función matemática simple. Para entenderlo necesitas mirar la tabla de ascii. Que asigna un valor numérico a cada letra. Para convertirlo, el competidor simplemente usa una declaración lógica para hacerlo así, por ejemplo, si (ChcrValue> 80 && charValue <106) // Este es el conjunto de letras minúsculas y luego charValue = charValue - 38; // la distancia entre el conjunto inferior y el conjunto superior

es así de simple, no me molesté en buscar los valores correctos, sin embargo, esto básicamente está cambiando todas las letras minúsculas a mayúsculas.

Answer 10

toUpperCase es un método javascript estándar: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/toUpperCase

La razón por la que funciona como ''a''[''toUpperCase'']() es que la función toUpperCase es una propiedad del objeto de cadena ''a'' . Puede hacer referencia a las propiedades de un objeto utilizando object[property] o object.property . La sintaxis ''a''''toUpperCase'' indica que está haciendo referencia a la propiedad ''toUppercase'' del objeto de cadena ''a'', y luego lo llama ().

Answer 11

anyObject[''anyPropertyName''] es el mismo que anyObject.anyPropertyName cuando anyPropertyName no tiene caracteres problemáticos.

Ver Trabajar con objetos , desde la MDN.

El método toUpperCase se adjunta al tipo String. Cuando llamas a una función en un valor primitivo, aquí ''a'' , se promueve automáticamente a un objeto, aquí un String :

En contextos en los que se invoca un método en una cadena primitiva o se produce una búsqueda de propiedades, JavaScript ajustará automáticamente la cadena primitiva y llamará al método o realizará la búsqueda de propiedades.

Puede ver que la función existe al registrar String.prototype.toUpperCase .

Answer 12

foo.bar y foo[''bar''] son iguales, por lo que el código que publicaste es el mismo que

alert(''a''.toUpperCase())

Al usar foo[bar] (tenga en cuenta que no hay comillas), no usa la bar nombres literal bar sino el valor que contenga la bar variables. Entonces, usando la notación foo[] lugar de foo. le permite utilizar un nombre de propiedad dinámico.

Echemos un vistazo a callMethod :

En primer lugar, devuelve una función que toma obj como argumento. Cuando esa función se ejecuta, llamará al method en ese objeto. Por lo tanto, el método dado solo debe existir en el propio objeto o en algún lugar de su cadena de prototipos.

En el caso de toUpperCase ese método proviene de String.prototype.toUpperCase ; sería bastante estúpido tener una copia separada del método para cada cadena que exista.