diff options
Diffstat (limited to 'files/es/web/javascript/reference/functions')
10 files changed, 2686 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/functions/arguments/callee/index.html b/files/es/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..0a68b739f3 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,49 @@ +--- +title: callee +slug: Web/JavaScript/Reference/Functions/arguments/callee +tags: + - JavaScript + - JavaScript Reference + - Referencia +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +original_slug: Web/JavaScript/Referencia/Funciones/arguments/callee +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Especifica la función que se está ejecutando actualmente.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>callee</code> es una propiedad de la variable local <code>arguments</code> disponible dentro de todos los objetos function; <code>callee</code> como una propiedad de {{jsxref("Funciones/arguments", "Function.arguments")}} ya no se utiliza. (<code>Function.arguments</code> en sí mismo está también desaconsejado.)</p> + +<p><code>arguments.callee</code> permite a funciones anónimas referirse a ellas mismas, lo cual es necesario en funciones anónimas recursivas.</p> + +<p>La palabra clave <code>this</code> no se refiere a la función que se ejecuta actualmente. Use la propiedad <code>callee</code> para referirse a la función dentro del cuerpo de la función.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_arguments.callee_en_funciones_an.C3.B3nimas_recursivas" name="Ejemplo:_Usando_arguments.callee_en_funciones_an.C3.B3nimas_recursivas">Ejemplo: Usando <code>arguments.callee</code> en funciones anónimas recursivas</h3> + +<p>Una función recursiva debe ser capaz de referirse a sí misma. Típicamente, una función se refiere a sí misma por su nombre. Sin embargo, una función anónima no tiene nombre y por tanto es una variable de referencia para ella, es decir, si la función no está asignada a ninguna variable, la función no puede referirse a sí misma. (Se pueden crear funciones anónimas mediante una expresión {{jsxref("Operadores/function", "function")}} o el constructor {{jsxref("Function")}}.) Aquí es donde entra <code>arguments.callee</code>.</p> + +<p>El siguiente ejemplo define una función, la cuál, en cada turno, define y devuelve una función factorial.</p> + +<pre class="brush: js">function makeFactorialFunc() { + alert('making a factorial function!'); + return function(x) { + if (x <= 1) + return 1; + return x * arguments.callee(x - 1); + }; +} + +var result = makeFactorialFunc()(5); // returns 120 (5 * 4 * 3 * 2 * 1) +</pre> + +<p><span class="comment">this example isn't very practical, but then again, there are few practical cases where arguments.callee is necessary, and most of the those cases involve closures</span></p> + +<p> </p> diff --git a/files/es/web/javascript/reference/functions/arguments/index.html b/files/es/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..2540bbdaa3 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,230 @@ +--- +title: El objeto arguments +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Funciones + - JavaScript + - Namespace + - argumentos + - arguments + - espacio de nombres + - multiples +translation_of: Web/JavaScript/Reference/Functions/arguments +original_slug: Web/JavaScript/Referencia/Funciones/arguments +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p><strong><code>arguments</code></strong> es un objeto similar a <code>Array</code> accesible dentro de <a href="/es/docs/Web/JavaScript/Guide/Functions">funciones</a> que contiene los valores de los argumentos pasados a esa función.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div> + +<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> + +<h2 id="Descripción">Descripción</h2> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: "similar a Array" significa que <code>arguments</code> tiene una propiedad {{jsxref("Functions/arguments/length", "lenght")}} y propiedades indexadas desde cero, pero no tiene métodos integrados de {{jsxref("Array")}} como {{jsxref("Array.forEach", "forEach()")}} o {{jsxref("Array.map", "map()")}}. Ve la <a href="#Descripción">§Descripción</a> para obtener más detalles.</p> +</div> + +<p>El objeto <code>arguments</code> es una variable local disponible en todas las funciones que no son {{jsxref("Functions/Arrow_functions", "funciones flecha")}}. Puedes hacer referencia a los argumentos de una función dentro de esa función utilizando su objeto <code>arguments</code>. Tiene entradas para cada argumento con el que se llamó a la función, con el índice de la primera entrada en <code>0</code>.</p> + +<p>Por ejemplo, si a una función se le pasan 3 argumentos, puedes acceder a ellos de la siguiente manera:</p> + +<pre class="brush: js notranslate">arguments[0] // primer argumento +arguments[1] // segundo argumento +arguments[2] // tercer argumento +</pre> + +<p>También puedes establecer o reasignar cada argumento:</p> + +<pre class="brush: js notranslate">arguments[1] = 'new value'; +</pre> + +<p>El objeto <code>arguments</code> no es un {{jsxref("Array")}}. Es similar, pero carece de todas las propiedades de <code>Array</code> excepto de {{jsxref("Array.length", "length")}}. Por ejemplo, no tiene el método {{jsxref("Array.pop", "pop()")}}.</p> + +<p>Sin embargo, se puede convertir en un <code>Array</code> real:</p> + +<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments); +// El uso de un arreglo literal es más corto que el anterior pero asigna un arreglo vacío +var args = [].slice.call(arguments); +</pre> + +<p>Así como puedes hacer con cualquier objeto tipo <code>Array</code>, puedes usar el método {{jsxref("Array.from()")}} de ES2015 o la {{jsxref("Operators/Spread_syntax", "propagación de sintaxis")}} para convertir <code>arguments</code> en un arreglo real:</p> + +<pre class="brush: js notranslate">let args = Array.from(arguments); +// o +let args = [...arguments]; +</pre> + +<p>El objeto <code>arguments</code> es útil para funciones llamadas con más argumentos de los que declara aceptar formalmente. Esta técnica es útil para funciones a las que se les puede pasar un número variable de argumentos, como {{jsxref("Math.min()")}}. Esta función de ejemplo acepta cualquier número de argumentos de cadena y devuelve la más larga:</p> + +<pre class="brush: js notranslate">function longestString() { + var longest = ''; + for (var i=0; i < arguments.length; i++) { + if (arguments[i].length > longest.length) { + longest = arguments[i]; + } + } + return longest; +} +</pre> + +<p>Puedes usar {{jsxref("Functions/arguments/lenght", "arguments.length")}} para contar con cuántos argumentos se llamó a la función. Si, en cambio, deseas contar cuántos parámetros se declara que acepta una función, inspecciona la propiedad {{jsxref("Function.length", "length")}} de esa función.</p> + +<h3 id="Usar_typeof_con_arguments">Usar <code>typeof</code> con <code>arguments</code></h3> + +<p>El operador {{jsxref("Operators/typeof", "typeof")}} devuelve <code>'object'</code> cuando se usa con <code>arguments</code></p> + +<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' </pre> + +<p>El tipo de argumentos individuales se puede determinar indexando <code>arguments</code>:</p> + +<pre class="notranslate">console.log(typeof arguments[0]); // devuelve el tipo del primer argumento</pre> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Functions/arguments/callee", "arguments.callee")}}</dt> + <dd>Referencia a la función en ejecución a la que pertenecen los argumentos. Prohibida en modo estricto.</dd> + <dt>{{jsxref("Functions/arguments/length", "arguments.length")}}</dt> + <dd>El número de argumentos que se pasaron a la función.</dd> + <dt>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}</dt> + <dd>Devuelve un nuevo objeto {{jsxref("Array/@@iterator", "Array iterator", "", 0)}} que contiene los valores de cada índice en <code>arguments</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Definición_de_una_función_que_concatena_varias_cadenas">Definición de una función que concatena varias cadenas</h3> + +<p>Este ejemplo define una función que concatena varias cadenas. El único argumento formal de la función es una cadena que contiene los caracteres que separan los elementos a concatenar.</p> + +<pre class="brush:js notranslate">function myConcat(separator) { + let args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>Puedes pasar tantos argumentos como desees a esta función. Devuelve una lista de cadenas usando cada argumento en la lista:</p> + +<pre class="brush:js notranslate">// returns "red, orange, blue" +myConcat(', ', 'red', 'orange', 'blue'); + +// devuelve "elephant; giraffe; lion; cheetah" +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// devuelve "sage. basil. oregano. pepper. parsley" +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> + +<h3 id="Definición_de_una_función_que_crea_listas_HTML">Definición de una función que crea listas HTML</h3> + +<p>Este ejemplo define una función que crea una cadena que contiene HTML para una lista. El único argumento formal para la función es una cadena que es "<code>u</code>" si la lista debe estar {{htmlelement("ul", "desordenada (con viñetas)")}}, u "<code>o</code>" si la lista es {{htmlelement("ol", "ordenada (numerada)")}}. La función se define de la siguiente manera:</p> + +<pre class="brush:js notranslate">function list(type) { + var html = '<' + type + 'l><li>'; + var args = Array.prototype.slice.call(arguments, 1); + html += args.join('</li><li>'); + html += '</li></' + type + 'l>'; // fin de la lista + return html; +}</pre> + +<p>Puedes pasar cualquier número de argumentos a esta función y agregar cada argumento como un elemento de lista a una lista del tipo indicado. Por ejemplo:</p> + +<pre class="brush:js notranslate">let listHTML = list('u', 'One', 'Two', 'Three'); + +/* la listHTML es: +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" +*/</pre> + +<h3 id="Parámetros_rest_predeterminados_y_desestructurados">Parámetros <code>rest</code>, predeterminados y desestructurados</h3> + +<div> +<p>El objeto <code>arguments</code> se puede utilizar junto con parámetros {{jsxref("Functions/rest_parameters", "rest")}}, {{jsxref("Functions/Default_parameters", "predeterminados")}} y {{jsxref("Operators/Destructuring_assignment", "desestructurados")}}.</p> +</div> + +<pre class="brush: js notranslate">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Si bien la presencia de parámetros <code>rest</code>, predeterminados o desestructurados no altera <a href="/es/docs/Web/JavaScript/Reference/Strict_mode#Haciendo_eval_y_arguments_más_simples">el comportamiento del objeto <code>arguments</code> en el código de modo estricto</a>, existen sutiles diferencias para el código no estricto.</p> + +<p>En el código de modo estricto, el objeto <code>arguments</code> se comporta de la misma manera independientemente de que se pasen parámetros <code>rest</code>, predeterminados o desestructurados a una función. Es decir, asignar nuevos valores a las variables en el cuerpo de la función no afectará al objeto <code>arguments</code>. La asignación de nuevas variables al objeto <code>arguments</code> tampoco afectará el valor de las variables.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: No puedes escribir una directiva <code>"use strict";</code> en el cuerpo de una definición de función que acepte parámetros <code>rest</code>, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.</p> +</div> + +<p>Las funciones no estrictas a las que se les pasan solo parámetros simples (es decir, no parámetros <code>rest</code>, predeterminados o desestructurados) sincronizarán el valor de los nuevos valores de las variables en el cuerpo de la función con el objeto <code>arguments</code>, y viceversa:</p> + +<pre class="brush: js notranslate">function func(a) { + arguments[0] = 99; // actualiza arguments[0] además actualiza a + console.log(a); +} +func(10); // 99 +</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">function func(a) { + a = 99; // la actualización también actualiza arguments[0] + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>Por el contrario, las funciones no estrictas a las que <strong>se les pasan</strong> parámetros <code>rest</code>, predeterminados o desestructurados <strong>no</strong> sincronizarán los nuevos valores asignados a las variables de los argumentos en el cuerpo de la función con el objeto <code>arguments</code>. En cambio, el objeto <code>arguments</code> en funciones no estrictas con parámetros complejos <strong>siempre</strong> reflejarán los valores pasados a la función cuando se invocó (este es el mismo comportamiento exhibido por todas las funciones en modo estricto, independientemente del tipo de variables que se le pasen):</p> + +<pre class="brush: js notranslate">function func(a = 55) { + arguments[0] = 99; // actualizar arguments[0] tampoco actualiza a + console.log(a); +} +func(10); // 10</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">function func(a = 55) { + a = 99; // actualizar a tampoco actualiza arguments[0] + console.log(arguments[0]); +} +func(10); // 10 +</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">// Un parámetro predeterminado sin seguimiento +function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Objectos arguments exóticos')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Function", "Función")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Parámetros resto")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/functions/arguments/length/index.html b/files/es/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..aaf1375447 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,132 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +tags: + - Funciones + - JavaScript + - Propiedades + - argumentos +translation_of: Web/JavaScript/Reference/Functions/arguments/length +original_slug: Web/JavaScript/Referencia/Funciones/arguments/length +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La propiedad <strong><code>arguments.length</code></strong> contiene el número de argumentos pasados a una función.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">arguments.length</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad arguments.length devuelve el número total de argumentos pasados a una función. Esto puede ser más o menos que el número de parametros definidos. (Véase {{jsxref("Function.length")}}).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_arguments.length">Usando <code>arguments.length</code></h3> + +<p>En este ejemplo definimos una función que puede sumar dos o más números.</p> + +<pre class="brush: js">function adder(base /*, n2, ... */) { + base = Number(base); + for (var i = 1; i < arguments.length; i++) { + base += Number(arguments[i]); + } + return base; +} +</pre> + +<div class="note"> +<p>Tenga en cuenta la diferencia entre {{jsxref("Function.length")}} y arguments.length</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Function.length")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/functions/arrow_functions/index.html b/files/es/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..a4f7f4427c --- /dev/null +++ b/files/es/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,531 @@ +--- +title: Funciones Flecha +slug: Web/JavaScript/Reference/Functions/Arrow_functions +tags: + - ECMAScript6 + - Intermedio + - JavaScript + - Referencia + - función +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +original_slug: Web/JavaScript/Referencia/Funciones/Arrow_functions +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p>Una <strong>expresión de función flecha</strong> es una alternativa compacta a una {{JSxRef("Operadores/function", "expresión de función")}} tradicional, pero es limitada y no se puede utilizar en todas las situaciones.</p> + +<p><strong>Diferencias y limitaciones:</strong></p> + +<ul> + <li>No tiene sus propios enlaces a {{JSxRef("Operadores/this", "this")}} o {{JSxRef("Operadores/super", "super")}} y no se debe usar como {{Glossary("Method", "métodos")}}.</li> + <li>No tiene {{JSxRef("Funciones/arguments", "argumentos")}} o palabras clave {{JSxRef("../Operadores/new.target", "new.target")}}.</li> + <li>No apta para los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}}, que generalmente se basan en establecer un {{Glossary("Scope", "ámbito o alcance")}}</li> + <li>No se puede utilizar como {{Glossary("constructor", "constructor")}}.</li> + <li>No se puede utilizar {{JSxRef("Operadores/yield", "yield")}} dentro de su cuerpo.</li> +</ul> + +<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> + +<h3 id="Comparación_de_funciones_tradicionales_con_funciones_flecha">Comparación de funciones tradicionales con funciones flecha</h3> + +<p>Observa, paso a paso, la descomposición de una "función tradicional" hasta la "función flecha" más simple:<br> + <strong>Nota</strong>: Cada paso a lo largo del camino es una "función flecha" válida</p> + +<pre class="brush: js notranslate">// Función tradicional +function (a){ + return a + 100; +} + +// Desglose de la función flecha + +// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura. +(a) => { + return a + 100; +} + +// 2. Quita los corchetes del cuerpo y la palabra "return" — el return está implícito. +(a) => a + 100; + +// 3. Suprime los paréntesis de los argumentos +a => a + 100;</pre> + +<div class="blockIndicator note"> +<p>Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.</p> +</div> + +<p>Por ejemplo, si tienes <strong>varios argumentos</strong> o <strong>ningún argumento</strong>, deberás volver a introducir paréntesis alrededor de los argumentos:</p> + +<pre class="brush: js notranslate">// Función tradicional +function (a, b){ + return a + b + 100; +} + +// Función flecha +(a, b) => a + b + 100; + +// Función tradicional (sin argumentos) +let a = 4; +let b = 2; +function (){ + return a + b + 100; +} + +// Función flecha (sin argumentos) +let a = 4; +let b = 2; +() => a + b + 100;</pre> + +<p>Del mismo modo, si el cuerpo requiere <strong>líneas de procesamiento adicionales</strong>, deberás volver a introducir los corchetes <strong>Más el "return"</strong> (las funciones flecha no adivinan mágicamente qué o cuándo quieres "volver"):</p> + +<pre class="brush: js notranslate">// Función tradicional +function (a, b){ + let chuck = 42; + return a + b + chuck; +} + +// Función flecha +(a, b) => { + let chuck = 42; + return a + b + chuck; +}</pre> + +<div>Y finalmente, en las <strong>funciones con nombre</strong> tratamos las expresiones de flecha como variables</div> + +<div> +<pre class="brush: js notranslate">// Función tradicional +function bob (a){ + return a + 100; +} + +// Función flecha +let bob = a => a + 100;</pre> +</div> + +<div></div> + +<div></div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Sintaxis_básica">Sintaxis básica</h3> + +<p class="syntaxbox notranslate">Un parámetro. Con una expresión simple no se necesita <code>return</code>:</p> + +<pre class="brush: js notranslate">param => expression</pre> + +<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Con una expresión simple no se necesita <code>return</code>:</p> + +<pre class="brush: js notranslate">(param1, paramN) => expression</pre> + +<p class="syntaxbox notranslate">Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p> + +<pre class="brush: js notranslate">param => { + let a = 1; + return a + b; +}</pre> + +<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p> + +<pre class="brush: js notranslate">(param1, paramN) => { + let a = 1; + return a + b; +}</pre> + +<h3 id="Sintaxis_avanzada">Sintaxis avanzada</h3> + +<p class="syntaxbox notranslate">Para devolver una expresión de objeto literal, se requieren paréntesis alrededor de la expresión:</p> + +<pre class="brush: js notranslate">params => ({foo: "a"}) // devuelve el objeto {foo: "a"}</pre> + +<p class="syntaxbox notranslate">Los {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} son compatibles:</p> + +<pre class="brush: js notranslate">(a, b, ...r) => expression</pre> + +<p class="syntaxbox notranslate">Se admiten los {{JSxRef("Funciones/Parametros_por_defecto", "parámetros predeterminados")}}:</p> + +<pre class="brush: js notranslate">(a=400, b=20, c) => expression</pre> + +<p class="brush: js">{{JSxRef("Operadores/Destructuring_assignment", "Desestructuración")}} dentro de los parámetros admitidos:</p> + +<pre class="brush: js notranslate">([a, b] = [10, 20]) => a + b; // el resultado es 30 +({ a, b } = { a: 10, b: 20 }) => a + b; // resultado es 30 +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Consulta también <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a>.</p> + +<h3 id="this_y_funciones_flecha">"<code>this</code>" y funciones flecha</h3> + +<p class="brush: js notranslate">Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del ámbito ({{JSxRef("Operadores/this", "this")}}) y hacer que la ejecución de funciones sea mucho más intuitiva.</p> + +<div class="blockIndicator note"> +<p class="brush: js notranslate">Si <code>this</code> es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona <code>this</code>. Para resumir, <code>this</code> se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave <code>new</code>. De lo contrario, <code>this</code> se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.</p> +</div> + +<p class="brush: js notranslate">En las <strong>funciones tradicionales</strong> de manera predeterminada <code>this</code> está en el ámbito de <code>window</code>:</p> + +<ul> +</ul> + +<pre class="brush: js notranslate">window.age = 10; // <-- ¿me notas? +function Person() { + this.age = 42; // <-- ¿me notas? + setTimeout(function () {// <-- La función tradicional se está ejecutando en el ámbito de window + console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window + }, 100); +} + +var p = new Person(); + +</pre> + +<p>Las <strong>funciones flecha</strong> <strong>no</strong> predeterminan <code>this</code> al {{Glossary("Scope", "ámbito o alcance")}} de <code>window</code>, más bien se ejecutan en el {{Glossary("Scope", "ámbito o alcance")}} en que se crean:</p> + +<pre class="brush: js notranslate">window.age = 10; // <-- ¿me notas? +function Person() { + this.age = 42; // <-- ¿me notas? + setTimeout(() => {// <-- Función flecha ejecutándose en el ámbito de "p" (una instancia de Person) + console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person + }, 100); +} + +var p = new Person(); + +</pre> + +<p>En el ejemplo anterior, la función flecha no tiene su propio <code>this</code>. Se utiliza el valor <code>this</code> del {{Glossary("Scope", "ámbito")}} léxico adjunto; las funciones flecha siguen las reglas normales de búsqueda de variables. Entonces, mientras busca <code>this</code> que no está presente en el {{Glossary("Scope", "ámbito")}} actual, una función flecha termina encontrando el <code>this</code> de su {{Glossary("Scope", "ámbito")}} adjunto.</p> + +<p><strong>Relación con el modo estricto</strong></p> + +<p>Dado que <code>this</code> proviene del contexto léxico circundante, en el {{JSxRef("Modo_estricto", "modo estricto")}} se ignoran las reglas con respecto a <code>this</code>.</p> + +<pre class="brush: js notranslate">var f = () => { + 'use strict'; + return this; +}; + +f() === window; // o el objeto global</pre> + +<p>Todas las demás reglas del {{JSxRef("Modo_estricto", "modo estricto")}} se aplican normalmente.</p> + +<div class="blockIndicator warning"> +<p><strong>Nota</strong>: Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.</p> +</div> + +<h3 id="Funciones_flecha_utilizadas_como_métodos">Funciones flecha utilizadas como métodos</h3> + +<p>Como se indicó anteriormente, las expresiones de función flecha son más adecuadas para funciones que no son métodos. Observa qué sucede cuando intentas usarlas como métodos:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { // no crea un nuevo ámbito + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} + +obj.b(); // imprime indefinido, Window {...} (o el objeto global) +obj.c(); // imprime 10, Object {...}</pre> + +<p>Las funciones flecha no tienen su propio <code>this</code>. Otro ejemplo que involucra {{JSxRef("Object.defineProperty()")}}:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // indefinida 'undefined' Window {...} (o el objeto global) + return this.a + 10; // representa el objeto global 'Window', por lo tanto 'this.a' devuelve 'undefined' + } +}); +</pre> + +<h3 id="call_apply_y_bind"><code>call</code>, <code>apply</code> y <code>bind</code></h3> + +<p>Los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} <strong>NO son adecuados</strong> para las funciones flecha, ya que fueron diseñados para permitir que los métodos se ejecuten dentro de diferentes ámbitos, porque <strong>las funciones flecha establecen "<code>this</code>" según el ámbito dentro del cual se define la función flecha.</strong></p> + +<p>Por ejemplo, {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} funcionan como se esperaba con las funciones tradicionales, porque establecen el ámbito para cada uno de los métodos:</p> + +<pre class="brush: js notranslate">// ---------------------- +// Ejemplo tradicional +// ---------------------- +// Un objeto simplista con su propio "this". +var obj = { + num: 100 +} + +// Establece "num" en window para mostrar cómo NO se usa. +window.num = 2020; // ¡Ay! + +// Una función tradicional simple para operar en "this" +var add = function (a, b, c) { + return this.num + a + b + c; +} + +// call +var result = add.call(obj, 1, 2, 3) // establece el ámbito como "obj" +console.log(result) // resultado 106 + +// apply +const arr = [1, 2, 3] +var result = add.apply(obj, arr) // establece el ámbito como "obj" +console.log(result) // resultado 106 + +// bind +var result = add.bind(obj) // estable el ámbito como "obj" +console.log(result(1, 2, 3)) // resultado 106</pre> + +<p>Con las funciones flecha, dado que la función <code>add</code> esencialmente se crea en el ámbito del <code>window</code> (global), asumirá que <code>this</code> es window.</p> + +<pre class="brush: js notranslate">// ---------------------- +// Ejemplo de flecha +// ---------------------- + +// Un objeto simplista con su propio "this". +var obj = { + num: 100 +} + +// Establecer "num" en window para mostrar cómo se recoge. +window.num = 2020; // ¡Ay! + +// Función flecha +var add = (a, b, c) => this.num + a + b + c; + +// call +console.log(add.call(obj, 1, 2, 3)) // resultado 2026 + +// apply +const arr = [1, 2, 3] +console.log(add.apply(obj, arr)) // resultado 2026 + +// bind +const bound = add.bind(obj) +console.log(bound(1, 2, 3)) // resultado 2026 +</pre> + +<p>Quizás el mayor beneficio de usar las funciones flecha es con los métodos a nivel del DOM (<code>setTimeout</code>, <code>setInterval</code>, <code>addEventListener</code>) que generalmente requieren algún tipo de cierre, llamada, aplicación o vinculación para garantizar que la función se ejecute en el ámbito adecuado.</p> + +<p><strong>Ejemplo tradicional:</strong></p> + +<pre class="brush: js notranslate">var obj = { + count : 10, + doSomethingLater : function (){ + setTimeout(function(){ // la función se ejecuta en el ámbito de window + this.count++; + console.log(this.count); + }, 300); + } +} + +obj.doSomethingLater(); // la consola imprime "NaN", porque la propiedad "count" no está en el ámbito de window.</pre> + +<p><strong>Ejemplo de flecha:</strong></p> + +<pre class="brush: js notranslate">var obj = { + count : 10, + doSomethingLater : function(){ // por supuesto, las funciones flecha no son adecuadas para métodos + setTimeout( () => { // dado que la función flecha se creó dentro del "obj", asume el "this" del objeto + this.count++; + console.log(this.count); + }, 300); + } +} + +obj.doSomethingLater();</pre> + +<h3 id="Sin_enlace_de_arguments">Sin enlace de <code>arguments</code></h3> + +<p>Las funciones flecha no tienen su propio objeto {{JSxRef("Funciones/arguments", "arguments")}}. Por tanto, en este ejemplo, <code>arguments</code> simplemente es una referencia a los argumentos del ámbito adjunto:</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // Los argumentos implícitos de foo son vinculantes. arguments[0] es n + return f(); +} + +foo(3); // 6</pre> + +<p>En la mayoría de los casos, usar {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} es una buena alternativa a usar un objeto <code>arguments</code>.</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Uso_del_operador_new">Uso del operador <code>new</code></h3> + +<p>Las funciones flecha no se pueden usar como constructores y arrojarán un error cuando se usen con <code>new</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo no es un constructor</pre> + +<h3 id="Uso_de_la_propiedad_prototype">Uso de la propiedad <code>prototype</code></h3> + +<p>Las funciones flecha no tienen una propiedad <code>prototype</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Uso_de_la_palabra_clave_yield">Uso de la palabra clave <code>yield</code></h3> + +<p>La palabra clave {{JSxRef("Operadores/yield", "yield")}} no se puede utilizar en el cuerpo de una función flecha (excepto cuando está permitido dentro de las funciones anidadas dentro de ella). Como consecuencia, las funciones flecha no se pueden utilizar como generadores.</p> + +<h3 id="Cuerpo_de_función">Cuerpo de función</h3> + +<p>Las funciones flecha pueden tener un "cuerpo conciso" o el "cuerpo de bloque" habitual.</p> + +<p>En un cuerpo conciso, solo se especifica una expresión, que se convierte en el valor de retorno implícito. En el cuerpo de un bloque, debes utilizar una instrucción <code>return</code> explícita.</p> + +<pre class="brush: js notranslate">var func = x => x * x; +// sintaxis de cuerpo conciso, "return" implícito + +var func = (x, y) => { return x + y; }; +// con cuerpo de bloque, se necesita un "return" explícito +</pre> + +<h3 id="Devolver_objetos_literales">Devolver objetos literales</h3> + +<p>Ten en cuenta que devolver objetos literales utilizando la sintaxis de cuerpo conciso <code>params => {object: literal}</code> no funcionará como se esperaba.</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// ¡Llamar a func() devuelve undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: la declaración function requiere un nombre</pre> + +<p>Esto se debe a que el código entre llaves ({}) se procesa como una secuencia de declaraciones (es decir, <code>foo</code> se trata como una etiqueta, no como una clave en un objeto literal).</p> + +<p>Debes envolver el objeto literal entre paréntesis:</p> + +<pre class="brush: js notranslate">var func = () => ({ foo: 1 });</pre> + +<h3 id="Saltos_de_línea">Saltos de línea</h3> + +<p>Una función flecha no puede contener un salto de línea entre sus parámetros y su flecha.</p> + +<pre class="brush: js notranslate">var func = (a, b, c) + => 1; +// SyntaxError: expresión esperada, obtuve '=>'</pre> + +<p>Sin embargo, esto se puede modificar colocando el salto de línea después de la flecha o usando paréntesis/llaves como se ve a continuación para garantizar que el código se mantenga bonito y esponjoso. También puedes poner saltos de línea entre argumentos.</p> + +<pre class="brush: js notranslate">var func = (a, b, c) => + 1; + +var func = (a, b, c) => ( + 1 +); + +var func = (a, b, c) => { + return 1 +}; + +var func = ( + a, + b, + c +) => 1; + +// no se lanza SyntaxError</pre> + +<h3 id="Orden_de_procesamiento">Orden de procesamiento</h3> + +<p>Aunque la flecha en una función flecha no es un operador, las funciones flecha tienen reglas de procesamiento especiales que interactúan de manera diferente con {{JSxRef("Operadores/Operator_Precedence", "prioridad de operadores")}} en comparación con las funciones regulares.</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: argumentos de función flecha no válidos + +callback = callback || (() => {}); // bien +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_básico">Uso básico</h3> + +<pre class="brush: js notranslate">// Una función flecha vacía devuelve undefinided +let empty = () => {}; + +(() => 'foobar')(); +// Devuelve "foobar" +// (esta es una expresión de función invocada inmediatamente) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Fácil filtrado de arreglos, mapeo, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// Cadenas de promesas más concisas +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Funciones flecha sin parámetros que son visualmente más fáciles de procesar +setTimeout( () => { + console.log('sucederá antes'); + setTimeout( () => { + // código más profundo + console.log ('Sucederá más tarde'); + }, 1); +}, 1); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Definición de función flecha')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/default_parameters/index.html b/files/es/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..60c189363a --- /dev/null +++ b/files/es/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,235 @@ +--- +title: Parámetros predeterminados +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - Característica del lenguaje + - ECMAScript 2015 + - Funciones + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +original_slug: Web/JavaScript/Referencia/Funciones/Parametros_por_defecto +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p><span class="seoSummary"><strong>Parámetros predeterminados de función</strong> permiten que los parámetros con nombre se inicien con valores predeterminados si no se pasa ningún valor o <code>undefined</code>.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">function [<var>name</var>]([<var>param1</var>[ = <var>defaultValue1</var> ][, ..., <var>paramN</var>[ = <var>defaultValueN</var> ]]]) { + <var>statements</var> +} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>En JavaScript, los parámetros de función están predeterminados en {{jsxref("undefined")}}. Sin embargo, a menudo es útil establecer un valor predeterminado diferente. Aquí es donde los parámetros predeterminados pueden ayudar.</p> + +<p>En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parámetros en el cuerpo de la función y asignar un valor si eran <code>undefined</code>.</p> + +<p>En el siguiente ejemplo, si no se proporciona ningún valor para <code><var>b</var></code> cuando se llama a <code>multiply</code>, el valor de <code><var>b</var></code> sería <code>undefined</code> al evaluar <code><var>a</var> * <var>b</var></code> y <code>multiply</code> devolvería <code>NaN</code>.</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN ! +</pre> + +<p>Para protegerte contra esto, usarías algo como la segunda línea, donde <code><var>b</var></code> se establece en <code>1</code> si llamas a <code>multiply</code> con un solo argumento:</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +</pre> + +<p>Con los parámetros predeterminados en ES2015, las comprobaciones en el cuerpo de la función ya no son necesarias. Ahora, puedes asignar <code>1</code> como valor predeterminado para <code><var>b</var></code> en el encabezado de la función:</p> + +<pre class="brush: js notranslate">function multiply(a, b = 1) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Pasar_undefined_vs._otros_valores_falsos">Pasar <code>undefined</code> vs. otros valores falsos</h3> + +<p>En la segunda llamada de este ejemplo, incluso si el primer argumento se establece explícitamente en <code>undefined</code> (aunque no <code>null</code> u otros valores {{Glossary("falsy", "falsos", "", 1)}} , el valor del argumento <code><var>num</var></code> sigue siendo el predeterminado.</p> + +<pre class="brush: js notranslate">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num se establece en 1) +test(undefined) // 'number' (num se establece en 1 también) + +// prueba con otros valores falsos: +test('') // 'string' (num se establece en '') +test(null) // 'object' (num se establece en null) +</pre> + +<h3 id="Evaluado_en_el_momento_de_la_llamada">Evaluado en el momento de la llamada</h3> + +<p>El argumento predeterminado se evalúa en el <em>momento de la llamada</em>. Entonces, a diferencia de (por ejemplo) Python, se crea un nuevo objeto cada vez que se llama a la función.</p> + +<pre class="brush: js notranslate">function append(value, array = []) { + array.push(value) + return array +} + +append(1) // [1] +append(2) // [2], no [1, 2] +</pre> + +<p>Esto incluso se aplica a funciones y variables:</p> + +<pre class="brush: js notranslate">function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something() { + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +</pre> + +<h3 id="Los_parámetros_anteriores_están_disponibles_para_los_parámetros_predeterminados_posteriores">Los parámetros anteriores están disponibles para los parámetros predeterminados posteriores</h3> + +<p>Los parámetros definidos anteriormente (a la izquierda) están disponibles para los parámetros predeterminados posteriores:</p> + +<pre class="brush: js notranslate">function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message] +} + +greet('David', 'Hi') // ["David", "Hi", "Hi David"] +greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] +</pre> + +<p>Esta funcionalidad se puede aproximar de esta manera, lo que demuestra cuántos casos extremos se manejan:</p> + +<pre class="brush: js notranslate">function go() { + return ':P' +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g] +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Efectos_de_el_ámbito">Efectos de el ámbito</h3> + +<p>Si se definen parámetros predeterminados para uno o más parámetros, se crea un <a href="https://tc39.es/ecma262/#sec-functiondeclarationinstantiation">segundo ámbito</a> (registro de entorno), específicamente para los identificadores dentro de la lista de parámetros. Este ámbito es padre del ámbito creado para el cuerpo de la función.</p> + +<p>Esto significa que no se puede hacer referencia a las funciones y variables declaradas en el cuerpo de la función desde los iniciadores de parámetros de valor predeterminado; intentar hacerlo arroja un {{jsxref("ReferenceError")}} en tiempo de ejecución.</p> + +<p>También significa que las variables declaradas dentro del cuerpo de la función usando <code>var</code> enmascararán los parámetros del mismo nombre, en lugar de que el comportamiento habitual de las declaraciones <code>var</code> duplicadas no tenga ningún efecto.</p> + +<p>La siguiente función arrojará un <code>ReferenceError</code> cuando se invoca, porque el valor del parámetro predeterminado no tiene acceso al ámbito secundario del cuerpo de la función:</p> + +<pre class="brush: js example-bad notranslate">function f(a = go()) { // Lanza un `ReferenceError` cuando se invoca a `f`. + function go() { return ':P' } +} +</pre> + +<p>...y esta función imprimirá <code>undefined</code> porque la variable <code>var a</code> se eleva solo a la parte superior del ámbito creado para el cuerpo de la función (y no hasta el ámbito principal creado para la lista de parámetros):</p> + +<pre class="brush: js example-bad notranslate">function f(a, b = () => console.log(a)) { + var a = 1 + b() // Imprime `undefined`, porque los valores de los parámetros predeterminados existen en su propio ámbito +} +</pre> + +<h3 id="Parámetros_sin_valores_predeterminados_después_de_los_parámetros_predeterminados">Parámetros sin valores predeterminados después de los parámetros predeterminados</h3> + +<p>Los parámetros aún se establecen de izquierda a derecha, sobrescribiendo los parámetros predeterminados incluso si hay parámetros posteriores sin valores predeterminados.</p> + +<pre class="brush: js notranslate">function f(x = 1, y) { + return [x, y] +} + +f() // [1, undefined] +f(2) // [2, undefined] +</pre> + +<h3 id="Parámetro_desestructurado_con_asignación_de_valor_predeterminado">Parámetro desestructurado con asignación de valor predeterminado</h3> + +<p>Puedes usar la asignación de valor predeterminado con la notación {{jsxref("Operators/Destructuring_assignment", "la desestructuración", "", 1)}}:</p> + +<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Definición de Funciones')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Propuesta original en ecmascript.org</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/get/index.html b/files/es/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..64ecd47f91 --- /dev/null +++ b/files/es/web/javascript/reference/functions/get/index.html @@ -0,0 +1,135 @@ +--- +title: get +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript5 + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Functions/get +original_slug: Web/JavaScript/Referencia/Funciones/get +--- +<div>{{jsSidebar("Funciones")}}</div> + +<p>Enlaza la propiedad de un objeto con una función que será llamada cuando la propiedad es buscada.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p><code>{get <em>prop</em>() { . . . } }</code></p> + +<h2 id="Parámetros">Parámetros</h2> + +<dl> + <dt><code>prop</code></dt> + <dd>el nombre de la propiedad a unir con la función dada</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>A veces es deseable permitir acceso a una propiedad que retorna un valor dinámicamente calculado, o si desea mostrar el estado de alguna variable interna sin requerir el uso de llamadas a métodos explícitos. En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simultáneamente un getter ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con un setter para crear un tipo de pseudo-propiedad.</p> + +<p>Tenga en cuenta lo siguiente al trabajar con la sintaxis <code>get</code>:</p> + +<ul> + <li>Puede tener un identificador que sea un número o una cadena.</li> + <li>Debe tener exactamente cero parametros (ver <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/">Cambio ES5 incompatible: las funciones getter y setter literal deben tener ahora exactamente cero o un argumento </a>para mas información);</li> + <li>No debe haber múltiples getters para una misma propiedad (<code>{ get x() { }, get x() { } }</code> y <code>{ x: ..., get x() { } }</code> están prohibidos).</li> +</ul> + +<p>El getter puede ser removido usando el operador {{jsxref("Operadores/delete", "delete")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Example:_Defining_a_getter_with_the_get_operator" name="Example:_Defining_a_getter_with_the_get_operator">Definir un getter con el operador <code>get</code></h3> + +<p>Esto creará una pseudo-propiedad <code>latest</code> (ver ejemplo) del objecto <code>o</code> que podría retornar la más reciente entrada dentro de <code>o.log</code>:</p> + +<pre class="brush: js">var o = { + get latest () { + if (this.log.length > 0) { + return this.log[this.log.length - 1]; + } + else { + return null; + } + }, + log: [] +} +</pre> + +<p>Note que intentar asignar un valor a <code>latest</code> no lo cambiará.</p> + +<h3 id="Example:_Deleting_a_getter_using_the_delete_operator" name="Example:_Deleting_a_getter_using_the_delete_operator">Borrar un getter usando el operador <code>delete</code></h3> + +<pre class="brush: js">delete o.latest; +</pre> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>Basado en la página de <a class="external" href="http://robertnyman.com/javascript/javascript-getters-setters.html#regular-getters-and-setters">página de Robert Nyman</a></p> + +<p>Sin soporte (notablemente en IE6-8) significa que el script lanzará un error de sintaxis.</p> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>1</td> + <td>9</td> + <td>9.5</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Consulta también</h2> + +<ul> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/es/JavaScript/Guide/Working_with_Objects#Defining_Getters_and_Setters" title="en/JavaScript/Guide/Working with Objects#Defining Getters and Setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> + +<div class="noinclude"> +<p> </p> +</div> + +<p> </p> diff --git a/files/es/web/javascript/reference/functions/index.html b/files/es/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..6ec9e945ee --- /dev/null +++ b/files/es/web/javascript/reference/functions/index.html @@ -0,0 +1,662 @@ +--- +title: Funciones +slug: Web/JavaScript/Reference/Functions +tags: + - Funciones + - Guia(2) + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Functions +original_slug: Web/JavaScript/Referencia/Funciones +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>En términos generales, una función es un "subprograma" que puede ser <em>llamado</em> por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado <em>cuerpo de la función</em>. Se pueden pasar valores a una función, y la función puede <em>devolver</em> un valor.</p> + +<p>En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos {{jsxref("Function")}}.</p> + +<h2 id="General" name="General">General</h2> + +<p>Toda función en JavaScript es un objeto Function. Ver {{jsxref("Function")}} para obtener información sobre las propiedades y métodos de los objetos <code>Function</code>.</p> + +<p>Las funciones no son lo mismo que los procedimientos. Una función siempre devuelve un valor, pero un procedimiento, puede o no puede devolver un valor.</p> + +<p>Para devolver un valor especifico distinto del predeterminado, una función debe tener una sentencia {{jsxref("Sentencias/return", "return")}}, que especifique el valor a devolver. Una función sin una instrucción return devolverá el valor predeterminado. En el caso de un {{jsxref("Object.prototype.constructor", "constructor")}} llamado con la palabra clave {{jsxref("new")}}, el valor predeterminado es el valor de su parametro. Para el resto de funciones, el valor predeterminado es undefined.</p> + +<p>Los parámetros en la llamada a una función son los argumentos de la función. Los argumentos se pasan a las funciones <em>por valor</em>. Si la función cambia el valor de un argumento, este cambio no se refleja globalmente ni en la llamada de la función. Sin embargo, las referencias a objetos también son valores, y son especiales: si la función cambia las propiedades del objeto referenciado, ese cambio es visible fuera de la función, tal y como se muestra en el siguiente ejemplo:</p> + +<pre><code class="language-js"><span class="comment token">/* Declarando la función 'myFunc' */</span> + <span class="keyword token">function</span> <span class="function token">myFunc<span class="punctuation token">(elobjeto</span></span><span class="punctuation token">)</span> + <span class="punctuation token">{</span> + elobjeto<span class="punctuation token">.marca</span><span class="operator token">=</span> <span class="string token">"Toyota"</span><span class="brush: js">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/* + * Declarando la variable 'mycar'; + * Se crea e inicializa el nuevo objeto; + * para hacer referencia a él mediante 'mycar' + */</span> + <span class="keyword token">var</span> mycar <span class="operator token">=</span> <span class="punctuation token">{</span> + marca<span class="punctuation token">:</span> <span class="string token">"Honda"</span><span class="punctuation token">,</span> + modelo<span class="punctuation token">:</span> <span class="string token">"Accord"</span><span class="punctuation token">,</span> + año<span class="punctuation token">:</span> <span class="number token">1998</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="comment token">/* Mostrando 'Honda' */</span> + window<span class="punctuation token">.</span><span class="function token">alert<span class="punctuation token">(</span></span>mycar<span class="punctuation token">.marca</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">/* Paso por referencia del objeto 'mycar' a la función 'myFunc'*/</span> + <span class="function token">myFunc<span class="punctuation token">(</span></span>mycar<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">/* + * Muestra 'Toyota' como valor de la propiedad 'marca' + * del objeto, que ha sido cambiado por la función. + */</span> + window<span class="punctuation token">.</span><span class="function token">alert<span class="punctuation token">(</span></span>mycar<span class="punctuation token">.marca</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>La palabra clave <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this"><code>this</code></a> no hace referencia a la función que está ejecutandose actualmente, por lo que debes referirte a los objetos Function por nombre, incluso dentro del cuerpo de la función. Como alternativa, puedes utilizar la propiedad <a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee">arguments.callee</a> (que no se recomienda).</p> + +<h2 id="Defining_functions" name="Defining_functions">Definiendo funciones</h2> + +<p>Hay varias formas de definir funciones:</p> + +<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Declaración de una función (La instrucción <code>function</code>)</h3> + +<p>Hay una sintaxis especial para declarar funciones (ver la instrucción {{jsxref("Sentencias/function","function")}} para más detalles):</p> + +<pre class="eval">function nombre([<em>param</em>[,<em>param</em>[, ...<em>param</em>]]]) { + instrucciones +} +</pre> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de un argumento que se pasará a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instrucciones</code></dt> + <dd>Las instruciones que forman el cuerpo de la función.</dd> +</dl> + +<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Expresión de una función (El operador <code>function</code>)</h3> + +<p>Una expresión function es similar y tiene la misma sintaxis que una declaración de función (ver operador {{jsxref("Operadores/function", "function")}} para más detalles):</p> + +<pre class="eval">function [nombre]([<em>param</em>[, <em>param</em>[, ...<em>param</em>]]]) { + instrucciones +} +</pre> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función, se puede omitir, en ese caso la función se conoce como función anónima.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de los argumentos que se pasarán a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instrucciones</code></dt> + <dd>Las instrucciones que forman el cuerpo de la función.</dd> +</dl> + +<h3 id="La_expresión_de_función_flecha_>">La expresión de función flecha (=>)</h3> + +<div class="note"> +<p><strong>Nota:</strong> Las expresiones de función Flecha son una tecnología experimental, parte de la proposición Harmony (EcmaScript 6) y no son ampliamente implementadas por los navegadores.</p> +</div> + +<p>Una expresión de función flecha tiene una sintaxis más corta y su léxico se une a este valor (ver {{jsxref("Funciones/Arrow_functions", "arrow functions", "", 1)}} para más detalles):</p> + +<pre class="language-html">([param] [, param]) => { instrucciones } + +param => expresión +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de un argumento. Si no hay argumentos se tiene que indicar con <code>()</code>. Para un único argumento no son necesarios los parentesis. (como <code>foo => 1</code>)</dd> + <dt><code>instrucciones o expresión</code></dt> + <dd>Multiples instrucciones deben ser encerradas entre llaves. Una única expresión no necesita llaves. La expresión es, así mismo, el valor de retorno implícito de esa función.</dd> +</dl> + +<h3 id="The_Function_constructor" name="The_Function_constructor">El constructor <code>Function</code></h3> + +<p>Como todos los demás objetos, los objetos {{jsxref("Function")}} se pueden crear mediante el operador new:</p> + +<pre class="language-html">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Ningún o varios argumentos son pasados para ser utilizados por la función como nombres de argumentos formales. Cada uno debe ser una cadena que se ajuste a las reglas de identificadores válidos en JavaScript, o a una lista de este tipo de cadenas separadas por comas; por ejemplo "x", "theValue", o "a,b".</dd> +</dl> + +<dl> + <dt><code>Cuerpo de la función</code></dt> + <dd>Una cadena conteniendo las instrucciones JavaScript que comprenden la definición de la función.</dd> +</dl> + +<p>Llamar al contructor Function como una función, sin el operador new, tiene el mismo efecto que llamarlo como un constructor.</p> + +<div class="note"><strong>Nota:</strong> Utilizar el constructor Function no se recomienda, ya que necesita el cuerpo de la función como una cadena, lo cual puede ocasionar que no se optimize correctamente por el motor JS, y puede también causar otros problemas.</div> + +<h2 id="The_arguments_object" name="The_arguments_object">El objeto <code>arguments</code></h2> + +<p>Puedes referirte a los argumentos de una función dentro de la misma, utilizando el objeto arguments. Ver {{jsxref("Functiones/argument", "Function")}}.</p> + +<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">Ámbito de ejecución y pila de funciones</h2> + +<p><span class="comment">some section about scope and functions calling other functions</span></p> + +<h3 id="Repaso" name="Repaso">Repaso</h3> + +<p>Una función puede referirse y llamarse a sí misma. Hay tres maneras en la que una función puede referirse a sí misma.</p> + +<ol> + <li>El nombre de la función</li> + <li>{{jsxref("arguments.callee")}}</li> + <li>una función dentro del ambito de ejecución que refiere a la función</li> +</ol> + +<p>Por ejemplo, considere la siguiente definición de función:</p> + +<pre class="brush: js">var foo = function bar() { + // el cuerpo va aqui +}; +</pre> + +<p>Dentro del cuerpo de la función, todo lo siguientes son lo mismo:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>Una función que se llama a sí misma es llamada una <em>función recursiva. </em>En algunas ocaciones, la recursión es análoga a un bucle. Ambos ejecutan el mismo código múltiples veces, y ambas requieren una condición (para evitar un bucle infinito, o en su lugar, recursión infinita en este caso). Por ejemplo, el siguiente bucle:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" es la condición + // haz algo + x++; +} +</pre> + +<p>puede ser convertida en una función recursiva y una llamada a esa función:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" es la condición de salida (equivalente a "!(x < 10)") + return; + // haz algo + loop(x + 1); // la llamada recursiva +} +loop(0); +</pre> + +<p>Sin embargo, algunos algoritmos no pueden ser bucles iterativos simples. Por ejemplo, obtener todos los nodos de una estructura de arbol (e.g. el <a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a>) es realizado de manera más fácil usando recursión:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">recorrerArbol <span class="punctuation token">(</span></span>nodo<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>nodo <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="comment token"> // +</span> <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="comment token"> // haz algo con el nodo +</span> <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> nodo<span class="punctuation token">.</span>nodosHijos<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +<span class="function token"><span class="punctuation token"> recorrerArbol(</span></span>nodo<span class="punctuation token">.nodosHijos</span><span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code> +</pre> + +<p>En comparación con el bucle de la función <code>loop</code>, cada llamada recursiva hace muchas llamadas recursivas aquí.</p> + +<p>Es posible convertir cualquier algoritmo recursivo en uno no recursivo, pero a menudo la lógica es mucho más compleja y hacerlo requiere el uso de una pila. De hecho, la recursión utiliza una pila: la pila de funciones.</p> + +<p>El comportamiento similar a la pila se puede ver en el ejemplo siguiente:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo<span class="punctuation token">(</span></span>i<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token"><</span> <span class="number token">0</span><span class="punctuation token">)</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">writeln<span class="punctuation token">(</span></span><span class="string token">'inicio:'</span> <span class="operator token">+</span> i<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">foo<span class="punctuation token">(</span></span>i <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">writeln<span class="punctuation token">(</span></span><span class="string token">'fin:'</span> <span class="operator token">+</span> i<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="function token">foo<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>que produce:</p> + +<pre class="language-html">inicio:3 +inicio:2 +inicio:1 +inicio:0 +fin:0 +fin:1 +fin:2 +fin:3 +</pre> + +<h2 id="Nested_functions_and_closures" name="Nested_functions_and_closures">Funciones anidadas y cierres</h2> + +<p>Puede anidar una función dentro de una función. La función anidada (inner) es privada a la función que la contiene (outer). También con la forma: aclosure.</p> + +<dl> + <dd>Un cierre es una expresión (normalmente una función) que puede tener variables libres junto con un entorno que enlaza esas variables (que "cierra" la expresión).<br> + Dado que una función anidada es un cierre, esto significa que una función anidada puede "heredar" los argumentos y las variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa. <a class="external" href="http://jibbering.com/faq/faq_notes/closures.html"> </a></dd> +</dl> + +<p>Desde que la función anidada es un cierre (closure), esto significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene un scope (alcance) de la función externa.</p> + +<p><span class="external">Para resumir: </span></p> + +<ul> + <li><span class="external">La función interna se puede acceder sólo a partir de sentencias en la función externa. </span></li> +</ul> + +<ul> + <li><span class="external">La función interna forma un cierre: la función interna puede utilizar los argumentos y las variables de la función externa, mientras que la función externa no puede utilizar los argumentos y las variables de la función interna. </span></li> +</ul> + +<p><span class="external">El ejemplo siguiente muestra funciones anidadas: </span></p> + +<pre class="eval"><span class="brush: js">function addCuadrado(a,b) { + function cuadrado(x) { + return x * x; + } + return cuadrado(a) + cuadrado(b); +} +a = addCuadrado(2,3); // retorna 13 +b = addCuadrado(3,4); // retorna 25 +c = addCuadrado(4,5); // retorna 41 +</span></pre> + +<p><span class="external">Dado que la función interna forma un cierre, puede llamar a la función externa y especificar argumentos para la función externa e interna</span></p> + +<pre class="eval"><span class="brush: js">function fuerade(x) { + function dentro(y) { + return x + y; + } + return dentro; +} +resultado = fuerade(3)(5); // retorna 8 +</span></pre> + +<h3 id="Efficiency_considerations" name="Efficiency_considerations"><span class="external">Consideraciones sobre la eficiencia</span></h3> + +<p><span class="external">Observe cómo se conserva <code>x</code> cuando se devuelve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">dentro</span></font>. Un cierre conserva los argumentos y las variables en todos los ámbitos que contiene. Puesto que cada llamada proporciona argumentos potencialmente diferentes, debe crearse un cierre para cada llamada a la función externa. En otras palabras, cada llamada a <code>fuerade</code> crea un cierre. Por esta razón, los cierres pueden usar una gran cantidad de memoria. La memoria se puede liberar sólo cuando el <code>dentro</code> devuelto ya no es accesible. En este caso, el cierre del <code>dentro</code> se almacena en <code>resultado</code>. Como el <code>resultado</code> está en el ámbito global, el cierre permanecerá hasta que se descargue el script (en un navegador, esto sucedería cuando la página que contiene el script esté cerrada).</span></p> + +<p><span class="external">Debido a esta ineficiencia, evite cierres siempre que sea posible, es decir, evite las funciones de anidamiento siempre que sea posible. Por ejemplo, considere el siguiente ejemplo:</span></p> + +<pre class="eval"><span class="brush: js">function assignOnclick(elemento) { + element.onclick = function() { + this.style.backgroundColor = 'blue'; + }; +} +</span></pre> + +<p><span class="external">Esto se puede volver a escribir para evitar el cierre. Sin embargo, la función interna anónima necesitaría ser nombrada y ya no sería privada para <code>assignOnclick</code>: </span></p> + +<pre class="eval"><span class="brush: json">function assignOnclick(elemento) { + elemento.onclick = elemento_onclick; +} + +function elemento_onclick() { + this.style.backgroundColor = 'blue'; +} +</span></pre> + +<h4 id="Multiply-nested_functions" name="Multiply-nested_functions">Multiples funciones anidadas</h4> + +<p><span class="external">Las funciones pueden ser anidadas contigua de la otra, es decir, una función (A) que contiene una función (B) que contiene una función (C), etc. Ambas funciones B y C forman cierres aquí, por lo que B puede acceder a A y C pueden acceder a B. Además, como C puede acceder a B, que puede acceder a A, C también puede acceder a A. Por lo tanto, los cierres pueden contener múltiples ámbitos; contienen recursivamente el alcance de las funciones que lo contienen. Esto es llamado encadenamiento de objetos(<em>scope chaining</em>). (Por qué se llama "<em>chaining</em>"("encadenamiento") se explicará más adelante.)</span></p> + +<p><span class="external">Considere el siguiente ejemplo:</span></p> + +<pre class="eval"><span class="brush: js">function A(x) { + function B(y) { + function C(z) { + alert(x + y + z); + } + C(3); + } + B(2); +} +A(1); // alerts 6 (1 + 2 + 3) +</span></pre> + +<p><span class="external">En este ejemplo, <code>C</code> accede a las <code>B</code> que hayan en <code>y</code> y <code>A</code> en <code>x</code>. Esto se puede hacer porque: </span></p> + +<ol> + <li><span class="external"><code>B</code> forma un cierre que incluye a <code>A</code>, es decir, <code>B</code> puede acceder a los argumentos y variables de <code>A</code>. </span></li> + <li><span class="external"><code>C</code> forma un cierre que incluye a <code>B</code>. </span></li> + <li><span class="external">Como el cierre de <code>B</code> incluye a <code>A</code>, el cierre de <code>C</code> incluye a <code>A</code>, <code>C</code> puede acceder a los argumentos y variables de la Banda <code>A</code>. En otras palabras, codifica los ámbitos de <code>B</code> y A en ese orden. </span></li> +</ol> + +<p><span class="external">Lo contrario, sin embargo, no es cierto. <code>A</code> no puede acceder a <code>C</code>, porque <code>A</code> no puede acceder a ningún argumento o variable de <code>B</code>, que <code>C</code> es una variable de. Así, <code>C</code> permanece privado de sólo <code>B</code>. </span></p> + +<h3 id="Conflictos_de_nombre" name="Conflictos_de_nombre"><span class="external">Conflictos de nombre </span></h3> + +<p><span class="external">Cuando dos argumentos o variables en los ámbitos de un cierre tienen el mismo nombre, existe un conflicto de nombres("<em>name conflict</em>"). Más alcances internos tienen prioridad, por lo que el alcance más interno tiene la más alta precedencia, mientras que el alcance más externo toma el más bajo. Esta es la cadena de alcance. El primero en la cadena es el alcance más interno, y el último es el alcance más exterior. Considera lo siguiente:</span></p> + +<pre class="eval"><span class="brush: js">function fuerade() { + var x = 10; + function dentro(x) { + return x; + } + return dentro; +} +resultado = fuerade()(20); // retorna 20 en lugar de 10</span> +</pre> + +<p><span class="external">El conflicto de nombres ocurre en la sentencia <code>return x</code> y está entre el parámetro <code>x</code> del <code>dentro</code>y la variable <code>x</code> del <code>fuerade</code>. La cadena de alcance aquí es {<code>dentro</code>, <code>fuerade</code>, global object}. Por lo tanto, la <code>x</code> de <code>inside</code>tiene precedentes sobre la <code>x</code> de <code>fuerade</code>, y 20 (<code>dentro</code>de <code>x</code>) se devuelve en lugar de 10 (<code>fuerade</code> de <code>x</code>).</span></p> + +<h2 id="constructor_versus_declaration_versus_expression" name="constructor_versus_declaration_versus_expression"><span class="external">Constructor vs declaración vs expresión</span></h2> + +<p><span class="external">Las diferencias entre la <code>Function</code> constructora, la de declaración y la de expresión. </span></p> + +<p><span class="external">Compare lo siguiente: </span></p> + +<ol> + <li><span class="external">Una función definida con el constructor <code>Function</code> asignado a la variable <code>multiply</code> </span> + + <pre><span class="brush: js">var multiply = new Function("x", "y", "return x * y;"); +</span></pre> + </li> + <li><span class="external">Una declaración de una función denominada <code>multiply</code> </span> + <pre><span class="brush: js">function multiply(x, y) { + return x * y; +} +</span></pre> + </li> + <li><span class="external">Una expresión de función anónima asignada a la variable <code>multiply</code> </span> + <pre><span class="brush: js">var multiply = function(x, y) { + return x * y; +} +</span></pre> + </li> + <li><span class="external">Una declaración de una función denominada <code>func_name</code> asignada a la variable <code>multiply</code> </span> + <pre><span class="brush: js">var multiply = function func_name(x, y) { + return x * y; +} +</span></pre> + </li> +</ol> + +<p><span class="external">Todos hacen aproximadamente la misma cosa, con algunas diferencias sutiles:</span></p> + +<ul> + <li><span class="external">Existe una distinción entre el nombre de la función y la variable a la que se asigna la función:</span><span class="external"> </span> + + <ul> + <li><span class="external">El nombre de la función no se puede cambiar, mientras que la variable a la que se asigna la función puede ser reasignada.</span></li> + <li><span class="external">El nombre de la función sólo se puede utilizar en el cuerpo de la función. Intentar utilizarlo fuera del cuerpo de la función da como resultado un error (o <code>undefined</code> si el nombre de la función se declaró previamente mediante una instrucción <code>var</code>). Por ejemplo: </span> + <pre><span class="brush: js">var y = function x() {}; +alert(x); // arroja un error +</span></pre> + + <p><span class="external">El nombre de la función también aparece cuando la función se serializa vía el método de la </span><code>Function</code> 'toString'.</p> + + <p>Por otro lado, la variable a la que se asigna la función está limitada sólo por su ámbito, que está garantizado para incluir el ámbito en el que se declara la función.</p> + </li> + <li>Como muestra el ejemplo 4, el nombre de la función puede ser diferente de la variable a la que se asigna la función. No tienen relación entre sí.</li> + </ul> + </li> + <li>Una declaración de función también crea una variable con el mismo nombre que el nombre de la función. Por lo tanto, a diferencia de las definidas por las expresiones de función, las funciones definidas por las declaraciones de función se puede acceder por su nombre en el ámbito que se definieron en: + <pre class="brush: js">function x() {} +alert(x); // salida x serializado en un string +</pre> + + <p>El siguiente ejemplo muestra cómo los nombres de las funciones no están relacionados con las variables a las que están asignadas las funciones. Si una "variable de función" se asigna a otro valor, seguirá teniendo el mismo nombre de función:</p> + + <pre class="brush: js">function foo() {} +alert(foo); // el string alterado contiene el nombre + // de la función "foo" +var bar = foo; +alert(bar); // el string todavía contiene el nombre + // de la función "foo" +</pre> + </li> + <li>Una función definida por un<code>Function</code> no tiene un nombre de función. Sin embargo, en el <a href="/es/docs/Mozilla/Projetos/SpiderMonkey">SpiderMonkey</a> en el motor de JavaScript, la forma serializada de la función muestra como si tuviera el nombre "anónimo"("anonymous"). Por ejemplo, <code>alert(new Function())</code> salida: + <pre class="brush: js">function anonymous() { +} +</pre> + + <p>Dado que la función en realidad no tiene un nombre, <code>anonymous</code> no es una variable que se puede acceder dentro de la función. Por ejemplo, lo siguiente resultaría en un error:</p> + + <pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + </li> + <li>A diferencia de las funciones definidas por expresiones de función o constructores <code>Function</code> se puede utilizar una función definida por una declaración de función antes de la propia declaración de la función. Por ejemplo: + <pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + </li> + <li>Una función definida por una expresión de función hereda el ámbito actual. Es decir, la función forma un cierre. Por otro lado, una función definida por un constructor de <code>Function</code> no hereda ningún ámbito que no sea el ámbito global (que todas las funciones heredan).</li> + <li>Las funciones definidas por expresiones de función y declaraciones de función son analizadas una sola vez, mientras que las definidas por el constructor de <code>Function</code> no lo son. Es decir, la cadena de cuerpo de función pasada al constructor de <code>Function</code> debe ser analizada cada vez que se evalúa. Aunque una expresión de función crea un cierre cada vez, el cuerpo de la función no es reparsed, por lo que las expresiones de función son aún más rápido que "<code>new Function(...)</code>". Por lo tanto, el constructor de la <code>Function</code> debe evitarse siempre que sea posible.</li> +</ul> + +<p>Una declaración de función es muy fácilmente (ya menudo involuntariamente) convertida en una expresión de función. Una declaración de función deja de ser una cuando:</p> + +<ul> + <li>Se convierte en parte de una expresión</li> + <li>Ya no es un "elemento fuente" de una función o el propio script. Un "elemento de origen" es una sentencia no anidada en el script o un cuerpo de función: + <pre class="brush: js">var x = 0; // elemento fuente +if (x == 0) { // elemento fuente + x = 10; // no es un elemento fuente + function boo() {} // no es un elemento fuente +} +function foo() { // elemento fuente + var y = 20; // elemento fuente + function bar() {} // elemento fuente + while (y == 10) { // elemento fuente + function blah() {} // no es un elemento fuente + y++; // no es un elemento fuente + } +} +</pre> + </li> +</ul> + +<p>Ejemplos:</p> + +<ul> + <li> + <pre class="brush: js">// function declaración +function foo() {} + +// expresión de una función +(function bar() {}) + +// expresión de una función +x = function hello() {} +</pre> + </li> + <li> + <pre class="brush: js">if (x) { + // expresión de la función + function world() {} +} +</pre> + </li> + <li> + <pre class="brush: js">// instrucción de la función +function a() { + // instrucción de la función + function b() {} + if (0) { + // expresión de la función + function c() {} + } +} +</pre> + </li> +</ul> + +<h3 id="Conditionally_defining_a_function" name="Conditionally_defining_a_function">Definición condicional de una función</h3> + +<p>Las funciones se pueden definir de forma condicional utilizando expresiones de función o el constructor <code>Function</code>.</p> + +<p>En la siguiente secuencia de comandos, la función <code>zero</code> nunca se define y no se puede invocar, porque '<code>if (0)</code>' se evalúa como false:</p> + +<pre class="brush: js">if (0) + function zero() { + document.writeln("Esto es zero."); + } +</pre> + +<p>Si se cambia el script para que la condición se convierta en '<code>if (1)</code>', se define la función <code>zero</code>.</p> + +<div class="note"> +<p>Nota: Aunque esto parece una declaración de función, ésta es en realidad una expresión de función ya que está anidada dentro de otra instrucción. Ver <a href="#constructor_versus_declaration_versus_expression">las diferencias entre las funciones de declaración y de expresión</a>.</p> +</div> + +<div class="note"> +<p>Nota: Algunos motores JavaScript, sin incluir <a href="/es/docs/Mozilla/Projetos/SpiderMonkey">SpiderMonkey</a>, tratan incorrectamente cualquier expresión de función con un nombre como una declaración de función. Esto llevaría a que se definiera <code>zero</code> incluso con el siempre-falso("<em>always-false</em>") condicional. Una manera más segura de definir funciones condicionalmente es definir la función anónimamente y asignarla a una variable:</p> +</div> + +<pre class="brush: js">if (0) + var zero = function() { + document.writeln("Esto es zero."); + } +</pre> + +<h2 id="Functions_as_event_handlers" name="Functions_as_event_handlers">Funciones como manejadores de eventos</h2> + +<p>En JavaScript, los controladores de eventos <a href="es/DOM">DOM</a> son funciones (en oposición a los objetos que contienen un método <code>handleEvent</code> en otros enlaces de idioma DOM). Las funciones se pasan un objeto de <a href="es/DOM/event">evento</a> como el primer y único parámetro. Como cualquier otro parámetro, si el objeto de evento no necesita ser utilizado, puede omitirse en la lista de parámetros formales.</p> + +<p>Los posibles objetivos de eventos en un documento <a href="es/HTML">HTML</a> incluyen: <code>window</code> (<code>Window</code> objects("objeto de ventana"), including frames("marcos")), <code>document</code> (<code>HTMLDocument</code> objects("objetos HTMLDocument")), y elementos (<code>Element</code> objects("objetos Elemento")). En el <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">HTML DOM</a>, los destinos de evento tienen propiedades de controlador de eventos. Estas propiedades son nombres de eventos en minúsculas con prefijo "on", e.g. <code>onfocus</code>. Los eventos <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Level 2 Events</a> proporcionan una forma alternativa y más sólida de agregar oyentes de eventos.</p> + +<div class="note"> +<p>Nota: Los eventos son parte del DOM, no de JavaScript. (JavaScript simplemente proporciona un enlace al DOM.)</p> +</div> + +<p>El ejemplo siguiente asigna una función a un manejador de eventos de "foco"("focus") de ventana.</p> + +<pre>window.onfocus = function() { + document.body.style.backgroundColor = 'white'; +} +</pre> + +<p>Si se asigna una función a una variable, puede asignar la variable a un controlador de eventos. El siguiente código asigna una función a la variable <code>setBGColor</code>.</p> + +<pre>var setBGColor = new Function("document.body.style.backgroundColor = 'white';"); +</pre> + +<p>Puede utilizar esta variable para asignar una función a un controlador de eventos de varias maneras. Aquí hay dos formas:</p> + +<ol> + <li>Escritura con propiedades de evento DOM HTML<br> + + <pre>document.form1.colorButton.onclick = setBGColor; +</pre> + </li> + <li>Atributo de evento HTML<br> + + <pre><input name="colorBoton" type="button" + value="Cambia color de fondo" + onclick="setBGColor();"/> +</pre> + + <p>Un manejador de eventos establecido de esta manera es en realidad una función, denominada después del atributo, envuelta alrededor del código especificado. Esta es la razón por la que los paréntesis en "<code>setBGColor()</code>" son necesarios aquí (en lugar de sólo "<code>setBGColor</code>").</p> + </li> +</ol> + +<p>Es equivalente a:</p> + +<pre>document.form1.colorButton.onclick = function onclick(event) { + setBGColor(); +} +</pre> + +<p>Observe cómo se pasa el objeto de evento a esta función anónima como <code>event</code> de parámetro. Esto permite que el código especificado utilice el objeto Evento("Event object)":</p> + +<pre><input ... + onclick="alert(event.target.tagName);"/> +</pre> + +<p>Al igual que cualquier otra propiedad que se refiere a una función, el controlador de eventos puede actuar como un método, y <code>this</code> se refiere al elemento que contiene el controlador de eventos. En el ejemplo siguiente, se llama a la función referida por <code>onfocus</code> con <code>this</code> igual a <code>window</code>.</p> + +<pre class="eval">window.onfocus(); +</pre> + +<p>Un error común de principiante de JavaScript es el añadir paréntesis y / o parámetros al final de la variable, es decir, llamar al manejador de eventos cuando lo asigna. La adición de estos paréntesis asignará el <em>valor devuelto al llamar al manejador de eventos</em>, que a menudo es <code>undefined</code> (si la función no devuelve nada), en lugar del controlador de eventos en sí:</p> + +<pre class="eval">document.form1.button1.onclick = setBGColor(); +</pre> + +<p>Para pasar parámetros a un manejador de eventos, el manejador debe ser envuelto en otra función de la siguiente manera:</p> + +<pre class="eval">document.form1.button1.onclick = function() { + setBGColor('Algun valor'); +}; +</pre> + +<h3 id="Backward_compatibility" name="Backward_compatibility">Compatibilidad con versiones anteriores</h3> + +<h4 id="JavaScript_1.1_and_earlier" name="JavaScript_1.1_and_earlier">JavaScript 1.1 y anteriores</h4> + +<p>No puede anidar una sentencia de función en otra instrucción o en sí misma.</p> + +<h3 id="Local_variables_within_functions" name="Local_variables_within_functions">Variables locales dentro de las funciones</h3> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments">arguments</a>: Objeto similar a una matriz que contiene los argumentos pasados a la función en ejecución.</p> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee">arguments.callee</a>: Especifica la función en ejecución.</p> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/caller">arguments.caller</a>: Especifica la función que invocó la función en ejecución.</p> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/length">arguments.length</a>: Especifica el número de argumentos pasados a la función.</p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<h4 id="1.29_Returning_a_formatted_number" name="1.29_Returning_a_formatted_number">1) Devolver un número con formato</h4> + +<p>La siguiente función devuelve una cadena que contiene la representación formateada de un número rellenado con ceros a la izquierda.</p> + +<pre class="eval">// Esta función devuelve una cadena rellenada con ceros a la izquierda + +function padZeros(num, totalLen) { + var numStr = num.toString(); // Inicializa un valor de retorno como cadena + var numZeros = totalLen - numStr.length; // Calcula el no. de ceros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>Las siguientes sentencias llaman a la función padZeros.</p> + +<pre class="eval">var resultado; +resultado = padZeros(42,4); // retorna "0042" +resultado = padZeros(42,2); // retorna "42" +resultado = padZeros(5,4); // retorna "0005" +</pre> + +<h4 id="2.29_Determining_whether_a_function_exists" name="2.29_Determining_whether_a_function_exists">2) Determinar si existe una función</h4> + +<p>Puede determinar si existe una función utilizando el operador <code>typeof</code>. En el ejemplo siguiente, se realiza una prueba para determinar si el objeto <code>window</code> tiene una propiedad llamada <code>noFunc</code> que es una función. Si es así, se utiliza; de lo contrario, se tomarán otras medidas.</p> + +<pre> if ('function' == typeof window.noFunc) { + // utiliza noFunc() + } else { + // hacer algo mas + } +</pre> + +<div class="note"> +<p>Nota: Tenga en cuenta que en la prueba <code>if</code>, e utiliza una referencia a <code>noFunc</code> aquí no hay paréntesis "()" después del nombre de la función para que la función real no se llame.</p> +</div> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Function">Function</a>, <a href="es/Referencia_de_JavaScript_1.5/Sentencias/function">sentencia function</a>, <a href="es/Referencia_de_JavaScript_1.5/Operadores/Operadores_globales/function">operador function</a></p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions", "ru": "ru/\u042f\u0434\u0440\u043e_JavaScript_1.5_\u0421\u043f\u0440\u043e\u0432\u0447\u043d\u0438\u043a/Functions", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions", "ja": "ja/Core_JavaScript_1.5_Reference/Functions" } ) }}</p> diff --git a/files/es/web/javascript/reference/functions/method_definitions/index.html b/files/es/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..d8c4e43051 --- /dev/null +++ b/files/es/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,227 @@ +--- +title: Method definitions +slug: Web/JavaScript/Reference/Functions/Method_definitions +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +original_slug: Web/JavaScript/Referencia/Funciones/Method_definitions +--- +<div>{{JsSidebar("Functions")}}</div> + +<div>A partir de ECMAScript 2015 (ES6), se introdujo una sintaxis abreviada para la definición de métodos en inicializadores de objetos. Es una forma abreviada para la asignación de una función al nombre del método.</div> + +<div> </div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var obj = { + <var>property</var>( <var>parameters…</var> ) {}, + *<var>generator</var>( <var>parameters…</var> ) {}, +// also with computed keys: + [property]( <var>parameters…</var> ) {}, + *[generator]( <var>parameters…</var> ) {}, +// compare ES5 getter/setter syntax: + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sintaxis abreviada es similar a la introducida en ECMAScript 5 con <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> + +<p>Dado el siguiente código:</p> + +<pre class="brush: js">var obj = { + foo: function() {}, + bar: function() {} +};</pre> + +<p>Ahora se puede abreviar esto mismo como:</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<div class="note"> +<p><strong>Nota :</strong> La sintaxis abreviada usa funciones con nombre en lugar de funciones anónimas (como en …<code>foo: function() {}</code>…). Las funciones con nombre pueden ser llamadas desde el cuerpo de la función (esto es imposible con funciones anónimas, ya que no existe un identificador al que referirse). Para más detalles, ver {{jsxref("Operators/function","function","#Examples")}}.</p> +</div> + +<h3 id="Abreviatura_de_métodos_generadores">Abreviatura de métodos generadores</h3> + +<p>Los <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">métodos generadores</a> también pueden definirse usando la sintaxis abreviada. Note que el asterisco (*) en la sintaxis abreviada debe estar antes del nombre de propiedad del generador. Esto es, <code>* g(){}</code> funcionará, pero <code>g *(){}</code> no.</p> + +<pre class="brush: js;highlight[12]">// Usando una propiedad con nombre (pre-ES6) +var obj2 = { + g: function*() { + var index = 0; + while(true) + yield index++; + } +}; + +// El mismo objeto, usando la sintaxis abreviada +var obj2 = { + * g() { + var index = 0; + while(true) + yield index++; + } +}; + +var it = obj2.g(); +console.log(it.next().value); // 0 +console.log(it.next().value); // 1</pre> + +<h3 id="Las_definiciones_de_métodos_no_son_constructores_(instanciables_con_new)">Las definiciones de métodos no son constructores (instanciables con new)</h3> + +<p>Las las definiciones de métodos no son constructores y generarán un {{jsxref("TypeError")}} si intenta instanciarlos.</p> + +<pre class="brush: js example-bad">var obj = { + method() {}, +}; +new obj.method; // TypeError: obj.method no es un constructor + +var obj = { + * g() {} +}; +new obj.g; // TypeError: obj.g no es un constructor (cambiado en ES2016) +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Caso_de_prueba_simple">Caso de prueba simple</h3> + +<pre class="brush: js;highlight[3]">var obj = { + a : "foo", + b(){ return this.a; } +}; +console.log(obj.b()); // "foo" +</pre> + +<h3 id="Nombres_de_propiedad_computados">Nombres de propiedad computados</h3> + +<p>La sintaxis abreviada también soporta nombres de propiedades computados.</p> + +<pre class="brush: js;highlight[4]">var bar = { + foo0 : function (){return 0;}, + foo1(){return 1;}, + ["foo" + 2](){return 2;}, +}; + +console.log(bar.foo0()); // 0 +console.log(bar.foo1()); // 1 +console.log(bar.foo2()); // 2</pre> + +<h2 id="Especificaciónes">Especificaciónes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Cambiado el que los métodos generadores no deban tener una trampa [[Construct]] y deban fallar cuando se usen con <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Definición de métodos abreviada</td> + <td>{{CompatChrome("39")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("26")}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Métodos generadors no son constructores (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Definición de métodos abreviada</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Métodos generadores no son constructores (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("43")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_para_SpiderMonkey">Notas específicas para SpiderMonkey</h2> + +<ul> + <li>Anteriormente a SpiderMonkey 38 {{geckoRelease(38)}}, "<code>get</code>" y "<code>set</code>" eran nombres no válidos para métodos generadores. Esto ha sido corregido en {{bug(1073809)}}.</li> + <li>Anteriormente a SpiderMonkey 41 {{geckoRelease(41)}}, las llaves no eran requeridas en las definiciones de métodos. Estas son requeridas de ahora en adelante conforme a la especificación ES6 y su omisión arrojará un {{jsxref("SyntaxError")}} en esta versión y posteriores ({{bug(1150855)}}). + <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre> + </li> + <li>La restricción de que sólo los métodos generadores sean constructores fue implementada en SpiderMonkey 41 {{geckoRelease(41)}}. Ver también {{bug(1059908)}} y {{bug(1166950)}}.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexica grammatical</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/rest_parameters/index.html b/files/es/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..cb17f0f437 --- /dev/null +++ b/files/es/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,267 @@ +--- +title: Parámetros Rest +slug: Web/JavaScript/Reference/Functions/rest_parameters +tags: + - Funciones + - JavaScript + - Parametros Rest +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +original_slug: Web/JavaScript/Referencia/Funciones/parametros_rest +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La sintaxis de los <strong>parámetros rest </strong>nos permiten representar un número indefinido de argumentos como un array.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p> + +<p>La fuente interactiva de este ejemplo es almacenado en un repositorio de GitHub. Si a ti te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona este repositorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull-request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js notranslate">function(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p class="brush: js">El último parámetro de una función se puede prefijar con <code>...</code>, lo que hará que todos los argumentos restantes (suministrados por el usuario) se coloquen dentro de un array de javascript "estándar".</p> + +<p class="brush: js">Sólo el último parámetro puede ser un "parámetro rest".</p> + +<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a); + console.log("b", b); + console.log("manyMoreArgs", manyMoreArgs); +} + +myFun("one", "two", "three", "four", "five", "six"); + +// Console Output: +// a, one +// b, two +// manyMoreArgs, [three, four, five, six] +</pre> + +<h3 id="Diferencia_entre_los_parámetros_rest_y_el_objeto_arguments">Diferencia entre los parámetros rest y el objeto <code>arguments</code></h3> + +<p>Hay tres principales diferencias entre los parámetros rest y el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a>:</p> + +<ul> + <li>los parámetros rest son sólo aquellos a los que no se les ha asignado un nombre, mientras que el objeto <code>arguments</code> contiene todos los argumentos que se le han pasado a la función;</li> + <li>el objeto <code>arguments</code> no es un array real, mientras que los parámetros rest son instancias de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> , lo que significa que lo los métodos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> pueden aplicarse directamente;</li> + <li>el objeto <code>arguments</code> tiene una funcionalidad adicional específica para sí mismo (como la propiedad <code>callee</code>).</li> +</ul> + +<h3 id="De_argumentos_a_array">De argumentos a array</h3> + +<p>Los parámetros rest han sido agregados para reducir el código repetitivo que se usaba en los parámetros.</p> + +<pre class="brush: js notranslate">// Antes de los parámetros rest, "arguments" se podía convertir en un array usando: + +function f(a, b) { + + let normalArray = Array.prototype.slice.call(arguments) + // -- o -- + let normalArray = [].slice.call(arguments) + // -- o -- + let normalArray = Array.from(arguments) + + let first = normalArray.shift() // OK, nos da el primer argumento + let first = arguments.shift() // ERROR (arguments no es un array) +} + +// Ahora, puedes acceder fácilmente a un array usando un parametro rest. + +function f(...args) { + let normalArray = args + let first = normalArray.shift() // OK, gives the first argument +}</pre> + +<h3 id="Desestructuración_de_los_parametros_rest">Desestructuración de los parametros rest</h3> + +<p>Los parámetros rest pueden ser desestructurados, eso significa que sus datos pueden ser desempaquetados dentro de distintas variables. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a>.</p> + +<pre class="notranslate"><code>function f(...[a, b, c]) { + return a + b + c; +} + +f(1) // NaN (b y c son indefinidos) +f(1, 2, 3) // 6 +f(1, 2, 3, 4) // 6 (el cuarto parámetro no está desestructurado)</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_parámetros_rest">Usando parámetros rest</h3> + +<p>En este ejemplo, el primer argumento es mapeado con 'a' y el segundo con 'b', entonces, esos argumentos nombrados, son usados normalmente</p> + +<p>De todas formas, el tercer argumento, <code>manyMoreArgs</code>, será un array que contendrá tantos argumentos como el usuario incluya (3er, 4to, 5to ...).</p> + +<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a) + console.log("b", b) + console.log("manyMoreArgs", manyMoreArgs) +} + +myFun("one", "two", "three", "four", "five", "six") + +// a, one +// b, two +// manyMoreArgs, [three, four, five, six]</pre> + +<p>Debajo... incluso si hay solo un valor, el ultimo argumento seguirá siendo colocado dentro de un array.</p> + +<pre class="brush: js notranslate">// usando la misma definición de función del ejemplo anterior +myFun("one", "two", "three") + +// a, one +// b, two +// manyMoreArgs, [three]</pre> + +<p>Debajo, el tercer argumento no esta provisto, pero <code>manyMoreArgs</code> continúa siendo un array (aunque uno vacío).</p> + +<pre class="brush: js notranslate">//usando la misma definición de función del ejemplo anterior + +myFun("one", "two") + +// a, one +// b, two +// manyMoreArgs, []</pre> + +<h3 id="Argument_length">Argument length</h3> + +<p>Puesto que <code>theArgs</code> es un array, su tamaño (un conteo de sus elementos) es dado por la propiedad <code>length</code> :</p> + +<pre class="brush: js notranslate">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3 +</pre> + +<h3 id="Ordinary_parameter_and_rest_parameters">Ordinary parameter and rest parameters</h3> + +<p>En el siguiente ejemplo, se usa un parámetro rest para agrupar dentro de un array a todos los argumentos despues del primero. Luego cada uno es multiplicado por el primero y el arreglo es retornado:</p> + +<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) { + return theArgs.map(function (element) { + return multiplier * element; + }); +} + +let arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>El siguiente ejemplo muestra que se puede usar los métodos de <code>Array</code> en los parámetros rest , pero no en el objeto <code>arguments</code>:</p> + +<pre class="brush: js notranslate">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5,3,7,1)); // muestra 1,3,5,7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // esto nunca va a ocurrir +} + +// lanza un TypeError: arguments.sort is not a function +console.log(sortArguments(5,3,7,1)); +</pre> + +<p>Para poder usar los métodos de <code>Array</code> en el objeto <code>arguments</code>, se debe convertir a un <code>Array</code> primero.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>definción inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Arreglos">Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/set/index.html b/files/es/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..33e15fbda4 --- /dev/null +++ b/files/es/web/javascript/reference/functions/set/index.html @@ -0,0 +1,218 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions/set +translation_of: Web/JavaScript/Reference/Functions/set +original_slug: Web/JavaScript/Referencia/Funciones/set +--- +<div>{{jsSidebar("Funciones")}}</div> + +<p>La sintaxis <strong><code>set</code></strong> asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><em><code>prop</code></em></dt> + <dd>El nombre de la propiedad a asociar con la función dada.</dd> +</dl> + +<dl> + <dt><em><code>val</code></em></dt> + <dd>Un alias para la variable que contiene el valor a asignar a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">propiedad</span></font>.</dd> + <dt><em><code>expression</code></em></dt> + <dd>A partir de ECMAScript 2015, se puede también usar expresiones para nombres de propiedades computados para asociar a la función dada.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>En JavaScript, un setter puede ser usado para ejecutar una función donde sea que una propiedad se intente cambiar. Los setters son regularmente usados en conjunto con getters para crear un tipo de pseudo-propiedad. No es posible tener simultáneamente un setter en una propiedad que ya tiene un valor.</p> + +<p>Tenga en cuenta lo siguiente al trabajar con setters:</p> + +<div> +<ul> + <li>Puede tener un identificador ya sea number o string;</li> + <li>Debe tener exactamente un parámentro (ver <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> para más información);</li> + <li>No debe aparecer en un objeto de notación literal con otro <code>set</code> o con otra entrada de datos con la misma propiedad.<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> y <code>{ x: ..., set x(v) { } }</code> están prohibidos )</li> +</ul> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Definiendo_un_setter_en_el_inicializador_de_nuevos_objetos">Definiendo un setter en el inicializador de nuevos objetos</h3> + +<p>En el siguiente ejemplo definimos una pseudo-propiedad <code>actual</code> al objeto <code>lenguaje</code>. Cuando se le asigne un valor a <code>actual</code>, actualiza <code>log</code> con ese valor:</p> + +<pre class="brush: js notranslate">var lenguaje = { + set actual(mensaje) { + this.log.push(mensaje); + }, + log: [] +} +lenguaje.actual='ES'; +console.log(lenguaje.log); // ['ES'] + +lenguaje.actual='FR'; +console.log(lenguaje.log); // ['ES', 'FR'] +</pre> + + + +<p>Note que <code>actual</code> no está definido y cualquier intento de accederlo devolverá <code>undefined</code>.</p> + +<h3 id="Eliminando_un_setter_con_el_operador_delete">Eliminando un setter con el operador <code>delete</code> </h3> + +<p>Si desea eliminar el setter, puede simplemente aplicar <a href="/es/docs/Web/JavaScript/Referencia/Operadores/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> en él:</p> + +<pre class="brush: js notranslate">delete lenguaje.actual; +</pre> + +<h3 id="Definiendo_un_setter_en_un_objecto_existente_usando_defineProperty">Definiendo un setter en un objecto existente usando <code>defineProperty</code></h3> + +<p>Para añadir un setter a un objeto <em>existente</em>,<em> </em>use {{jsxref("Object.defineProperty()")}}</p> + +<pre class="brush: js notranslate">consr o = {a: 0}; + +Object.defineProperty(o, 'b', { + set: function (x) { this.a = x / 2; } +}); + +o.b = 10; // Ejecuta el setter, el cual asigna 10 / 2 (5) a la propiedad 'a' +console.log(o.a) // 5</pre> + +<h3 id="Usando_un_nombre_de_propiedad_computado">Usando un nombre de propiedad computado</h3> + +<div class="note"> +<p><strong>Nota:</strong> Propiedades computadas son 'experimental technology'<em>,</em> parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.</p> +</div> + +<pre class="brush: js notranslate">const expr = 'foo'; + +var obj = { + baz: 'bar', + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = "baz"; // ejecuta el setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Se añaden las propiedades computadas.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>9.5</td> + <td>3</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_para_SpiderMonkey-specific">Notas específicas para SpiderMonkey-specific</h2> + +<ul> + <li>Comenzando con<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>, los setters ya no son llamados cuando se definen las propiedades en los inicializadores de objetos y arrays.</li> + <li>De SpiderMonkey 38 en adelante, un setter con un {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} es un {{jsxref("SyntaxError")}} conforme a la especificación ES6.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Definiendo Getters y Setters</a> en la Guía JavaScript</li> +</ul> |