diff options
Diffstat (limited to 'files/es/web/javascript/reference/global_objects/function')
12 files changed, 1699 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/global_objects/function/apply/index.html b/files/es/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..07f47b42f2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,233 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/apply +tags: + - Function + - JavaScript + - Method + - función + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <strong>apply()</strong> invoca una determinada función asignando explícitamente el objeto <strong>this</strong> y un array o similar (<a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>) como parámetros (<strong>argumentos)</strong> para dicha función.</p> + +<div class="note"><strong>NOTA:</strong> Aunque la sintaxis de esta función es casi idéntica a {{jsxref("Function.call", "call()")}}, la diferencia fundamental es que <code>call()</code> acepta una lista de argumentos, mientras que <code>apply()</code> acepta un simple array con los argumentos.</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>fun</em>.apply(<em>thisArg</em>[, <em>argsArray</em>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>El valor del objeto <strong>this</strong> a utilizar dentro de la llamada a <em>fun</em>. Cabe mencionar que éste puede no ser el valor visto por el método: si el método es una función del tipo {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} o {{jsxref("Global_Objects/undefined", "undefined")}} será reemplazado por el objeto global, y los valores primitivos serán encapsulados.</dd> + <dt><code>argsArray</code></dt> + <dd>Un objeto similar a un array (<a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>), que contiene los parámetros con los que será llamada <em><code>fun</code></em>, o <code>null</code> o {{jsxref("undefined")}} si ningún argumento es estipulado. Desde la versión 5 de ECMAScript estos parámetros pueden estar en un objeto similar a un array en lugar de un array. Véase {{anch("Browser_compatibility", "browser compatibility")}} para mayor información.</dd> + <dt> + <h3 id="Valor_de_retorno">Valor de retorno</h3> + + <p>El resultado de llamar a la función con el valor dado <code><strong>this</strong></code> y argumentos.</p> + </dt> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Puede estipularse un objeto <code>this</code> diferente al llamar una función. <code>this</code> se refiere al objeto actual, el objeto haciendo la llamada. Con <code>apply</code>, puede escribirse un método una vez y heredarlo a otro objeto, sin necesidad de reescribir el método para adecuarlo al nuevo objeto.</p> + +<p><code>apply</code> es muy similar a {{jsxref("Function.call", "call()")}}, excepto por el tipo de argumentos que soporta. Puede utilizarse un arreglo de parámetros en lugar de un conjunto de pares nombre-valor. Con <code>apply</code>, puede utilizarse un arreglo literal, por ejemplo, <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, o un objeto <code>Array</code>, por ejemplo, <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p> + +<p>Puede también utilizarse {{jsxref("Funciones/arguments", "arguments")}} como parámetro <code>argsArray</code>. <code>arguments</code> es una variable local a la función. Puede utilizarse para acceder a todos los argumentos no específicados en la llamada al objeto. Por lo tanto, no se requiere conocer todos los argumentos del objeto invocado cuando se utiliza el método <code>apply</code>. Puede utilizarse <code>arguments</code> para pasar los argumentos al objeto invocado. El objeto invocado es entonces responsable por el manejo de los argumentos.</p> + +<p>Desde la 5ta edición de ECMAScript se puede utilizar también cualquier tipo de objeto similar a un arreglo, que en términos prácticos significa que tendrá una propiedad <code>length</code> y propiedades integer en el rango (<code>0...length)</code>. Por ejemplo, ahora puede utilizarse un {{domxref("NodeList")}} o un objeto personalizado como: <code>{'length': 2, '0': 'eat', '1': 'bananas'}</code>.</p> + +<div>{{ note("La mayoría de los navegadores, incluidos Chrome 14 e Internet Explorer 9, aún no soportan el uso de objetos similares a un array y arrojarán una excepción.") }}</div> + +<div> </div> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Using_apply_to_chain_constructors" name="Using_apply_to_chain_constructors">Utilizando <strong><code>apply</code></strong> para encadenar constructores</h3> + +<p>Puedes utilizar <code>apply</code> para encadenar {{jsxref("Operadores/new", "constructors")}} para un objeto, similar a Java. En el ejemplo siguiente se crea un método global a {{jsxref("Function")}} llamado <code>construct</code>, en cual posibilita el uso de un objeto similar a un arreglo en un constructor en lugar de una lista de argumentos.</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>Ejemplo de uso:</p> + +<pre class="brush: js">function MyConstructor () { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this["property" + nProp] = arguments[nProp]; + } +} + +var myArray = [4, "Hello world!", false]; +var myInstance = MyConstructor.construct(myArray); + +alert(myInstance.property1); // alerts "Hello world!" +alert(myInstance instanceof MyConstructor); // alerts "true" +alert(myInstance.constructor); // alerts "MyConstructor"</pre> + +<div class="note"><strong>Nota:</strong> El método <code>Function.construct</code> no nativo no funcionará con algunos constructores nativos (como {{jsxref("Date")}}, por ejemplo). En estos casos se deberá utilizar el método {{jsxref("Function.bind")}} (por ejemplo, supóngase un arreglo como el siguiente para utilizar con el constructor <code>Date</code>: <code>[2012, 11, 4]</code>; en este caso se tendría que escribir algo como: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – de cualquier manera, ésta no es la mejor manera de hacerlo y probablemente no debería utilizarse en ningún entorno en producción).</div> + +<h3 id="apply_and_built-in_functions" name="apply_and_built-in_functions"><strong><code>apply</code></strong> y funciones <strong>built-in</strong></h3> + +<p>El uso inteligente de <strong><code>apply</code></strong> permite utilizar funciones built-in para algunas tareas que, de otra manera, habrían sido escritas recorriendo los valores del arreglo dentro de un bucle. Como ejemplo, vamos a utilizar <code>Math.max</code>/<code>Math.min </code>para encontrar el máximo/mínimo valor en un arreglo.</p> + +<pre class="brush: js">/* min/max number in an array */ +var numbers = [5, 6, 2, 3, 7]; + +/* using Math.min/Math.max apply */ +var max = Math.max.apply(null, numbers); /* This about equal to Math.max(numbers[0], ...) or Math.max(5, 6, ..) */ +var min = Math.min.apply(null, numbers); + +/* vs. simple loop based algorithm */ +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) + max = numbers[i]; + if (numbers[i] < min) + min = numbers[i]; +}</pre> + +<p>Pero cuidado: utilizando <code>apply</code> de esta manera estás corriendo el riesgo de exceder el límite de argumentos permitido por el motor de JavaScript. Las consecuencias de aplicar una función con demasiados argumentos (imagínate más de decenas de miles de argumentos) varían entre los distintos motores (JavaScriptCore tiene un <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">límite de argumentos fijo de 65536</a>), porque el límite (de hecho, incluso el comportamiento de cualquier pila excesivamente larga) no está especificado. Algunos motores lanzarán una excepción. Más perniciosamente, otros limitarán de manera arbitraria el número de argumentos que se están pasando en realidad a la función. (Para ilustrar este último caso: si un motor tuviera un límite de cuatro argumentos [por supuesto, los límites reales son significamente mayores], sería como si los argumentos 5, 6, 2 y 3 hubieran sido pasados a <code>apply</code> en los ejemplos anteriores, en lugar del arreglo completo). Si el valor de tu arreglo pudiera crecer en decenas de miles, utiliza una estrategia híbrida: aplica a tu función trozos del array a la vez:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]);</pre> + +<h3 id="Utilizando_apply_en_monkey-patching">Utilizando apply en "monkey-patching" </h3> + +<p>(Reemplazando de manera dinámica los argumentos en tiempo de ejecución)</p> + +<p><code>apply </code>puede ser la mejor manera de reemplazar dinámicamente una función 'built-in' de Firefox, o de una librería de JavaScript. Dada una función <code>someobject.foo</code>, puedes modificar la función de una forma 'hacker', como ésta:</p> + +<pre><code>var originalfoo = someobject.foo; +someobject.foo = function() { + // Haz algo antes de llamar a la función + console.log(arguments); + // Llama a la función como la hubieras llamado normalmente + originalfoo.apply(this, arguments); + // Aquí, ejecuta algo después +}</code></pre> + +<p>Este método es especialmente útil cuando quieres depurar eventos, o interfaces con algún elemento que no tiene API, al igual que los diversos <code>.on</code> (eventos<code> [event]..., </code>como los que se usan en el <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>)</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición Inicial. Implementada in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<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> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{jsxref("Funciones/arguments", "arguments")}} objetos</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/arguments/index.html b/files/es/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..f0f8f6ca90 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,44 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Referencia/Objetos_globales/Function/arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef("Objetos_globales", "Function")}} {{deprecated_header}}</div> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Un objeto de tipo arreglo correspondiente a los argumentos pasados a la función.</p> + +<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3> + +<p>Use el objeto <code><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments">arguments</a></code> disponible dentro de las funciones en vez de <code>Function.arguments</code>.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>En caso de recursividad, es decir, si la función <code>f</code> aparece varias veces en la pila de llamada, el valor de <code>f.arguments</code> representa los argumentos correspondientes a la invocación más reciente de la función.</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">function f(n) { g(n-1) } +function g(n) { + print("antes: " + g.arguments[0]); + if(n>0) + f(n); + print("después: " + g.arguments[0]); +} +f(2) +</pre> + +<p>resultados:</p> + +<pre class="eval">antes: 1 +antes: 0 +después: 0 +después: 1 +</pre> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Function/arguments", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Function/arguments" } ) }}</p> diff --git a/files/es/web/javascript/reference/global_objects/function/bind/index.html b/files/es/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..bdc7b5b73c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,293 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/bind +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef("Global_Objects", "Function")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <code><strong>bind()</strong></code> crea una nueva función, que cuando es llamada, asigna a su operador <em>this</em> el valor entregado, con una secuencia de argumentos dados precediendo a cualquiera entregados cuando la función es llamada. </p> + +<p>El valor de <em>this</em> es ignorado cuando la función es llamada con el operador <em>new</em>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>fun</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre> + +<h3 id="Parameters" name="Parameters">Parametros</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Es un valor que será enviado a la función destino cuando se llame a la función de enlace. Este valor será ignorado si la función de enlace es construida usando el operador {{jsxref("Operators/new", "new")}}.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Son los argumentos que se enviarán además de los provistos a la función de enlace cuando se invoque la función destino.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una copia de la función entregada con el valor especificado <code>this </code>y los argumentos iniciales.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>La función <code>bind()</code> crea una nueva función (<strong>función ligada</strong>) con el mismo cuerpo (propiedad interna {{jsxref("Function.prototype.call", "call")}} en términos de ECMAScript 5) como la función que será llamada (la <strong>función objetivo</strong> de la función ligada) con la referencia <code>this</code> asociada al primer argumento de <code>bind()</code>, el cual no podrá ser sobreescrito. <code>bind()</code> también acepta parámetros predeterminados que antecederán al resto de los parámetros específicos cuando la función objetivo sea llamada. Una función ligada también puede ser construída utilizando el operador {{jsxref("Operators/new", "new")}}: al hacerlo, actuará como si en su lugar hubiera sido construída la función objetivo.</p> + +<p>En este último caso, el parámetro correspondiente para <code>this</code> será ignorado, aunque los parámetros predeterminados que antecederán al resto sí serán provistos para la función emulada.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Ejemplo_Crear_una_función_ligada">Ejemplo: Crear una función ligada</h3> + +<p>El uso más simple de <code>bind()</code> es hacer que una función que, sin importar cómo es llamada, siempre apunte al mismo objeto con la referencia <code>this</code>. Un error común para nuevos programadores de JavaScript es que obtienen una referencia a un método de un objeto, posteriormente ejecutan ese método desde la referencia externa y esperan que la referencia de <code>this</code> siga apuntando al objeto original de donde se obtuvo el método (v.g. cuando se usa ese método en un callback). Sin el debido cuidado, el objeto original es comúnmente perdido. Creando una función ligada desde la función empleando el objeto original, resuelve limpiamente este problema:</p> + +<pre class="brush: js">this.x = 9; +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var getX = module.getX; +getX(); // 9, porque en este caso, "this" apunta al objeto global + +// Crear una nueva función con 'this' asociado al objeto original 'module' +var boundGetX = getX.bind(module); +boundGetX(); // 81</pre> + +<h3 id="Ejemplo_Funciones_Parciales">Ejemplo: Funciones Parciales</h3> + +<p>El siguiente uso simple de <code>bind()</code> es definir una función con argumentos predeterminados que precederán a los argumentos finales de la función ligada. Estos argumentos iniciales (en caso de haberlos) se definen a continuación de lo que será la referencia de <code>this</code> y son entonces enviados como argumentos de la función objetivo, seguidos por los argumentos enviados a la función ligada cada vez que dicha función sea llamada.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +// Crear funcion (sin referencia this) con argumento inicial predeterminado +var leadingThirtysevenList = list.bind(undefined, 37); + +var list2 = leadingThirtysevenList(); // [37] +var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] +</pre> + +<h3 id="Ejemplo_Con_setTimeout">Ejemplo: Con setTimeout</h3> + +<p>De manera predeterminada, dentro de {{ domxref("window.setTimeout()") }}, la palabra reservada <code>this</code> será setteada al objeto {{ domxref("window") }} (o a global). Cuando se esté trabajando con métodos de clase que requieran que <code>this</code> se refiera a instancias de clase, usted puede explícitamente ligar <code>this</code> a la función callback para mantener la referencia de la instancia.</p> + +<pre class="brush: js">function LateBloomer() { + this.petalCount = Math.ceil(Math.random() * 12) + 1; +} + +// Declare bloom after a delay of 1 second +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log('I am a beautiful flower with ' + + this.petalCount + ' petals!'); +}; +</pre> + +<h3 id="Ejemplo_Funciones_ligadas_usadas_como_constructores">Ejemplo: Funciones ligadas usadas como constructores</h3> + +<div class="warning"> +<p><strong>Advetencia:</strong> Esta sección demuestra las capacidades de JavaScript y documenta algunos usos extremos del método <code>bind()</code>. Los métodos mostrados a continuación no son la mejor forma de hacer las cosas y probablemente no deberían ser utilizados en ningún ambiente productivo.</p> +</div> + +<p>Las funciones ligadas son automáticamente adecuadas para usarse con el operador {{jsxref("Operators/new", "new")}} para construir nuevas instancias creadas por la función objetivo. Cuando una función ligada es utilizada para construir un valor, el parámetro enviado para reemplazar la referencia <code>this</code> es ignorado. De cualquier forma, los argumentos iniciales sí son tomados en consideración y antecederán a los parámetros que se envíen al constructor:</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + ',' + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // '1,2' + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0/*x*/); +// not supported in the polyfill below, +// works fine with native bind: +var YAxisPoint = Point.bind(null, 0/*x*/); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // true +</pre> + +<p>Note que no necesita hacer nada especial para crear una función ligada para usarse con {{jsxref("Operators/new", "new")}}. El razonamiento es que usted no necesita hacer nada especial para crear una función ligada para ser llamada planamente, aún si usted prefiriera requerir que la función ligada sea llamada únicamente utilizando {{jsxref("Operators/new", "new")}}.</p> + +<pre class="brush: js">// Ejemplo que puede ser ejecutado directamente en tu consola JavaScript +// ...continúa de arriba + +// Aún puede ser invocada como una función normal +// (aunque es usualmente indeseable) +YAxisPoint(13); + +emptyObj.x + ',' + emptyObj.y; +// > '0,13' +</pre> + +<p>Si desea utilizar una función ligada únicamente usando {{jsxref("Operators/new", "new")}}, o únicamente mediante una llamada directa, la función objetivo debe forzar esa restricción.</p> + +<h3 id="Example:_Creating_shortcuts" name="Example:_Creating_shortcuts">Ejemplo: Crear atajos</h3> + +<p><code>bind()</code> también es útil en casos en los que desea crear un atajo para una función que requiere una referencia específica para <code>this</code>.</p> + +<p>Tomando {{jsxref("Array.prototype.slice")}}, por ejemplo, el cual se desearía utilizar para convertir un objeto tipo array a un arreglo real. Podría crear un atajo como el siguiente:</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... + +slice.call(arguments); +</pre> + +<p>Con <code>bind()</code>, esto puede ser simplificado. En el siguiente fragmento de código, <code>slice</code> es una función ligada a la función {{jsxref("Function.prototype.call()", "call()")}} de {{jsxref("Function.prototype")}}, con la referencia <code>this</code> setteada a la función {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Esto significa que llamadas adicionales a <code>call()</code> pueden omitirse:</p> + +<pre class="brush: js">// same as "slice" in the previous example +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>La función <code>bind()</code> fue añadida a la especificación ECMA-262, 5a edición; por lo tanto podría no estar presente en todos los navegadores. Usted puede parcialmente simularla al insertar el siguiente código al inicio de sus scripts, permitiendo emplear muchas de las funcionalidades de <code>bind()</code> en implementaciones que no la soportan nativamente.</p> + +<pre class="brush: js">if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP && oThis + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; +} +</pre> + +<p>Algunas de las muchas diferencias (bien podría haber otras, en tanto la siguiente lista no intenta ser exhaustiva) entre este algoritmo y el algoritmo de la especificación son:</p> + +<ul> + <li>La implementación parcial se basa en {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} y {{jsxref("Function.prototype.apply()")}}, métodos incorporados para tener sus valores originales.</li> + <li>La implementación parcial crea funciones que no tienen "poison pills" inmutables {{jsxref("Function.caller", "caller")}} y las propiedades de los <code>argumentos</code> que lanzan una {{jsxref("Global_Objects/TypeError", "TypeError")}} sobre get, set, o deletion. (Esto podría ser añadido si la implementación soportara {{jsxref("Object.defineProperty")}}, o parcialmente implementada [sin el comportamiento throw-on-delete] si la implementación soportara las extensiones {{jsxref("Object.defineGetter", "__defineGetter__")}} y {{jsxref("Object.defineSetter", "__defineSetter__")}} ).</li> + <li>La implementación parcial crea funciones que tienen una propiedad <code>prototype</code>. (Las funciones ligadas no tienen ninguna).</li> + <li>La implementación parcial crea funciones ligadas cuya propiedad {{jsxref("Function.length", "length")}} no coincide con la indicada por ECMA-262: ésta crea funciones con longitud 0, mientras que la implementación completa, dependiendo de la longitud de la función objetivo y del número de argumentos pre-especificados, podría regresar una longitud mayor a zero.</li> +</ul> + +<p>Si elige usar esta implementación parcial,<strong> no debe de utilizarla en los casos en los que el comportamiento es distinto al de la especificación ECMA-262, 5th edition!</strong> Con un poco de cuidado, de cualquier manera (y tal vez con algunas modificaciones adicionales para adecuarse a sus necesidades específicas), esta implementación parcial podría ser un puente razonable al momento en que <code>bind()</code> sea ampliamente implementada acorde a a la especificación.</p> + +<p>Por favor checa <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> para ver una solución más profunda.</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">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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("7")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5.1.4")}}</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>{{CompatAndroid("4.0")}}</td> + <td>{{CompatChrome("0.16")}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile("11.50")}}</td> + <td>{{CompatSafari("6.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/call/index.html b/files/es/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..4200c5d2a5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,113 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/call +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El método <strong><code>call()</code></strong> llama a una función con un valor dado <code>this</code> y con argumentos provistos individualmente.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><em>function</em>.call(<em>thisArg</em>[, <em>arg1</em>[, <em>arg2</em>[, ...]]])</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code><em>thisArg</em></code> {{optional_inline}}</dt> + <dd>El valor a usar como <code>this</code> cuando se llama a <em><code>function</code></em>.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Cuidado:</strong> En ciertos casos, <code><em>thisArg</em></code> puede no ser el valor actual visto por el método.</p> + + <p>Si el método es una función en {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} y {{jsxref("Global_Objects/undefined", "undefined")}} serán reemplazados con el objeto global, y valores primitivos serán convertidos a objetos.</p> + </div> + </dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Argumentos para el objeto.</dd> + <dt> + <h3 id="Valor_de_retorno">Valor de retorno</h3> + </dt> + <dd>El resultado de llamar a la función con el <code>this</code> especificado y los argumentos.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><code>call()</code> permite que una función/método que pertenece a un objeto, ser asignada y llamada para un objeto diferente.</p> + +<p><code>call()</code> provee un nuevo valor de <code>this</code> a la función/método. Con <code>call()</code>, puedes escribir un método ona vez y heredarlo a otro objeto, sin tener que reescribir el método en el nuevo objeto.</p> + +<div class="note"><strong>Nota:</strong> Mientras la sintaxis de esta función es casi identica a la función {{jsxref("Function.apply", "apply()")}}, la diferencia fundamental es que <code>call()</code> acepta una <strong>lista de argumentos</strong>, mientras <code>apply()</code> accepta un <strong>arreglo sencillo de argumentos</strong>.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_call_para_encadenar_constructores_para_un_objeto">Usando <code>call</code> para encadenar constructores para un objeto</h3> + +<p>Puede usar <code>call</code> para encadenar constructores para un objeto (similar a Java).</p> + +<p>En el siguiente ejemplo, el constructor para el objeto <code>Producto</code> es definido con dos parametros, <code>nombre</code> y <code>precio</code>.</p> + +<p>Otras dos funciones <code>Comida</code> y <code>Juguete</code> invocan a <code>Producto</code>, pasándo <code>this</code>, <code>nombre</code> y <code>precio</code>. <code>Producto</code> inicializa las propiedades <code>nombre</code> y <code>precio</code>, ambas funciones especializadas definen la <code>categoria</code>.</p> + +<pre class="brush: js notranslate">function Producto(nombre, precio) { + this.nombre = nombre; + this.precio = precio; + + if (precio < 0) + throw RangeError('No se puede crear el producto "' + nombre + '" con un precio negativo'); + return this; +} + +function Comida(nombre, precio) { + Producto.call(this, nombre, precio); + this.categoria = 'comida'; +} +Comida.prototype = new Producto(); + +function Juguete(nombre, precio) { + Producto.call(this, nombre, precio); + this.categoria = 'juguete'; +} +Juguete.prototype = new Producto(); + +var queso = new Comida('feta', 5); +var diversion = new Juguete('robot', 40); +</pre> + +<h3 id="Usando_call_para_invocar_una_función_anónima">Usando <code>call</code> para invocar una función anónima</h3> + +<p>En este ejemplo, creamos una función anónima y usamos <code>call</code> para invocarla en cada objeto en un arreglo.</p> + +<p>El propósito principal de la función anónima aquí es agregar una función <code>print</code> a cada objeto, el cual puede imprimir el índice correcto en el arreglo.</p> + +<div class="blockIndicator note"> +<p>Pasar el objeto como valor <code>this</code> no es estrictamente necesario, pero se hace con propósito explicativo.</p> +</div> + +<pre class="brush: js notranslate">var animales = [ + {especie: 'Leon', nombre: 'Rey'}, + {especie: 'Whale', nombre: 'Fail'} +]; + +for (var i = 0; i < animales.length; i++) { + (function (i) { + this.imprimir = function () { + console.log('#' + i + ' ' + this.especie + ': ' + this.nombre); + } + this.imprimir(); + }).call(animales[i], i); +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/caller/index.html b/files/es/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..942df69a68 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,128 @@ +--- +title: Function.caller +slug: Web/JavaScript/Referencia/Objetos_globales/Function/caller +tags: + - Función Javascript No-standard Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef("Global_Objects", "Function")}} {{non-standard_header}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad <code><strong><em>function</em>.caller</strong></code> retorna la función que llamó a la función especificada.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Si la función <code>f</code> fue llamada por desde nivel raiz (top level code), el valor de <code>f.caller</code> es {{jsxref("Global_Objects/null", "null")}}, de lo contrario se retorna la función que llamó a <code>f</code>.</p> + +<p>Esta propiedad reemplaza a la propiedad obsoleta {{jsxref("Functions_and_function_scope/arguments/caller", "arguments.caller")}} del objeto {{jsxref("Funciones/arguments", "arguments")}}.</p> + +<p>la propiedad especial <code>__caller__</code>, la cual retornaba el objeto de activación del llamador y permitía reconstruir la pila de llamadas, ha sido removida por motivos de seguridad.</p> + +<h3 id="Notes" name="Notes">Notas</h3> + +<p>En caso de recursión se puede reconstruir la pila de llamada utilizando esta propiedad, tal como se muestra a continuación:</p> + +<pre class="brush: js">function f(n) { g(n - 1); } +function g(n) { if (n > 0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p>Al momento de ejecutar <code>stop()</code> este se llama con la siguiente pila de llamadas:</p> + +<pre class="eval">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>Siendo verdadero la siguiente consideración:</p> + +<pre class="eval">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>Por lo tanto si se intenta obtener el rastro de llamadas (stack trace) de la función <code>stop()</code> como se muestra a continuación:</p> + +<pre class="brush: js">var f = stop; +var stack = 'Stack trace:'; +while (f) { + stack += '\n' + f.name; + f = f.caller; +} +</pre> + +<p>se provocará una bucle que nunca termina.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Checking_the_value_of_a_function.27s_caller_property" name="Example:_Checking_the_value_of_a_function.27s_caller_property">Ejemplo: Verificar el valor de la propiedad <code>caller</code> de una función</h3> + +<p>El siguiente código verifica el valor de la propiedad <code>caller</code> de una función.</p> + +<pre class="brush: js">function myFunc() { + if (myFunc.caller == null) { + return 'The function was called from the top!'; + } else { + return 'This function\'s caller was ' + myFunc.caller; + } +} +</pre> + +<h2 id="Especificación">Especificación</h2> + +<p>No es parte de ninguna especificación. Se implementa en JavaScript 1.5.</p> + +<h2 id="Compatiblilidad_de_Navegadores">Compatiblilidad de Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</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>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>Problema de implementación para SpiderMonkey {{bug(65683)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/displayname/index.html b/files/es/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..d464266838 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,77 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Referencia/Objetos_globales/Function/displayName +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>The <code><strong><em>function</em>.displayName</strong></code> property returns the display name of the function.</p> + +<h2 id="Description">Description</h2> + +<p>Cuando se define la propiedad <code>displayName</code> , retorna un mensaje con el nombre para mostrar en una función:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Show Popup'; + +console.log(popup.displayName); // "Show Popup" +</pre> + +<p>Tu puedes definir una funcion con un nombre a mostrar en un {{jsxref("Functions", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // logs "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<p>Puedes cambiar dinámicamente el <code>displayName</code> de una función:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function(value) { + arguments.callee.displayName = 'someMethod (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "someMethod (123)" +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Normalmente, se prefiere por consolas y profilers sobre {{jsxref("Function.name", "func.name")}} a mostrar el nombre de una función.</p> + +<p>Al ingresar lo siguiente en una consola, debería mostrarse como algo así como "<code>function My Function()</code>":</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of any specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.displayName")}}</p> +</div> + +<div> </div> diff --git a/files/es/web/javascript/reference/global_objects/function/function/index.html b/files/es/web/javascript/reference/global_objects/function/function/index.html new file mode 100644 index 0000000000..af4dff0361 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/function/index.html @@ -0,0 +1,92 @@ +--- +title: Function() constructor +slug: Web/JavaScript/Referencia/Objetos_globales/Function/Función +tags: + - Constructor + - Function + - JavaScript + - Referencia + - función +translation_of: Web/JavaScript/Reference/Global_Objects/Function/Function +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<p><span class="seoSummary">El constructor <strong><code>Function</code></strong> crea un nuevo <strong>objeto</strong> <code>Function</code>. Llamar al constructor directamente puede crear funciones dinámicamente, pero tiene problemas de seguridad y de rendimiento similares (pero mucho menos importantes) para {{jsxref("eval")}}. Sin embargo, a diferencia de eval, el constructor <code>Function</code> crea funciones que solo se ejecutan en el ámbito global.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html","shorter")}}</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"><code>new Function([<var>arg1 </var>[, <var>arg2 </var>[, ...<var>argN</var>]] ,] <var>functionBody</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>arg1</var>, <var>arg2</var>, ... <var>argN</var></code></dt> + <dd>Nombres que utilizará la función como nombres de argumentos formales. Cada uno debe ser una cadena que corresponda a un identificador JavaScript válido, o una lista de dichas cadenas separadas por una coma. Por ejemplo: "<code>x</code>", "<code>theValue</code>" —o "<code>x,theValue</code>".</dd> + <dt><code><var>functionBody</var></code></dt> + <dd>Una cadena que contiene las declaraciones de JavaScript que comprenden la definición de función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Los objetos <code>Function</code> creados con el constructor <code>Function</code> se procesan cuando se crea la función. Esto es menos eficiente que declarar una función con una {{jsxref("Operators/function", "expresión de función")}} o {{jsxref("Statements/function", "declaración de función")}} y llamarla dentro de tu código porque tales funciones se procesan con el resto del código.</p> + +<p>Todos los argumentos pasados a la función se tratan como los nombres de los identificadores de los parámetros en la función que se va a crear, en el orden en que se pasan. Omitir un argumento dará como resultado que el valor de ese parámetro sea <code>undefined</code>.</p> + +<p>Invocar el constructor <code>Function</code> como función (sin usar el operador <code>new</code>) tiene el mismo efecto que invocarlo como constructor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Especificar_argumentos_con_el_constructor_Function">Especificar argumentos con el constructor Function</h3> + +<p>El siguiente código crea un objeto <code>Function</code> que toma dos argumentos.</p> + +<pre class="brush: js notranslate">// El ejemplo se puede ejecutar directamente en tu consola JavaScript + +// Crea una función que toma dos argumentos y devuelve la suma de esos argumentos +const adder = new Function('a', 'b', 'return a + b'); + +// Llama a la función +adder(2, 6); +// 8 +</pre> + +<p>Los argumentos "<code>a</code>" y "<code>b</code>" son nombres de argumentos formales que se utilizan en el cuerpo de la función, "<code>return a + b</code>".</p> + +<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-constructor', 'Constructor Function')}}</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.builtins.Function.Function")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Functions", "Funciones y ámbito de la función", "", 1)}}</li> + <li>{{jsxref("Statements/function", "Declaración de function")}}</li> + <li>{{jsxref("Operators/function*", "Expresión function*")}}</li> + <li>{{jsxref("Statements/function", "Declaración de function*")}}</li> + <li>{{jsxref("Operators/function*", "Expresión function*")}}</li> + <li>{{jsxref("AsyncFunction", "Función asíncrona", "", 1)}}</li> + <li>{{jsxref("GeneratorFunction", "Función generadora", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/index.html b/files/es/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..5b586f3611 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,118 @@ +--- +title: Function +slug: Web/JavaScript/Referencia/Objetos_globales/Function +tags: + - Clase + - Class + - Declaración + - Expresión + - Function + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<p>Cada función de JavaScript en realidad es un objeto <code>Function</code>. Esto se puede ver con el código <code>(function() {}).constructor === Function</code>, que devuelve <code>true</code>.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("Function/Function", "Function()", "", 1)}}</dt> + <dd>Crea un nuevo objeto <code>Function</code>. Llamar al constructor directamente puede crear funciones dinámicamente, pero tiene problemas de seguridad y de rendimiento similares (pero mucho menos importantes) para {{jsxref("eval")}}. Sin embargo, a diferencia de <code>eval</code>, el constructor <code>Function</code> crea funciones que solo se ejecutan en el ámbito global.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}}</dt> + <dd>Un arreglo que corresponde a los argumentos pasados a una función.<br> + Esto está obsoleto como propiedad de {{jsxref("Function")}}. En su lugar, utiliza el objeto {{jsxref("Functions/arguments", "arguments", "", 1)}} (disponible dentro de la función).</dd> + <dt>{{jsxref("Function.caller")}}</dt> + <dd>Especifica la función que invocó a la función que se está ejecutando actualmente.<br> + Esta propiedad está obsoleta, y solo es funcional para algunas funciones no estrictas.</dd> + <dt>{{jsxref("Function.displayName")}}</dt> + <dd>El nombre a mostrar de la función.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Especifica el número de argumentos que espera la función.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>El nombre de la función.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}}</dt> + <dd>Llama a una función y establece su <code>this</code> en el <code><var>thisArg</var></code> proporcionado. Los argumentos se pueden pasar como un objeto {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}}</dt> + <dd>Crea una nueva función que, cuando se llama, tiene su <code>this</code> configurado en el <code><var>thisArg</var></code>. Opcionalmente, una determinada secuencia de argumentos se antepondrá a los argumentos siempre que se llame a la función recién invocada.</dd> + <dt>{{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}}</dt> + <dd>Llama a una función y establece su <code>this</code> en el valor proporcionado. Los argumentos se pueden pasar tal cual.</dd> + <dt>{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el código fuente de la función.<br> + Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Diferencia_entre_el_constructor_Function_y_la_declaración_function">Diferencia entre el constructor Function y la declaración function</h3> + +<p>Las funciones creadas con el constructor <code>Function</code> no crean cierres para sus contextos de creación; siempre se crean en el ámbito global. Al ejecutarlos, solo podrán acceder a sus propias variables locales y globales, no a las del ámbito en el que se creó el constructor <code>Function</code>. Esto es diferente de usar {{jsxref("eval")}} con código para una expresión de función.</p> + +<pre class="brush: js notranslate">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // esta |x| se refiere a la |x| global +} + +function createFunction2() { + var x = 20; + function f() { + return x; // esta |x| se refiere a la |x| local + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</pre> + +<p>Si bien este código funciona en los navegadores web, <code>f1()</code> producirá un <code>ReferenceError</code> en Node.js, ya que no encontrará a <code>x</code>. Esto se debe a que el ámbito de nivel superior en Node no es el ámbito global, y <code>x</code> será local para el módulo.</p> + +<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-objects', 'Function')}}</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.builtins.Function")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Functions", "Funciones y ámbito de la función", "", 1)}}</li> + <li>Declaración {{jsxref("Statements/function", "function")}}</li> + <li>Expresión {{jsxref("Operators/function", "function")}}</li> + <li>Declaración {{jsxref("Statements/function*", "function*")}}</li> + <li>Expresión {{jsxref("Operators/function*", "function*")}}</li> + <li>{{jsxref("AsyncFunction", "Función asíncrona", "", 1)}}</li> + <li>{{jsxref("GeneratorFunction", "Función generadora", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/length/index.html b/files/es/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..7638859bba --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,151 @@ +--- +title: Function.length +slug: Web/JavaScript/Referencia/Objetos_globales/Function/length +tags: + - JavaScript + - Propiedad + - función +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef("Global_Objects", "Function")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>La propiedad <code><strong>length</strong></code> especifica el número de argumentos esperados por la función.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>length</code> es la propiedad de una función objeto, e indica el número de argumentos que una función requiere, por ejemplo, el número de parámetros formales. Este número no incluye {{jsxref("rest_parameters", "rest parameter", "", 1)}}. En cambio, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} es local a una función y aporta el número de argumentos actuales pasados a una función.</p> + +<h3 id="Propiedades_de_la_Función_constructora">Propiedades de la <code>Función</code> constructora</h3> + +<p>El {{jsxref("Global_Objects/Function", "Function")}} constructor en sí mismo es {{jsxref("Global_Objects/Function", "Function")}} un objeto. Sú <code>propiedad length</code> tiene el valor 1. Los atributos son: Grabable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p> + +<h3 id="Propiedad_de_la_Función_prototype_object">Propiedad de la <code>Función</code> prototype object</h3> + +<p>La propiedad length del {{jsxref("Global_Objects/Function", "Function")}} objeto prototype tiene el valor 0.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ +console.log((function(...args) {}).length); /* 0, resto de parámetros no se contemplan */ +console.log((function(a, b = 1, c) {}).length); /* 1, solo parámetros antes del primero con un valor por defecto son contados */ +</pre> + +<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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td><code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} constructor:<br> + {{SpecName('ES5.1', '#sec-15.3.3.2', 'Function.length')}}<br> + <code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} prototype object:<br> + {{SpecName('ES5.1', '#sec-properties-of-the-function-prototype-object', 'Function.length')}}<br> + <code>length</code> property of {{jsxref("Global_Objects/Function", "Function")}} instances:<br> + {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td><code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} constructor:<br> + {{SpecName('ES6', '#sec-function.length', 'Function.length')}}<br> + <code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} prototype object:<br> + {{SpecName('ES6', '#sec-15.3.4', 'Function.length')}}<br> + <code>length</code> property of {{jsxref("Global_Objects/Function", "Function")}} instances:<br> + {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>El atributo <code>configurable</code> de esta propiedad ahora es <code>true</code>.</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>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(37)}}</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>Característica</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>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(37)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Global_Objects/Function", "Función")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/name/index.html b/files/es/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..2440bd60f1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,223 @@ +--- +title: Function.name +slug: Web/JavaScript/Referencia/Objetos_globales/Function/name +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong><em>function</em>.name</strong></code> retorna el nombre de la función o retorna <code>"anonymous"</code> por funciones creadas anónimamente.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div>Nótese que en implementaciones no estándar previas a ES2015 el atributo <code>configurable</code> también era <code>false</code>.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Nombre_de_una_declaración_de_función">Nombre de una declaración de función</h3> + +<p>La propiedad <code>name</code> retorna el nombre de una declaración de función.</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.name); // imprime en pantalla "doSomething" +</pre> + +<h3 id="Nombre_de_constructor_de_función">Nombre de constructor de función</h3> + +<p>Las funciones creadas con la sintaxis <code>new Function(...)</code> o simplemente <code>Function(...)</code> tienen como propiedad <code>name</code> una cadena vacía. En los ejemplos a continuación se crean funciones anónimas, tales que su <code>name</code> retorna una cadena vacía:</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name == ''); // true +console.log(object.someMethod.name == ''); // también true +</pre> + +<h3 id="Nombres_de_función_inferidos">Nombres de función inferidos</h3> + +<p>Los navegadores que implementan funciones ES2015 pueden inferir el nombre de una función anónima de su posición sintáctica. Por ejemplo:</p> + +<pre class="brush: js">var f = function() {}; +console.log(f.name); // "f"</pre> + +<p>Se puede definir una función con un nombre en un {{jsxref("Operators/Function", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // imprime "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>No se puede cambiar el nombre de una función, esta propiedad es de solo lectura:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function() {} +}; + +object.someMethod.name = 'someMethod'; +console.log(object.someMethod.name); // cadena vacía, someMethod es anónimo +</pre> + +<p>Sin embargo, se puede usar {{jsxref("Object.defineProperty()")}} para cambiarlo.</p> + +<h3 id="Nombres_de_métodos">Nombres de métodos</h3> + +<pre class="brush: js">var o = { + foo(){} +}; +o.foo.name; // "foo";</pre> + +<h3 id="Nombres_de_funciones_atadas_(creadas_con_.bind())">Nombres de funciones atadas (creadas con .bind())</h3> + +<p>{{jsxref("Function.bind()")}} produce una función cuyo nombre es igual a "bound " seguido del nombre de la función original.</p> + +<pre class="brush: js">function foo() {}; +foo.bind({}).name; // "bound foo"</pre> + +<h3 id="Nombres_de_funciones_getters_y_setters">Nombres de funciones getters y setters</h3> + +<p>Cuando se usan <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> y <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a>, </code>"get" y "set" aparecerán en el nombre de la función.</p> + +<pre class="brush: js">var o = { + get foo(){}, + set foo(x){} +}; + +var descriptor = Object.getOwnPropertyDescriptor(o, "foo"); +descriptor.get.name; // "get foo" +descriptor.set.name; // "set foo";</pre> + +<h2 id="Ejemplos_2">Ejemplos</h2> + +<p>Se puede usar <code>obj.constructor.name</code> para saber cuál es la "clase" de un objeto:</p> + +<pre class="brush: js">function a() {} + +var b = new a(); + +console.log(b.constructor.name); // imprime "a" +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para versiones de IE < 9, se puede usar <code>fn._name()</code> en su lugar. Para IE9 o posteriores se puede usar el siguiente <a href="https://github.com/JamesMGreene/Function.name">polyfill</a>.</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">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</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>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(33.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Nombres inferidos en funciones anónimas</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</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>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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Nombres inferidos en funciones anónimas</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(883377)}}.</p> diff --git a/files/es/web/javascript/reference/global_objects/function/tosource/index.html b/files/es/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..3cee3c1d4c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,97 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <code><strong>toSource()</strong></code> devuelve un string representando el código fuente del objeto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>function</var>.toSource(); +Function.toSource(); +</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>toSource</code> devuelve los siguientes valores:</p> + +<ul> + <li>For the built-in {{jsxref("Function")}} object, <code>toSource()</code> devuelve la siguiente cadena indicando que el código fuente no está disponible: + + <pre class="brush: js">function Function() { + [native code] +} +</pre> + </li> + <li>En funciones personalizadas, <code>toSource()</code> devuelve el código JavaScript que define el objeto como un string.</li> +</ul> + +<p>Éste método es usado de forma interna por JavaScript y no explicitamente desde el código. Puedes usar <code>toSource</code> mientras depuras para examinar el contenido de un objeto.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No está reflejado en ningún estándar. Implementaso en JavaScript 1.3.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/tostring/index.html b/files/es/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..b5ee70147e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,130 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>toString()</strong></code> retorna una cadena representando el código fuente de la función.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>function</var>.toString(indentation)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>indentation</code> {{non-standard_inline}} {{obsolete_inline(17)}}</dt> + <dd>La cantidad de espacios a indentar en la representación de cadena del código fuente. Si <code>indentation</code> es menor o igual a <code>-1</code>, la mayoría de los espacios innecesarios son eliminados.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El objeto {{jsxref("Function")}} reconduce el método {{jsxref("Object.prototype.toString", "toString")}} heredado de {{jsxref("Object")}}; no hereda {{jsxref("Object.prototype.toString")}}. Para objetos {{jsxref("Function")}}, el método <code>toString</code> retorna una representación de cadena del objeto en forma de declaración de función. Esto es, <code>toString</code> descompila la función y la cadena retornada incluye la palabra clave <code>function</code>, la lista de argumentos, llaves y el código fuente del cuerpo de la función.</p> + +<p>JavaScript llama al método <code>toString</code> automáticamente cuando una {{jsxref("Function")}} va a ser representada como un valor de texto, p.e. cuando una función es concatenada con un valor de cadena (string).</p> + +<p>El método <code>toString()</code> producirá una excepción {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object"), si el valor de su objeto <code>this</code> no es un objeto <code>Function</code>. Esto también ocurrirá para objetos {{jsxref("Proxy")}}, por ejemplo:</p> + +<pre class="brush: js example-bad">Function.prototype.toString.call("foo"); // TypeError + +var proxy = new Proxy(function() {}, {}); +Function.prototype.toString.call(proxy); // TypeError +</pre> + +<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">Observaciones</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-15.3.4.2', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Añadidos requerimientos más específicos para la representación de cadena.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</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>Soporte básico</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>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>Soporte básico</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="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2> + +<ul> + <li>Desde Gecko 17.0 {{geckoRelease("17")}}, <code>Function.prototype.toString()</code> fue implementada salvando el código fuente de la función. El descompilador fue eliminado, de modo que el parámetro <code>indentation</code> ya no se necesita más. Ver {{bug("761723")}} para más detalles.</li> + <li>A partir de Gecko 38 {{geckoRelease("38")}}, <code>Function.prototype.toString()</code> produce error para objetos {{jsxref("Proxy")}} ({{bug(1100936)}}).</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> |