He notado que no parece ser una explicación clara de lo que el this de palabras clave y cómo está correctamente (e incorrectamente) que se utilizan en JavaScript en el Desbordamiento de la Pila sitio.

He sido testigo de algunos muy extraño comportamiento con ella y no han logrado entender por qué se ha producido.

¿Cómo this trabajo y cuándo debe utilizarse?

He encontrado esto cuando busqué en google «esto» quirksmode.org/js/this.html
Algunas de las preguntas relacionadas con * jQuery/JavaScript puntero «this» confusión * En Javascript, ¿por qué es el «este» operador incompatible? y una buena valoración crítica aquí * ámbito de aplicación/contexto en javascript
Pedro Michaux para la lucha contra el uso de this pedro.michaux.ca/artículos/javascript-widgets-sin-este
El MDN panorama no es la mitad de malo… developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/…
Una interesante explicación de la this palabras clave: rainsoft.io/suave-explicación-de-esta-en-javascript

OriginalEl autor Maxim Gershkovich | 2010-06-27

41 Comentarios

  1. 127

    La this palabra clave se comporta de forma diferente en JavaScript en comparación con otros idiomas. En lenguajes Orientados a Objetos, el this palabra clave hace referencia a la instancia actual de la clase. En JavaScript, el valor de this está determinada principalmente por el contexto de invocación de la función (context.function()) y donde se llama.

    1. Cuando se utiliza en el contexto global

    Cuando se utiliza this en el contexto global, es obligado a objeto global (window en el navegador)

    document.write(this);  //[object Window]

    Cuando se utiliza this dentro de una función definida en el contexto global, this todavía está enlazado a objeto global ya que la función es un método de contexto global.

    function f1()
    {
       return this;
    }
    document.write(f1());  //[object Window]

    Por encima de f1 se realiza un método de objeto global. Por lo tanto, podemos llamar también en window objeto de la siguiente manera:

    function f()
    {
        return this;
    }
    
    document.write(window.f()); //[object Window]

    2. Cuando se usa en el método de objeto de

    Cuando se utiliza this palabra clave dentro de un método de objeto, this está vinculado a la «inmediata», adjuntando el objeto.

    var obj = {
        name: "obj",
        f: function () {
            return this + ":" + this.name;
        }
    };
    document.write(obj.f());  //[object Object]:obj

    Arriba he puesto la palabra inmediata en comillas dobles. Es para hacer el punto de que si te nido el objeto dentro de otro objeto, entonces this está obligado a la inmediata padre.

    var obj = {
        name: "obj1",
        nestedobj: {
            name:"nestedobj",
            f: function () {
                return this + ":" + this.name;
            }
        }            
    }
    
    document.write(obj.nestedobj.f()); //[object Object]:nestedobj

    Incluso si se añade la función explícitamente al objeto como un método, que aún así sigue por encima de las reglas, que es this todavía puntos a la inmediata objeto primario.

    var obj1 = {
        name: "obj1",
    }
    
    function returnName() {
        return this + ":" + this.name;
    }
    
    obj1.f = returnName; //add method to object
    document.write(obj1.f()); //[object Object]:obj1

    3. Cuando invoque a menos del contexto de la función

    Cuando se utiliza this dentro de la función que se invoca sin ningún tipo de contexto (es decir, no sobre cualquier objeto), está vinculada a la de objeto global (window en el navegador)(incluso si la función está definida en el objeto) .

    var context = "global";
    
    var obj = {  
        context: "object",
        method: function () {                  
            function f() {
                var context = "function";
                return this + ":" +this.context; 
            };
            return f(); //invoked without context
        }
    };
    
    document.write(obj.method()); //[object Window]:global 

    Tratando con funciones

    Podemos tratar los puntos anteriores con las funciones. Sin embargo, hay algunas diferencias.

    • Anterior hemos de añadir a los objetos de uso de la notación literal de objeto. Podemos agregar miembros a funciones mediante el uso de this. para especificar ellos.
    • La notación literal de objeto, se crea una instancia de objeto que se pueden utilizar inmediatamente. Con la función podemos necesidad de crear primero su instancia mediante new operador.
    • También en un objeto literal de enfoque, se puede agregar explícitamente que los miembros ya se definió el objeto utilizando el operador punto. Esto se añade a la instancia específica solamente. Sin embargo he añadido variable para el prototipo de la función, para que se refleja en todas las instancias de la función.

    A continuación he probado todas las cosas que hicimos con el Objeto y this arriba, pero por primera función de creación en lugar de escribir directamente un objeto.

    /********************************************************************* 
    1. When you add variable to the function using this keyword, it 
    gets added to the function prototype, thus allowing all function 
    instances to have their own copy of the variables added.
    *********************************************************************/
    function functionDef()
    {
    this.name = "ObjDefinition";
    this.getName = function(){                
    return this+":"+this.name;
    }
    }        
    obj1 = new functionDef();
    document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition   
    /********************************************************************* 
    2. Members explicitly added to the function protorype also behave 
    as above: all function instances have their own copy of the 
    variable added.
    *********************************************************************/
    functionDef.prototype.version = 1;
    functionDef.prototype.getVersion = function(){
    return "v"+this.version; //see how this.version refers to the
    //version variable added through 
    //prototype
    }
    document.write(obj1.getVersion() + "<br />"); //v1
    /********************************************************************* 
    3. Illustrating that the function variables added by both above 
    ways have their own copies across function instances
    *********************************************************************/
    functionDef.prototype.incrementVersion = function(){
    this.version = this.version + 1;
    }
    var obj2 = new functionDef();
    document.write(obj2.getVersion() + "<br />"); //v1
    obj2.incrementVersion();      //incrementing version in obj2
    //does not affect obj1 version
    document.write(obj2.getVersion() + "<br />"); //v2
    document.write(obj1.getVersion() + "<br />"); //v1
    /********************************************************************* 
    4. `this` keyword refers to the immediate parent object. If you 
    nest the object through function prototype, then `this` inside 
    object refers to the nested object not the function instance
    *********************************************************************/
    functionDef.prototype.nestedObj = { name: 'nestedObj', 
    getName1 : function(){
    return this+":"+this.name;
    }                            
    };
    document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj
    /********************************************************************* 
    5. If the method is on an object's prototype chain, `this` refers 
    to the object the method was called on, as if the method was on 
    the object.
    *********************************************************************/
    var ProtoObj = { fun: function () { return this.a } };
    var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
    //as its prototype
    obj3.a = 999;                       //adding instance member to obj3
    document.write(obj3.fun()+"<br />");//999
    //calling obj3.fun() makes 
    //ProtoObj.fun() to access obj3.a as 
    //if fun() is defined on obj3

    4. Cuando se utiliza dentro de la función constructora.

    Cuando se utiliza la función como un constructor (que es cuando se llama con new palabra clave), this dentro de la función de los puntos del cuerpo para el nuevo objeto que está siendo construido.

    var myname = "global context";
    function SimpleFun()
    {
    this.myname = "simple function";
    }
    var obj1 = new SimpleFun(); //adds myname to obj1
    //1. `new` causes `this` inside the SimpleFun() to point to the
    //  object being constructed thus adding any member
    //  created inside SimipleFun() using this.membername to the
    //  object being constructed
    //2. And by default `new` makes function to return newly 
    //  constructed object if no explicit return value is specified
    document.write(obj1.myname); //simple function

    5. Cuando se utiliza dentro de la función definida en el prototipo de la cadena de

    Si el método es un objeto prototipo de la cadena, this dentro de este método se refiere al objeto, el método fue llamado, como si el método está definido en el objeto.

    var ProtoObj = {
    fun: function () {
    return this.a;
    }
    };
    //Object.create() creates object with ProtoObj as its
    //prototype and assigns it to obj3, thus making fun() 
    //to be the method on its prototype chain
    var obj3 = Object.create(ProtoObj);
    obj3.a = 999;
    document.write(obj3.fun()); //999
    //Notice that fun() is defined on obj3's prototype but 
    //`this.a` inside fun() retrieves obj3.a   

    6. Dentro de la llamada (), () y bind() funciones

    • Todos estos métodos están definidos en Function.prototype.
    • Estos métodos permite escribir una función una vez y invocarlo en un contexto diferente. En otras palabras, que permite especificar el valor de this que va a ser utilizado mientras se ejecuta la función. También se tienen los parámetros que se pasan a la función original cuando se le invoca.
    • fun.apply(obj1 [, argsArray]) Conjuntos de obj1 como el valor de this dentro de fun() y llamadas fun() pasando elementos de argsArray como sus argumentos.
    • fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) – Establece obj1 como el valor de this dentro de fun() y llamadas fun() pasando arg1, arg2, arg3, ... como sus argumentos.
    • fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) – Devuelve la referencia a la función fun con this dentro de diversión obligado a obj1 y parámetros de fun obligado a los parámetros especificados arg1, arg2, arg3,....
    • Por ahora la diferencia entre apply, call y bind debe de haber vuelto evidente. apply permite especificar los argumentos de la función como de la matriz-como objeto, es decir, un objeto con una numérico length de la propiedad y su correspondiente número entero no negativo propiedades. Mientras que call permite especificar los argumentos de la función directamente. Ambos apply y call inmediatamente se invoca la función en el contexto específico y con los argumentos especificados. Por otro lado, bind simplemente devuelve la función enlazada a la especificada this y el valor de los argumentos. Podemos captar la referencia a esta devuelta por la función de asignar a una variable y después nos puede llamar en cualquier momento.
    function add(inc1, inc2)
    {
    return this.a + inc1 + inc2;
    }
    var o = { a : 4 };
    document.write(add.call(o, 5, 6)+"<br />"); //15
    //above add.call(o,5,6) sets `this` inside
    //add() to `o` and calls add() resulting:
    //this.a + inc1 + inc2 = 
    //`o.a` i.e. 4 + 5 + 6 = 15
    document.write(add.apply(o, [5, 6]) + "<br />"); //15
    //`o.a` i.e. 4 + 5 + 6 = 15
    var g = add.bind(o, 5, 6);       //g: `o.a` i.e. 4 + 5 + 6
    document.write(g()+"<br />");    //15
    var h = add.bind(o, 5);          //h: `o.a` i.e. 4 + 5 + ?
    document.write(h(6) + "<br />"); //15
    //4 + 5 + 6 = 15
    document.write(h() + "<br />");  //NaN
    //no parameter is passed to h()
    //thus inc2 inside add() is `undefined`
    //4 + 5 + undefined = NaN</code>

    7. this dentro de los controladores de eventos

    • Al asignar la función directamente a los controladores de eventos de un elemento, el uso de this directamente dentro de la gestión de eventos de la función se refiere al elemento correspondiente. Tal función directa de la asignación se puede hacer uso de addeventListener método o a través de los eventos tradicionales métodos de registro como onclick.
    • Del mismo modo, cuando se utiliza this directamente dentro de la propiedad de evento (como <button onclick="...this..." >) del elemento, se refiere al elemento.
    • Sin embargo el uso de this indirectamente a través de otra función llamada dentro de la gestión de eventos de la función o evento de la propiedad se resuelve en el objeto global window.
    • El mismo comportamiento anterior se logra cuando asignamos una función al controlador de eventos utiliza Microsoft Registro de Sucesos del modelo de método attachEvent. En lugar de asignar la función al controlador de eventos (y por lo tanto, haciendo que el método de función del elemento), se llama a la función en el evento (efectivamente llamando en el contexto global).

    Recomiendo mejor probar esto en JSFiddle.

    <script> 
    function clickedMe() {
    alert(this + " : " + this.tagName + " : " + this.id);
    } 
    document.getElementById("button1").addEventListener("click", clickedMe, false);
    document.getElementById("button2").onclick = clickedMe;
    document.getElementById("button5").attachEvent('onclick', clickedMe);   
    </script>
    <h3>Using `this` "directly" inside event handler or event property</h3>
    <button id="button1">click() "assigned" using addEventListner() </button><br />
    <button id="button2">click() "assigned" using click() </button><br />
    <button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>
    <h3>Using `this` "indirectly" inside event handler or event property</h3>
    <button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />
    <button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />
    IE only: <button id="button5">click() "attached" using attachEvent() </button>
    «Cuando se utiliza esta dentro de una función definida en el contexto global, esto es todavía ligado a objeto global ya que la función es un método de contexto global.» es incorrecta. esto está establecido por cómo se llama a una función o por bind, no se por donde está definido. Llamar a cualquier función sin una base de referencia («contexto») por defecto esto al objeto global o permanecen indefinidos en modo estricto.
    hmm puede ser, pero me he encontrado con esta en MDN: En este caso, el valor de this no se establece la llamada. Puesto que el código no es en modo estricto, el valor de this debe ser siempre un objeto de modo que el valor predeterminado es el objeto global. Y de hecho es por eso que yo pensaba que directamente puede realizar llamada de window.f1(), lo que significa que f1() ya está conectado a window objeto, quiero decir antes de la invocación. Estoy equivocando?
    Yo estaba comentando (tal vez no con claridad, en su vinculación a la configuración de esto con «la función en realidad es un método en el contexto mundial», como si una especie de llamado window.fn, que no lo es. esto valor por defecto el objeto global porque no hay base de referencia se utiliza en la llamada, no porque de donde la función está definida (por lo que esto está todavía por cómo se llama a la función). Si usted llamar explícitamente utilizando window.fn, entonces usted es la configuración de esto de la ventana. Mismo resultado, diferente manera de ir sobre él. 🙂
    «yo he puesto la palabra inmediata…» no, tú no. Puede usted por favor revisar esto para que se corrige el error? Parece semántica para la respuesta y por lo tanto no se puede continuar la lectura hasta que se corrige el error por miedo de aprender algo incorrecto.
    hacer Ctrl+F en esta página en el navegador para encontrar la cadena «inmediata» (incluyendo las comillas) yo creo que ahí si estoy entendiendo mal u

    OriginalEl autor Mahesha999

  2. 49

    Javascript this

    Simple invocación de función

    Considere la siguiente función:

    function foo() {
    console.log("bar");
    console.log(this);
    }
    foo(); //calling the function

    Nota que estamos ejecutando este en el modo normal, es decir, el modo estricto no se utiliza.

    Cuando se ejecuta en un navegador, el valor de this sería registra como window. Esto es debido a que window es la variable global en un navegador web de su ámbito.

    Si ejecuta este mismo fragmento de código en un entorno como el de node.js, this haría referencia a la variable global en su aplicación.

    Ahora si ejecutamos este en modo estricto por la adición de la declaración de "use strict"; a los principios de la declaración de la función, this ya no se refieren a la variable global en cualquiera de los envirnoments. Esto se hace para evitar confusiones en el modo estricto. this sería, en este caso sólo tienes que entrar undefined, porque eso es lo que es, no está definido.

    En los siguientes casos, podríamos ver cómo manipular el valor de this.

    Llamar a una función en un objeto

    Hay diferentes maneras de hacer esto. Si han llamado a los métodos nativos en Javascript como forEach y slice, usted ya debe saber que el this variable en ese caso se refiere a la Object en el que se llama a esa función (tenga en cuenta que javascript, casi todo es un Object, incluyendo Arrays y Functions). Usa el siguiente código de ejemplo.

    var myObj = {key: "Obj"};
    myObj.logThis = function () {
    //I am a method
    console.log(this);
    }
    myObj.logThis(); //myObj is logged

    Si un Object contiene una propiedad que tiene una Function, la propiedad es llamada a un método. Este método, cuando se llama, siempre es this conjunto de variables para la Object la que está asociada. Esto es cierto tanto para el estricto y no estricto modos.

    Tenga en cuenta que si un método es almacenada (o más bien, copiado) en otra variable, la referencia a this es que ya no se conservan en la nueva variable. Por ejemplo:

    //continuing with the previous code snippet
    var myVar = myObj.thisMethod;
    myVar();
    //logs either of window/global/undefined based on mode of operation

    Considerando más comúnmente escenario de práctica:

    var el = document.getElementById('idOfEl');
    el.addEventListener('click', function() { console.log(this) });
    //the function called by addEventListener contains this as the reference to the element
    //so clicking on our element would log that element itself

    La new palabra clave

    Considerar un constructor de la función en Javascript:

    function Person (name) {
    this.name = name;
    this.sayHello = function () {
    console.log ("Hello", this);
    }
    }
    var awal = new Person("Awal");
    awal.sayHello();
    //In `awal.sayHello`, `this` contains the reference to the variable `awal`

    ¿Cómo funciona esto? Bien, vamos a ver lo que ocurre cuando se utiliza el new palabra clave.

    1. De llamar a la función con el new palabra clave inmediatamente initialze un Object de tipo Person.
    2. El constructor de esta Object tiene su constructor establece en Person. También, tenga en cuenta que typeof awal volvería Object sólo.
    3. Esta nueva Object se le asigna el protoype de Person.prototype. Esto significa que cualquier método o propiedad en la Person prototipo estaría disponible para todas las instancias de Person, incluyendo awal.
    4. La función Person en sí es ahora invoca; this ser una referencia a la recién construida objeto awal.

    Bastante straighforward, eh?

    Tenga en cuenta que el oficial de la especificación ECMAScript no se donde se señala que los tipos de funciones reales constructor funciones. Ellos son sólo funciones normales, y new puede ser utilizado en cualquier función. Es sólo que usamos como tal, y por eso las llamamos como tal sólo.

    Funciones de llamada Funciones : call y apply

    Así que sí, ya que functions también son Objects (y en el hecho primero de la clase de variables en Javascript), incluso las funciones de disponer de métodos que son… bueno, funciones themselved.

    Todas las funciones heredan de la global Function, y dos de sus muchos métodos son call y apply, y ambos pueden ser usados para manipular el valor de this en la función en la que están llamados.

    function foo () { console.log (this, arguments); }
    var thisArg = {myObj: "is cool"};
    foo.call(thisArg, 1, 2, 3);

    Este es un ejemplo típico de uso de call. Básicamente, tiene el primer parámetro y establece this en la función foo como una referencia a thisArg. Todos los demás parámetros que se pasan a call se pasan a la función foo como argumentos.

    Por lo que el código anterior registro de {myObj: "is cool"}, [1, 2, 3] en la consola. Muy buena forma de cambiar el valor de this en cualquier función.

    apply es casi el mismo como call aceptar que sólo toma dos parámetros: thisArg y una matriz que contiene los argumentos que se pasan a la función. Por lo que la anterior call llamada puede ser traducido a apply como este:

    foo.apply(thisArg, [1,2,3])

    Nota que call y apply puede reemplazar el valor de this establecidas por el dot de invocación de método que hemos discutido en la segunda viñeta.
    Bastante Simple 🙂

    Presentación…. bind!

    bind es un hermano de call y apply. También es un método heredado por todas las funciones desde el mundial Function constructor en Javascript. La diferencia entre bind y call/apply es que tanto call y apply realmente invocar la función. bind, por el contrario, devuelve una nueva función con la thisArg y arguments pre-establecido. Veamos un ejemplo para entender mejor este:

    function foo (a, b) {
    console.log (this, arguments);
    }
    var thisArg = {myObj: "even more cool now"};
    var bound = foo.bind(thisArg, 1, 2);
    console.log (typeof bound); //logs `function`
    console.log (bound);
    /* logs `function () { native code }` */
    bound(); //calling the function returned by `.bind`
    //logs `{myObj: "even more cool now"}, [1, 2]`

    Ver la diferencia entre los tres? Es sutil, pero se utilizan de manera diferente. Como call y apply, bind también superan el valor de this establecidas por el dot-la invocación del método.

    También tenga en cuenta que ninguna de estas tres funciones de hacer cualquier cambio en la función original. call y apply devuelve el valor de los recién construido, mientras que las funciones bind devolverá el recién construido función de sí mismo, listo para ser llamado.

    Cosas extras, copia este

    A veces, no le gusta el hecho de que this cambios con el alcance, especialmente anidada alcance. Echa un vistazo al siguiente ejemplo.

    var myObj = {
    hello: function () {
    return "world"
    },
    myMethod: function () {
    //copy this, variable names are case-sensitive
    var that = this;
    //callbacks ftw \o/
    foo.bar("args", function () {
    //I want to call `hello` here
    this.hello(); //error
    //but `this` references to `foo` damn!
    //oh wait we have a backup \o/
    that.hello(); //"world"
    });
    }
    };

    En el código anterior, podemos ver que el valor de this cambiado con anidada alcance, pero queríamos que el valor de this en el ámbito original. Así que ‘copiar’ this a that y utiliza la copia en lugar de this. Inteligente, ¿eh?

    Índice:

    1. Lo que está en this por defecto?
    2. ¿Y si llamamos a la función como un método con el Objeto de notación de punto?
    3. Lo que si usamos el new palabra clave?
    4. ¿Cómo podemos manipular this con call y apply?
    5. Utilizando bind.
    6. Copia this para resolver nested-cuestiones de ámbito.
    ¿Por qué hay una sección acerca de la new palabra clave? También esta pregunta ha sido vencer a la muerte, pero todos tenemos «que el tiempo nos trató de montar los faldones de la levita de una pregunta respondida hace 4 años»

    OriginalEl autor Awal Garg

  3. 44

    «esto» es todo acerca de alcance. Cada función tiene su propio ámbito, y puesto que todo en JS es un objeto, incluso una función puede almacenar valores en sí mismo usando el «este». La programación orientada a objetos 101 enseña que «esto» sólo es aplicable a instancias de un objeto. Por lo tanto, cada vez se ejecuta una función, una nueva «instancia» de que la función tiene un nuevo significado de «este».

    La mayoría de la gente se confunde cuando intenta utilizar «this» dentro de anónimo cierre funciones como:

    (function(value) { 
    este.valor = valor; 
    $('.algunos de los elementos').each(function(elt){ 
    elt.innerHTML = este.valor; //¡oh oh!! posiblemente no definido 
    }); 
    })(2); 
    

    Así que aquí, en el interior de cada uno ()», este» no es el «valor» que se espera (de

    este.valor = valor;

    por encima de él). Así, para obtener más de esta (ningún retruécano previsto) problema, un desarrollador podría:

    (function(value) { 
    var auto = this; //un pequeño cambio 
    auto.valor = valor; 
    $('.algunos de los elementos').each(function(elt){ 
    elt.innerHTML = auto.valor; //ufff!! == 2 
    }); 
    })(2); 
    

    Probarlo; te empiezan a gustar este patrón de programación

    «todo en JS es un objeto» no es cierto, JavaScript también tiene valores primitivos, consulte bclary.com/2004/11/07/#a-4.3.2
    Los valores primitivos parecen tener algunos de los métodos en sí mismos, como Cadena#substring(), el Número#toString(), etc.. Así, tal vez no con la misma nomenclatura que en el artículo, en realidad, se comportan como si fueran objetos (todos ellos son un prototipo, es decir. Cadena#substring() es realmente: String.el prototipo.subcadena = function(){…}). Por favor me corrija si estoy equivocado.
    El this palabra clave no tiene nada que ver con el ámbito. También, tiene un significado también en funciones que no son propiedades de los objetos.
    son dos escuelas de pensamiento sobre eso. Me gusta la que dice «todo es un objeto, pero algunos pueden ser representados por primitivas para la comodidad«. 😉
    this no es TODO sobre el ámbito de aplicación. Es TODO acerca de la ejecución de contexto, que no es lo mismo como ámbito de aplicación. JavaScript es léxicamente ámbito (significado alcance está determinado por la ubicación del código), pero this está determinado por la función que contiene se invoca – no se donde que la función es.

    OriginalEl autor arunjitsingh

  4. 15

    this en Javascript se refiere siempre a la «dueño» de la función que se ser ejecutado.

    Si no explícito del propietario se define, entonces, la parte superior de la mayoría de propietario, el objeto de la ventana, se hace referencia.

    Por lo que si hice

    function someKindOfFunction() {
    this.style = 'foo';
    }

    element.onclick = someKindOfFunction;

    this haría referencia al elemento objeto. Pero cuidado, muchas personas cometen este error

    <element onclick="someKindOfFunction()">

    En el último caso, usted se limita a hacer referencia a la función, no la mano sobre el elemento. Para ello, this hará referencia al objeto window.

    OriginalEl autor Seph

  5. 15

    Ya que este hilo se ha topado, he recopilado algunos de los puntos para los lectores nuevos a this tema.

    ¿Cómo es el valor de this determinado?

    Utilizamos esta similar a la manera en que usamos los pronombres en los lenguajes naturales, como el inglés: «Juan está corriendo más rápido porque él está tratando de coger el tren.» En su lugar se podría haber escrito «… Juan está tratando de coger el tren».

    var person = {    
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {
    //We use "this" just as in the sentence above:
    console.log(this.firstName + " " + this.lastName);
    //We could have also written:
    console.log(person.firstName + " " + person.lastName);
    }
    }

    this no se le asigna un valor hasta que un objeto se invoca la función donde está definido. En el ámbito global, todas las variables globales y funciones están definidas en el window objeto. Por lo tanto, this en una función global se refiere (y tiene el valor de) el global window objeto.

    Cuando use strict, this en global y en funciones anónimas que no están ligados a ningún objeto tiene un valor de undefined.

    La this palabra clave es la mayoría de los incomprendidos cuando: 1) tomamos prestado un método que utiliza this, 2) se le asigna un método que utiliza this a una variable, 3) una función que utiliza this se pasa como una función de devolución de llamada, y 4) this se utiliza dentro de un cierre — interior de la función. (2)

    ¿Cómo la palabra

    Qué le depara el futuro

    Definido en ECMA Script 6, flecha-funciones de adoptar la this vinculante a partir de la
    adjuntando (función o global) ámbito de aplicación.

    function foo() {
    //return an arrow function
    return (a) => {
    //`this` here is lexically inherited from `foo()`
    console.log(this.a);
    };
    }
    var obj1 = { a: 2 };
    var obj2 = { a: 3 };
    var bar = foo.call(obj1);
    bar.call( obj2 ); //2, not 3!

    Mientras flecha-funciones de proporcionar una alternativa al uso de bind(), es importante tener en cuenta que ellos son esencialmente la desactivación de la tradicional this mecanismo en favor de los más ampliamente entendido léxico de alcance. (1)


    Referencias:

    1. este & Objeto de Prototipos, por Kyle Simpson. © 2014 Getify Soluciones.
    2. javascriptissexy.com – http://goo.gl/pvl0GX
    3. Angus Croll – http://goo.gl/Z2RacU

    OriginalEl autor carlodurso

  6. 11

    Cada función el contexto de ejecución en javascript tiene un alcance contexto este parámetro que se establece por:

    1. Cómo se llama a la función (incluso como un método de objeto, el uso de llamada y aplicar, el uso de nueva)
    2. Uso de enlazar
    3. Léxicamente por la flecha de funciones (que adoptan la este de su exterior contexto de ejecución)

    Cualquier cosa que alcance contexto, se hace referencia a «este».

    Puede cambiar establece el valor de este alcance contexto el uso de func.call, func.apply o func.bind.

    Por defecto, y lo que confunde a la mayoría de los principiantes, cuando un devolución de llamada oyente se llama después de que un evento se produce en un elemento de DOM, el alcance de contexto este valor de la función es el elemento DOM.

    jQuery hace que este trivial cambiar con jQuery.proxy.

    Es un poco más correcto decir que cada función tiene un ámbito de aplicación. En otras palabras, lo que es confuso acerca de this en Javascript es que no una propiedad intrínseca de la función en sí, sino más bien un artefacto de la forma en que se invoca la función.
    gracias. ¿qué causa la mayor confusión acerca de esto en js es el hecho de que en todos los idiomas utilizados anteriormente (c#, c++), esto no puede ser manipulado n siempre apunta a la instancia del objeto, mientras que en js depende y puede ser cambiado cuando la invocación de funciones mediante func.call, func.bind etc. – Sushil
    this no no de referencia en el ámbito de una función. this hará referencia a un objeto específico (o posiblemente undefined), que como hemos dicho puede ser cambiado usando .call() o .apply(). Una función de alcance es (esencialmente, cuando simplificado) de las variables que se tiene acceso, y esto depende enteramente donde la función es declarada y no puede ser cambiado.
    «Es un poco más correcto decir que cada llamada a la función tiene un ámbito de aplicación.» Aún más correcto decir que las funciones (y ahora los bloques) han alcance, la función de llamadas contexto. El alcance define lo que los identificadores que pueden ser utilizados por el código de ese ámbito. El contexto define lo que los identificadores son limitados.
    «todo Lo que el alcance es, se hace referencia a «este».» No, this y ámbito de aplicación no tienen nada que ver el uno con el otro en ES5 y antes (por ejemplo, cuando esta respuesta fue escrito). En ES2015 (aka ES6), this y ámbito de aplicación son las relacionadas con la un bastante mínimo manera wrt flecha funciones (la this en una flecha función es heredada de su ámbito envolvente), pero this nunca se refiere a un ámbito.

    OriginalEl autor blockhead

  7. 9

    Aquí es una buena fuente de this en JavaScript.

    Aquí está el resumen:

    • global de este

      En un navegador, en el ámbito global, this es el windowobjeto

      <script type="text/javascript">
      console.log(this === window); //true
      var foo = "bar";
      console.log(this.foo); //"bar"
      console.log(window.foo); //"bar"

      En node el uso de la repl, this es la parte superior del espacio de nombres. Puede referirse a él como global.

      >this
      { ArrayBuffer: [Function: ArrayBuffer],
      Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
      Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },
      ...
      >global === this
      true

      En node la ejecución de un script, this en el ámbito global, se inicia como un objeto vacío. No es lo mismo como global

      \\test.js
      console.log(this);  \\ {}
      console.log(this === global); \\ fasle
    • función de este

    Excepto en el caso de DOM controladores de eventos o cuando un thisArg (ver más abajo), tanto en el nodo y en un explorador con this en una función que no es llamado con new referencias en el ámbito global…

    <script type="text/javascript">
    foo = "bar";
    function testThis() {
    this.foo = "foo";
    }
    console.log(this.foo); //logs "bar"
    testThis();
    console.log(this.foo); //logs "foo"
    </script>

    Si utiliza use strict;, en cuyo caso this será undefined

    <script type="text/javascript">
    foo = "bar";
    function testThis() {
    "use strict";
    this.foo = "foo";
    }
    console.log(this.foo); //logs "bar"
    testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined 
    </script>

    Si se llama a una función con new la this será un nuevo contexto, no de referencia mundial this.

    <script type="text/javascript">
    foo = "bar";
    function testThis() {
    this.foo = "foo";
    }
    console.log(this.foo); //logs "bar"
    new testThis();
    console.log(this.foo); //logs "bar"
    console.log(new testThis().foo); //logs "foo"
    </script>
    • prototipo de este

    Funciones de crear convertido en objetos de función. Se obtiene automáticamente una especial prototype de la propiedad, que es algo que usted puede asignar valores. Cuando se crea una instancia por llamar a la función con new usted consigue el acceso a los valores que se asignan a la prototype de la propiedad. Usted tiene acceso a esos valores mediante this.

    function Thing() {
    console.log(this.foo);
    }
    Thing.prototype.foo = "bar";
    var thing = new Thing(); //logs "bar"
    console.log(thing.foo);  //logs "bar"

    Suele ser un error asignar matrices o objetos en el prototype. Si desea que las instancias que tienen cada uno sus propias matrices, cree en la función, no el prototipo.

    function Thing() {
    this.things = [];
    }
    var thing1 = new Thing();
    var thing2 = new Thing();
    thing1.things.push("foo");
    console.log(thing1.things); //logs ["foo"]
    console.log(thing2.things); //logs []
    • objeto de este

    Puede utilizar this en cualquier función de un objeto para hacer referencia a otras propiedades de ese objeto. Este no es el mismo como una instancia creada con new.

    var obj = {
    foo: "bar",
    logFoo: function () {
    console.log(this.foo);
    }
    };
    obj.logFoo(); //logs "bar"
    • De eventos DOM este

    En un HTML DOM controlador de eventos, this es siempre una referencia al elemento DOM en el evento se adjunta a

    function Listener() {
    document.getElementById("foo").addEventListener("click",
    this.handleClick);
    }
    Listener.prototype.handleClick = function (event) {
    console.log(this); //logs "<div id="foo"></div>"
    }
    var listener = new Listener();
    document.getElementById("foo").click();

    A menos que usted bind el contexto

    function Listener() {
    document.getElementById("foo").addEventListener("click", 
    this.handleClick.bind(this));
    }
    Listener.prototype.handleClick = function (event) {
    console.log(this); //logs Listener {handleClick: function}
    }
    var listener = new Listener();
    document.getElementById("foo").click();
    • HTML este

    Dentro de los atributos de HTML en el que usted puede poner JavaScript, this es una referencia al elemento.

    <div id="foo" onclick="console.log(this);"></div>
    <script type="text/javascript">
    document.getElementById("foo").click(); //logs <div id="foo"...
    </script>
    • eval este

    Puede utilizar eval para acceder a this.

    function Thing () {
    }
    Thing.prototype.foo = "bar";
    Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
    }
    var thing = new Thing();
    thing.logFoo();
    • con este

    Puede utilizar with para agregar this a la actual alcance a leer y escribir a los valores this sin hacer referencia a this explícitamente.

    function Thing () {
    }
    Thing.prototype.foo = "bar";
    Thing.prototype.logFoo = function () {
    with (this) {
    console.log(foo);
    foo = "foo";
    }
    }
    var thing = new Thing();
    thing.logFoo(); //logs "bar"
    console.log(thing.foo); //logs "foo"
    • jQuery esta

    de jQuery en muchos lugares se han this se refieren a un elemento de DOM.

    <div class="foo bar1"></div>
    <div class="foo bar2"></div>
    <script type="text/javascript">
    $(".foo").each(function () {
    console.log(this); //logs <div class="foo...
    });
    $(".foo").on("click", function () {
    console.log(this); //logs <div class="foo...
    });
    $(".foo").each(function () {
    this.click();
    });
    </script>

    OriginalEl autor zangw

  8. 8

    Daniel, impresionante explicación! Un par de palabras sobre este y una buena lista de this contexto de ejecución puntero en el caso de los controladores de eventos.

    En dos palabras, this en JavaScript puntos el objeto de quién (o de cuyo contexto de ejecución) de la función se ejecute, y siempre es de sólo lectura, no se puede establecer de todos modos (por ejemplo un intento de acabar con ‘Invalid lado izquierdo de la asignación de un mensaje.

    Para los controladores de eventos: en línea de controladores de eventos, tales como <element onclick="foo">, con exclusión de cualquier otro controladores de los adjuntos anterior y antes, así que tenga cuidado y que es mejor mantenerse fuera de eventos en línea delegación.
    Y gracias a Zara Alaverdyan que me inspiró a esta lista de ejemplos a través de un disidente debate 🙂

    • el.onclick = foo; //in the foo - obj
    • el.onclick = function () {this.style.color = '#fff';} //obj
    • el.onclick = function() {doSomething();} //In the doSomething -
      Window
    • el.addEventListener('click',foo,false) //in the foo - obj
    • el.attachEvent('onclick, function () { //this }') //window, all the
      compliance to IE :)
    • <button onclick="this.style.color = '#fff';"> //obj
    • <button onclick="foo"> //In the foo - window, but you can <button
      onclick="foo(this)">

    OriginalEl autor Arman McHitarian

  9. 8

    Hay mucha confusión con respecto a cómo «este» palabra clave es interpretado en JavaScript. Esperemos que este artículo va a sentar a todos aquellos a descansar de una vez por todas. Y un montón más. Por favor leer todo el artículo con cuidado. Ten en cuenta que este artículo es largo.

    Con independencia del contexto en el que se utiliza, «este» siempre hace referencia a la «objeto actual» en Javascript. Sin embargo, lo que el «objeto actual» se difiere según contexto. El contexto puede ser exactamente 1 de los 6 siguientes:

    1. Global (es decir, Fuera de todas las funciones)
    2. Dentro Directa «No Vinculado a la Función» Llamada (es decir, una función que ha no se ha obligado llamando functionName.se unen)
    3. Dentro Indirecta «No Vinculado a la Función» Llamada a través de functionName.llame y functionName.aplicar
    4. En el interior «, Vinculados a la Función» Llamada (es decir, una función que ha sido vinculado llamando functionName.se unen)
    5. Mientras que la Creación de Objetos a través de la «nueva»
    6. Interior en línea DOM controlador de eventos

    Continuación se describe cada uno de estos contextos, uno por uno:

    1. Contexto Global (es decir, Fuera de todas las funciones):

      Fuera de todas las funciones (es decir, en el contexto global) el «actual
      objeto»
      (y por lo tanto el valor de «este») es siempre el
      «ventana» objeto para navegadores.

    2. Dentro Directa «No Vinculado A La Función» Llamada:

      Dentro de un Directo «No Vinculado a la Función» Llamada, el objeto de que
      invoca la llamada a la función se convierte en el «objeto actual»
      (y por lo tanto
      el valor de «este»). Si se llama a una función sin un explícito objeto actual, el objeto actual es el «ventana» objeto (No en Modo Estricto) o indefinido (Para el Modo Estricto) . Cualquier función (o variable), definido en el
      Contexto Global automáticamente se convierte en una propiedad de la «ventana» objeto.Para el correo.g Supongamos que la función se define en el Contexto Global como

      function UserDefinedFunction(){
      alert(this)
      }

      se convierte en la propiedad del objeto window, como si se han definido
      como

      window.UserDefinedFunction=function(){
      alert(this)
      }  

      En «No de Modo Estricto», Llamando/Invocar esta función directamente a través de «UserDefinedFunction()» llamar automáticamente a/invoke
      como «de la ventana.UserDefinedFunction()» hacer «ventana» como el
      «objeto actual» (y por lo tanto el valor de «este») dentro de «UserDefinedFunction».La invocación de esta función en «No de Modo Estricto» se producirá en el siguiente

      UserDefinedFunction() //displays [object Window]  as it automatically gets invoked as window.UserDefinedFunction()

      En «Modo Estricto», Llamando/Invocando a la función directamente a través de
      «UserDefinedFunction()» se «NO» automáticamente de llamar o invocar como «de la ventana.UserDefinedFunction()».De ahí el «actual
      objeto»
      (y el valor de «este») dentro de
      «UserDefinedFunction» será indefinido. La invocación de esta función en «Modo Estricto» se producirá en el siguiente

      UserDefinedFunction() //displays undefined

      Sin embargo, invocando explícitamente el uso de la ventana de objeto tendrá como resultado
      el siguiente

      window.UserDefinedFunction() //"always displays [object Window]   irrespective of mode."

      Veamos otro ejemplo. Por favor mira el siguiente código

       function UserDefinedFunction()
      {
      alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
      }
      var o1={
      a:1,
      b:2,
      f:UserDefinedFunction
      }
      var o2={
      c:3,
      d:4,
      f:UserDefinedFunction
      }
      o1.f() //Shall display 1,2,undefined,undefined
      o2.f() //Shall display undefined,undefined,3,4

      En el ejemplo anterior, podemos ver que cuando «UserDefinedFunction» fue
      invoca a través de o1, «este» toma el valor de o1 y la
      el valor de sus propiedades «a» y «b» obtener muestra. El valor
      de «c» y «d» se muestra como indefinido como o1 ¿
      no definir estas propiedades

      De manera similar cuando se «UserDefinedFunction» se invocan a través de o2,
      «este» toma el valor de o2 y el valor de sus propiedades «c» y «d» obtener muestra.El valor de «a» y «b» se muestra como indefinido como o2 no definir estas propiedades.

    3. Dentro Indirecta «No Vinculado a la Función» Llamada a través de functionName.llame y functionName.aplicar:

      Cuando un «No Vinculado a la Función» se llama a través de
      functionName.llame o functionName.aplicar, el «objeto actual» (y por lo tanto el valor de «este») se establece en el valor de
      «este» parámetro (primer parámetro) pasó a de llamada y aplicar. El código siguiente muestra el mismo.

      function UserDefinedFunction()
      {
      alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
      }
      var o1={
      a:1,
      b:2,
      f:UserDefinedFunction
      }
      var o2={
      c:3,
      d:4,
      f:UserDefinedFunction
      }
      UserDefinedFunction.call(o1) //Shall display 1,2,undefined,undefined
      UserDefinedFunction.apply(o1) //Shall display 1,2,undefined,undefined
      UserDefinedFunction.call(o2) //Shall display undefined,undefined,3,4
      UserDefinedFunction.apply(o2) //Shall display undefined,undefined,3,4
      o1.f.call(o2) //Shall display undefined,undefined,3,4
      o1.f.apply(o2) //Shall display undefined,undefined,3,4
      o2.f.call(o1) //Shall display 1,2,undefined,undefined
      o2.f.apply(o1) //Shall display 1,2,undefined,undefined

      El código anterior muestra claramente que el «este» valor «NO
      Vinculado a la Función» puede ser alterada a través de la de llamada y aplicar. También,si el
      «este» parámetro no está explícitamente pasa a de llamada y aplicar, «objeto actual» (y por lo tanto el valor de «este») se establece en «ventana» No de modo estricto y «undefined» en modo estricto.

    4. En el interior «, Vinculados a la Función» Llamada (es decir, una función que ha sido obligado por llamar functionName.se unen):

      Una función es una función cuyo «este» valor ha sido
      fijo. El código siguiente se demuestra cómo «este» obras en caso de que
      de obligado función

      function UserDefinedFunction()
      {
      alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
      }
      var o1={
      a:1,
      b:2,
      f:UserDefinedFunction,
      bf:null
      }
      var o2={
      c:3,
      d:4,
      f:UserDefinedFunction,
      bf:null
      }
      var bound1=UserDefinedFunction.bind(o1); //permanantly fixes "this" value of function "bound1" to Object o1
      bound1() //Shall display 1,2,undefined,undefined
      var bound2=UserDefinedFunction.bind(o2); //permanantly fixes "this" value of function "bound2" to Object o2
      bound2() //Shall display undefined,undefined,3,4
      var bound3=o1.f.bind(o2); //permanantly fixes "this" value of function "bound3" to Object o2
      bound3() //Shall display undefined,undefined,3,4
      var bound4=o2.f.bind(o1); //permanantly fixes "this" value of function "bound4" to Object o1
      bound4() //Shall display 1,2,undefined,undefined
      o1.bf=UserDefinedFunction.bind(o2) //permanantly fixes "this" value of function "o1.bf" to Object o2
      o1.bf() //Shall display undefined,undefined,3,4
      o2.bf=UserDefinedFunction.bind(o1) //permanantly fixes "this" value of function "o2.bf" to Object o1
      o2.bf() //Shall display 1,2,undefined,undefined
      bound1.call(o2) //Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
      bound1.apply(o2) //Shall still display 1,2,undefined,undefined. "apply" cannot alter the value of "this" for bound function
      o2.bf.call(o2) //Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
      o2.bf.apply(o2) //Shall still display 1,2,undefined,undefined."apply" cannot alter the value of "this" for bound function

      Como se indica en el código de arriba, «este» valor para cualquiera «, Vinculados a la Función»
      NO puede ser alterada a través de la llamada/aplicar
      . También, si el «este»
      parámetro no está explícitamente pasa a enlazar, «objeto actual»
      (y, por tanto, el valor de «este» ) se establece para «ventana» en No
      de modo estricto y «undefined» en modo estricto. Una cosa más.
      La unión de una ya obligado de la función no cambia el valor de «este».
      Queda definido como el valor establecido por primera función de enlace.

    5. Mientras que la Creación de Objetos a través de la «nueva»:

      Dentro de una función constructora de la «objeto actual» (y, por tanto, el valor de
      «este») hace referencia al objeto que está siendo creado
      a través de «nuevo» independientemente del estado de enlace de la función. Sin embargo
      si el constructor es una función que será llamada con
      conjunto predefinido de argumentos como para establecer el límite de la función.

    6. Interior en línea DOM controlador de eventos:

      Por favor mira el siguiente Fragmento de código HTML

      <button onclick='this.style.color=white'>Hello World</button>
      <div style='width:100px;height:100px;' onclick='OnDivClick(event,this)'>Hello World</div>

      La «este» en los ejemplos anteriores se refieren a «botón» elemento y el
      «div» elemento respectivamente.

      En el primer ejemplo, el color de la fuente del botón se ajustará a la
      blanco cuando se hace clic en él.

      En el segundo ejemplo, cuando el «div» elemento se hace clic en él se
      llame a la OnDivClick función con su segundo parámetro
      hace referencia al hecho clic elemento div. Sin embargo, el valor de «este»
      dentro de OnDivClick NO referencia el hecho clic div
      elemento. Será establecido como el la ventana de»objeto» o
      «undefined» en No estricta y Estricto Modos de respectivamente (si OnDivClick es un independiente de la función) o ajustada a un predefinidos
      Valor del límite (si OnDivClick es un obligado función)

    La siguiente resume el artículo completo

    1. En el Contexto Global «este» se refiere siempre a la «ventana» objeto

    2. Cuando una función se invoca, se invoca en el contexto de un
      objeto («objeto actual»). Si el objeto actual no está expresamente previsto,
      el objeto actual es el la ventana de»objeto» en NO Estrictos
      Modo de
      y «undefined» en Modo Estricto por defecto.

    3. El valor de «este» dentro de un No Obligado función es la referencia al objeto en el contexto de la cual se invoca la función («objeto actual»)

    4. El valor de «este» dentro de un No Obligado función puede ser anulada por
      llamada y aplicar métodos de la función.

    5. El valor de «este» es fijo para una función y no puede ser
      anulada por llamada y aplicar métodos de la función.

    6. De unión y ya obligado de la función no cambia el valor de «este». Queda definido como el valor establecido por primera función de enlace.

    7. El valor de «este» dentro de un constructor es el objeto que se está
      crea e inicializa

    8. El valor de «este» dentro de una línea de DOM controlador de eventos es de referencia
      para el elemento para el que el controlador de eventos es dado.

    OriginalEl autor Arup Hore

  10. 8

    Probablemente el más detallado y completo artículo sobre this es la siguiente:

    Suave explicación de ‘esta’ palabra clave ‘ en JavaScript

    La idea detrás de this es entender que la invocación de la función de los tipos tienen la importancia significativa en la configuración de this valor.


    Cuando teniendo problemas en la identificación de this, no pregúntate a ti mismo:

    Donde se this tomado de?

    pero hacer pregúntate a ti mismo:

    Cómo es la función invoca?

    Para una función de flecha (caso especial de un contexto de transparencia) pregúntate a ti mismo:

    ¿Qué valor tiene this donde la flecha función es definido?

    Esta forma de pensar es correcta cuando se trata con this y te ahorrará dolores de cabeza.

    OriginalEl autor Dmitri Pavlutin

  11. 6

    Esta es la mejor explicación que he visto. Entender JavaScripts con Claridad

    La este de referencia SIEMPRE se refiere (y tiene el valor de una
    objeto—un objeto singular—y generalmente es usado dentro de una función o de un
    el método, aunque también puede ser utilizado fuera de una función en el mundial
    ámbito de aplicación. Tenga en cuenta que cuando usamos el modo estricto, esto es el valor de
    indefinidos en funciones globales y en funciones anónimas que no son
    ligado a un objeto.

    Hay Cuatro Condiciones donde este puede ser confuso:

    1. Cuando pasamos de un método (que utiliza este) como un parámetro para ser usado como una función de devolución de llamada.
    2. Otra instancia cuando esto es entendido mal es cuando hacemos uso de un método interno (cierre). Es importante tomar nota de que los cierres no puede tener acceso al exterior de la función este variable mediante el uso de la palabra clave this, porque el esta variable es accesible sólo por la propia función, no por el interior de las funciones.
    3. Utilizando este cuando un método se asigna a una variable. El este valor está vinculado a otro objeto, si se asigna un método que utiliza este valor para una variable
    4. Utilizando este cuando usando bind, aplicar, y los métodos de llamada.

    Él da ejemplos de código, de las explicaciones, y las correcciones de código que me pareció muy útil.

    OriginalEl autor James Drinkard

  12. 5

    Es difícil obtener una buena comprensión de la JS, o escribir más que nada trivial en ella, si no la comprende. Usted simplemente no puede permitirse el lujo de tomar una inmersión rápida 🙂 creo que la mejor manera de empezar con el JS es primero ver estos video conferencias por Douglas Crockford – http://yuiblog.com/crockford/, que cubre esto y aquello, y todo lo demás acerca de JS.

    +1 Crockford debe ser el primer paso en cualquier viaje en JS. Sus capítulos de libro (disponible gratuitamente en internet) me puso sobre mis pies muy rápido de hecho. Él va directamente para el crucial bits.
    Ha, y ahora Crockford no como esto y programas sin utilizar. 😉
    El enlace está muerto.

    OriginalEl autor tathagata

  13. 5

    En pseudoclassical términos, la forma en que muchos de conferencias enseñar a los ‘esta’ palabra clave ‘ es como un objeto instanciado por un objeto o clase de constructor. Cada vez que un nuevo objeto se construye a partir de una clase, imaginar que bajo el capó de una instancia local de un ‘este’ objeto se crea y se devuelve. Recuerdo que enseña como este:

    function Car(make, model, year) {
    var this = {}; //under the hood, so to speak
    this.make = make;
    this.model = model;
    this.year = year;
    return this; //under the hood
    }
    var mycar = new Car('Eagle', 'Talon TSi', 1993);
    //========= under the hood
    var this = {};
    this.make = 'Eagle';
    this.model = 'Talon TSi';
    this.year = 1993;
    return this;

    OriginalEl autor mrmaclean89

  14. 4

    this es uno de los mal entendido concepto en JavaScript ya que se comporta de manera diferente de un lugar a otro. Simplemente, this se refiere a la «propietario» de la función que se están ejecutando actualmente.

    this ayuda a obtener el objeto actual (un.k.una. contexto de ejecución) con los que trabajamos. Si usted entiende en la que el objeto de la función actual es conseguir que se ejecuta, puede entender fácilmente lo actual this es

    var val = "window.val"
    var obj = {
    val: "obj.val",
    innerMethod: function () {
    var val = "obj.val.inner",
    func = function () {
    var self = this;
    return self.val;
    };
    return func;
    },
    outerMethod: function(){
    return this.val;
    }
    };
    //This actually gets executed inside window object 
    console.log(obj.innerMethod()()); //returns window.val
    //Breakdown in to 2 lines explains this in detail
    var _inn = obj.innerMethod();
    console.log(_inn()); //returns window.val
    console.log(obj.outerMethod()); //returns obj.val

    Anterior, podemos crear 3 variables con el mismo nombre de ‘val’. Uno en el contexto global, uno de ellos dentro de obj y el otro en el interior de innerMethod de obj. JavaScript resuelve identificadores dentro de un contexto determinado por subir el ámbito de la cadena de locales a globales.


    Pocos lugares donde this pueden ser diferenciados

    Llamar a un método de un objeto

    var status = 1;
    var helper = {
    status : 2,
    getStatus: function () {
    return this.status;
    }
    };
    var theStatus1 = helper.getStatus(); //line1
    console.log(theStatus1); //2
    var theStatus2 = helper.getStatus;
    console.log(theStatus2()); //1

    Cuando line1 se ejecuta, JavaScript, que establece un contexto de ejecución (CE) para la llamada a la función, la configuración de this a la objeto referenciado por lo que sucedió antes de que el último «.». así, en la última línea se puede entender que a() fue ejecutado en el contexto global que es el window.

    Con Constructor

    this puede ser usado para referirse al objeto que está siendo creado

    function Person(name){
    this.personName = name;
    this.sayHello = function(){
    return "Hello " + this.personName;
    }
    }
    var person1 = new Person('Scott');
    console.log(person1.sayHello()); //Hello Scott
    var person2 = new Person('Hugh');
    var sayHelloP2 = person2.sayHello;
    console.log(sayHelloP2()); //Hello undefined

    Cuando los nuevos Person() se ejecuta, un nuevo objeto es creado. Person se llama y su this se establece en referencia a ese nuevo objeto.

    Llamada a la función

    function testFunc() {
    this.name = "Name";
    this.myCustomAttribute = "Custom Attribute";
    return this;
    }
    var whatIsThis = testFunc();
    console.log(whatIsThis); //window
    var whatIsThis2 = new testFunc();
    console.log(whatIsThis2);  //testFunc() /object
    console.log(window.myCustomAttribute); //Custom Attribute 

    Si perdemos new palabra clave, whatIsThis se refiere a la mayoría de contexto global se puede encontrar(window)

    Con los controladores de eventos

    Si el controlador de eventos es en línea, this se refiere al objeto global

    <script type="application/javascript">
    function click_handler() {
    alert(this); //alerts the window object
    }
    </script>
    <button id='thebutton' onclick='click_handler()'>Click me!</button>

    Cuando la adición de controlador de eventos a través de JavaScript, this se refiere al elemento DOM que ha generado el evento.


    OriginalEl autor Nipuna

  15. 4

    El valor de «esto» depende del «contexto» en que se ejecuta la función. El contexto puede ser cualquier objeto o el objeto global, es decir, la ventana.

    Por lo que la Semántica de «este» es diferente de los tradicionales lenguajes de programación orientada a objetos. Y causa problemas:
    1. cuando una función se pasa a otra variable (lo más probable, una devolución de llamada); y 2. cuando el cierre se invoca desde un método de miembro de una clase.

    En ambos casos, se establece en la ventana.

    OriginalEl autor Trombe

  16. 2

    Whould este ayuda? (La mayoría de la confusión de ‘esta’ en javascript que viene del hecho de que generalmente no está vinculada a su objeto, sino a la actual ejecución de alcance-que pueden no ser exactamente cómo funciona, pero siempre se siente como que para mí, ver el artículo para una explicación completa)

    Sería mejor decir que tiene que ver con el «para el contexto de ejecución actual«. Excepto ES6 (proyecto de) los cambios que con la flecha de funciones, donde este se resuelve en el exterior contexto de ejecución.

    OriginalEl autor Simon Groenewolt

  17. 2

    Un poco de info acerca de este palabra clave

    Vamos a iniciar sesión this palabra clave para la consola en el ámbito global, sin más código, pero

    console.log(this)

    En Cliente/Navegador this de palabras clave es un objeto global que es window

    console.log(this === window) //true

    y

    En Servidor/Node/tiempo de ejecución de Javascript this palabra clave es también un objeto global que es module.exports

    console.log(this === module.exports) //true
    console.log(this === exports) //true

    Tenga en cuenta exports es sólo una referencia a module.exports

    OriginalEl autor unclexo

  18. 1

    este uso para el Ámbito como este

      <script type="text/javascript" language="javascript">
    $('#tbleName tbody tr').each(function{
    var txt='';
    txt += $(this).find("td").eq(0).text();
    \\same as above but synatx different
    var txt1='';
    txt1+=$('#tbleName tbody tr').eq(0).text();
    alert(txt1)
    });
    </script>

    valor de txt1 y txt es el mismo
    en el ejemplo de Arriba
    $(this)=$(‘#tbleName tbody tr’) es el Mismo

    OriginalEl autor

  19. -1

    Respuesta es Simple:

    palabra»this» es siempre la persona a cargo en el contexto de la invocación. Ellos se mencionan a continuación.

    1. SE LLAMA A LA FUNCIÓN CON LA PALABRA CLAVE NEW

      Si se llama a la función con la palabra clave NEW, a continuación, ESTE estará obligado al objeto recién creado.

      function Car(){
      this.name="BMW";
      }
      const myCar=new Car();
      myCar.name; //output "BMW"

      En el anterior, este estará obligado a ‘myCar’ objeto

    2. SE LLAMA A LA FUNCIÓN EXPLÍCITAMENTE EL USO DE LA LLAMADA Y LA APLICACIÓN DE MÉTODOS.

      En este caso, se enlazará con el objeto de que explícitamente se pasa a la función.

      var obj1={"name":"bond"};
      function printMessage(msg){
      return msg+" "+this.name;
      }
      const message=printMessage.call(obj1,"my name is ");
      console.log(message); //HERE THIS WILL BE BOUND TO obj1 WHICH WE PASSED EXPLICITLY. SAME FOR APPLY METHOD ALSO.
    3. SI SE LLAMA A LA FUNCIÓN CON OBJETO DE FORMA IMPLÍCITA, A CONTINUACIÓN, ESTE ESTARÁ OBLIGADO A ESE OBJETO

      var obj1={
      "name":"bond",
      getName: function () {
      return this.name;
      }
      };
      const newname=obj1.getName();
      console.log(newname); //HERE THIS WILL BE BOUND TO obj1(WHITCHEVER OBJECT IS MENTIONED BEFORE THE DOT THIS WILL BE BOUND TO THAT)
    4. CUANDO SE LLAMA A LA FUNCIÓN SIN NINGÚN TIPO DE CONTEXTO, A CONTINUACIÓN, ESTE ESTARÁ OBLIGADO A OBJETO GLOBAL

      const util = {
      name: 'Utility',
      getName: function () {
      return this.name;
      };
      const getName=util.getName;
      const newName=getName();
      console.log(newName); //IF THIS EXECUTED IN BROWSER THIS WILL BE  BOUND TO WINDOW OBJECT. IF THIS EXECUTED IN SERVER THIS WILL BE BOUND TO GLOBAL OBJECT
    5. EN MODO ESTRICTO, ESTE SERÁ INDEFINIDO

      function setName(name){
      "use strict"
      return this.name;
      }
      setName(); //WILL BE ERROR SAYING name IS UNDEFINED. 
    usted ha omitido una } en el punto 4

    OriginalEl autor PALLAMOLLA SAI

  20. 1303

    Recomiendo la lectura de Mike West‘s artículo Ámbito de aplicación en JavaScript (espejo) en primer lugar. Es un excelente, amable introducción a los conceptos de this y el alcance de las cadenas en JavaScript.

    Una vez que empiece a acostumbrarse a this, las reglas son en realidad bastante simple. El ECMAScript 5.1 Estándar define this:

    §11.1.1 La this palabra clave

    La this palabra clave se evalúa al valor de la ThisBinding del contexto de ejecución actual

    ThisBinding es algo que el intérprete de JavaScript mantiene como evalúa el código JavaScript, como un especial de registro de CPU que contiene una referencia a un objeto. El intérprete actualizaciones de la ThisBinding siempre que el establecimiento de un contexto de ejecución en uno de los tres casos diferentes:

    1. Inicial ejecución global del contexto

    Este es el caso de el código JavaScript que se evalúa en el nivel superior, por ejemplo, cuando directamente dentro de un <script>:

    <script>
    alert("I'm evaluated in the initial global execution context!");
    setTimeout(function () {
    alert("I'm NOT evaluated in the initial global execution context.");
    }, 1);
    </script>

    Cuando la evaluación de código en la parte inicial del mundial de contexto de ejecución, ThisBinding se establece en el objeto global, window (§10.4.1.1).

    Entrar eval código

    • …por una llamada directa a eval()
      ThisBinding se queda sin cambios; es el mismo valor que la ThisBinding de la vocación contexto de ejecución (§10.4.2 (2)(a)).

    • …si no por una llamada directa a eval()

      ThisBinding se establece en el objeto global como si la ejecución en la fase inicial del mundial de contexto de ejecución (§10.4.2 (1)).

    §15.1.2.1.1 define lo que es un llamado directo a la eval() es. Básicamente, eval(...) es una llamada directa, mientras que algo como (0, eval)(...) o var indirectEval = eval; indirectEval(...); es una llamada indirecta a eval(). Ver chuckj la respuesta a (1, eval)(‘este’) vs eval(‘este’) en JavaScript? y Dmitry Soshnikov del ECMA-262-5 en detalle. Capítulo 2. De Modo Estricto. para cuando se puede usar una indirecta eval() llamada.

    De entrar en el código de la función

    Esto ocurre cuando se llama a una función. Si se llama a una función en un objeto, como en obj.myMethod() o el equivalente obj["myMethod"](), entonces ThisBinding se establece en el objeto (obj en el ejemplo; §13.2.1). En la mayoría de los otros casos, ThisBinding se establece en el objeto global (§10.4.3).

    La razón de la escritura «en la mayoría de los casos» es porque hay ocho ECMAScript 5 funciones integradas que permiten ThisBinding ser especificados en la lista de argumentos. Estas funciones toman un llamado thisArg que se convierte en el ThisBinding al llamar a la función (§10.4.3).

    Estas funciones integradas:

    • Function.prototype.apply( thisArg, argArray )
    • Function.prototype.call( thisArg [ , arg1 [ , arg2, ... ] ] )
    • Function.prototype.bind( thisArg [ , arg1 [ , arg2, ... ] ] )
    • Array.prototype.every( callbackfn [ , thisArg ] )
    • Array.prototype.some( callbackfn [ , thisArg ] )
    • Array.prototype.forEach( callbackfn [ , thisArg ] )
    • Array.prototype.map( callbackfn [ , thisArg ] )
    • Array.prototype.filter( callbackfn [ , thisArg ] )

    En el caso de la Function.prototype funciones, que son llamados en un objeto de función, pero en lugar de establecer ThisBinding a la función de objeto, ThisBinding se establece en el thisArg.

    En el caso de la Array.prototype funciones, la callbackfn se llama en un contexto de ejecución donde ThisBinding se establece en thisArg si es facilitado; de lo contrario, al objeto global.

    Esas son las reglas de la llanura de JavaScript. Cuando empiece a utilizar las bibliotecas de JavaScript (por ejemplo, jQuery), es posible que ciertas funciones de la biblioteca de manipular el valor de this. Los desarrolladores de esas bibliotecas de JavaScript de hacer esto porque se tiende a apoyar el uso más común de los casos, y los usuarios de la biblioteca suele encontrar a este comportamiento es más conveniente. Al pasar funciones de devolución de llamada de referencia this a las funciones de biblioteca, debe consultar la documentación de garantías acerca de cuál es el valor de this es cuando se llama a la función.

    Si usted se está preguntando cómo una biblioteca de JavaScript manipula el valor de this, la biblioteca es el simple uso de una de las integradas en las funciones de JavaScript aceptar un thisArg. Usted también puede escribir su propia función de tomar una función de devolución de llamada y thisArg:

    function doWork(callbackfn, thisArg) {
    //...
    if (callbackfn != null) callbackfn.call(thisArg);
    }

    Hay un caso especial que no me mención. Cuando se construye un nuevo objeto a través de la new operador, el intérprete de JavaScript crea un nuevo objeto vacío, establece algunas propiedades internas y, a continuación, llama al constructor de la función en el nuevo objeto. Por lo tanto, cuando se llama a una función en un constructor contexto, el valor de this es el nuevo objeto de que el intérprete creado:

    function MyType() {
    this.someData = "a string";
    }
    var instance = new MyType();
    //Kind of like the following, but there are more steps involved:
    //var instance = {};
    //MyType.call(instance);

    Flecha funciones

    Flecha funciones (introducido en ECMA6) modificar el alcance de this. Ver los canónica pregunta, Función de flecha vs declaración de función /expresiones Son equivalentes /intercambiable? para obtener más información. Pero en resumen:

    Flecha funciones no tienen sus propios this…. de unión.
    En lugar de ello, los identificadores se resuelven en el ámbito léxico como cualquier
    otra variable. Eso significa que dentro de una función de flecha, this…consulte la(s) con los valores de this en el medio ambiente
    la flecha función está definida en.

    Sólo por diversión, prueba tu comprensión con algunos ejemplos

    Para mostrar las respuestas, pase el ratón sobre el amarillo de la luz cajas.

    1. ¿Cuál es el valor de this en la línea marcada? Por qué?

      window — La línea marcada está evaluado en la fase inicial del mundial de contexto de ejecución.

      if (true) {
      //What is `this` here?
      }
    2. ¿Cuál es el valor de this en la línea marcada cuando obj.staticFunction() se ejecuta? Por qué?

      obj — Cuando se llama a una función en un objeto, ThisBinding se establece en el objeto.

      JS:

      var obj = {
      someData: "a string"
      };
      function myFun() {
      return this //What is `this` here?
      }
      obj.staticFunction = myFun;
      console.log("this is window:", obj.staticFunction() == window);
      console.log("this is obj:", obj.staticFunction() == obj);
      

    3. ¿Cuál es el valor de this en la línea marcada? Por qué?

      window

      En este ejemplo, el intérprete de JavaScript entra en el código de la función, sino porque myFun/obj.myMethod no se llama en un objeto, ThisBinding se establece en window.

      Esto es diferente de Python, en el que el acceso a un método (obj.myMethod) crea un método vinculado objeto.

      JS:

      var obj = {
      myMethod: function () {
      return this; //What is `this` here?
      }
      };
      var myFun = obj.myMethod;
      console.log("this is window:", myFun() == window);
      console.log("this is obj:", myFun() == obj);
      

    4. ¿Cuál es el valor de this en la línea marcada? Por qué?

      window

      Este era complicado. Cuando la evaluación de la eval código, this es obj. Sin embargo, en la eval código, myFun no se llama a un objeto, de manera ThisBinding se establece en window de la llamada.

      function myFun() {
      return this; //What is `this` here?
      }
      var obj = {
      myMethod: function () {
      eval("myFun()");
      }
      };
    5. ¿Cuál es el valor de this en la línea marcada? Por qué?

      obj

      La línea myFun.call(obj); está invocando a la especial función integrada Function.prototype.call(), que acepta thisArg como el primer argumento.

      JS:

      function myFun() {
      return this; //What is `this` here?
      }
      var obj = {
      someData: "a string"
      };
      console.log("this is window:", myFun.call(obj) == window);
      console.log("this is obj:", myFun.call(obj) == obj);
      

    • lo que hace estos signos significa? §10.4.1.1
    • Son referencias a las secciones dentro de la edición 5.1 del Estándar ECMAScript, ECMA-262. Yo les proporciono para que pueda leer el Estándar para los detalles técnicos, si quieres.
    • Creo que @supertonsky está en lo correcto acerca #2 – si myFun() se llama desde un ámbito global, y no como un método en el objeto, «este», que será el objeto global, por lo que la redacción de la pregunta que importa. por cierto, yo realmente como la idea de usar el ratón para obtener la respuesta para algo como esto.
    • Pero, jsfiddle.net/H4LYm/2, muestra que la setTimeout ejemplo tiene un this de window(global).
    • Hola @KevinMeredith. Verdadero. Para averiguar a qué this está dentro de la función de tiempo de espera, no es el «inicial de ejecución global» contexto de la regla que se aplica, pero el «cómo introducir el código de función» en la regla. Debido a que la función de tiempo de espera no se llama en un objeto (por ejemplo,someObject.someMethod()), this es window dentro de la función de tiempo de espera, como el JSFiddle muestra.
    • Yo no diría que hay algo especial acerca de los cinco métodos en la Array prototipo (tan lejos como this va). Cualquier función o método podría aceptar y usar un thisArg igual que si se utiliza .call() o .apply() internamente: function callTheFunc(f, thisArg) { f.call(thisArg) }
    • viniendo de Python es de imaginar los niveles de frustración que yo tenía cuando me topé con la 3ª ejemplo.. smh
    • Una cosa que no entiendo es: ¿por qué (obj.myFunction)() aún se une a este obj? Yo supongo que la expresión entre paréntesis devuelve un no enlazados a la función, así que no debería ser de la ventana en su lugar?
    • No las respuestas de las preguntas de la prueba de estar por debajo de los fragmentos de código?

  21. 147

    La this palabra clave se comporta de forma diferente en JavaScript en comparación con otros idiomas. En lenguajes Orientados a Objetos, el this palabra clave hace referencia a la instancia actual de la clase. En JavaScript, el valor de this está determinado por el contexto de invocación de la función (context.function()) y donde se llama.

    1. Cuando se utiliza en el contexto global

    Cuando se utiliza this en el contexto global, es obligado a objeto global (window en el navegador)

    document.write(this);  //[object Window]

    Cuando se utiliza this dentro de una función definida en el contexto global, this todavía está enlazado a objeto global ya que la función es un método de contexto global.

    function f1()
    {
       return this;
    }
    document.write(f1());  //[object Window]

    Por encima de f1 se realiza un método de objeto global. Por lo tanto, podemos llamar también en window objeto de la siguiente manera:

    function f()
    {
        return this;
    }
    
    document.write(window.f()); //[object Window]

    2. Cuando se usa en el método de objeto de

    Cuando se utiliza this palabra clave dentro de un método de objeto, this está vinculado a la «inmediata», adjuntando el objeto.

    var obj = {
        name: "obj",
        f: function () {
            return this + ":" + this.name;
        }
    };
    document.write(obj.f());  //[object Object]:obj

    Arriba he puesto la palabra inmediata en comillas dobles. Es para hacer el punto de que si te nido el objeto dentro de otro objeto, entonces this está obligado a la inmediata padre.

    var obj = {
        name: "obj1",
        nestedobj: {
            name:"nestedobj",
            f: function () {
                return this + ":" + this.name;
            }
        }            
    }
    
    document.write(obj.nestedobj.f()); //[object Object]:nestedobj

    Incluso si se añade la función explícitamente al objeto como un método, que aún así sigue por encima de las reglas, que es this todavía puntos a la inmediata objeto primario.

    var obj1 = {
        name: "obj1",
    }
    
    function returnName() {
        return this + ":" + this.name;
    }
    
    obj1.f = returnName; //add method to object
    document.write(obj1.f()); //[object Object]:obj1

    3. Cuando invoque a menos del contexto de la función

    Cuando se utiliza this dentro de la función que se invoca sin ningún tipo de contexto (es decir, no sobre cualquier objeto), está vinculada a la de objeto global (window en el navegador)(incluso si la función está definida en el objeto) .

    var context = "global";
    
    var obj = {  
        context: "object",
        method: function () {                  
            function f() {
                var context = "function";
                return this + ":" +this.context; 
            };
            return f(); //invoked without context
        }
    };
    
    document.write(obj.method()); //[object Window]:global 

    Tratando con funciones

    Podemos tratar los puntos anteriores con las funciones. Sin embargo, hay algunas diferencias.

    • Anterior hemos de añadir a los objetos de uso de la notación literal de objeto. Podemos agregar miembros a funciones mediante el uso de this. para especificar ellos.
    • La notación literal de objeto, se crea una instancia de objeto que se pueden utilizar inmediatamente. Con la función podemos necesidad de crear primero su instancia mediante new operador.
    • También en un objeto literal de enfoque, se puede agregar explícitamente que los miembros ya se definió el objeto utilizando el operador punto. Esto se añade a la instancia específica solamente. Sin embargo he añadido variable para el prototipo de la función, para que se refleja en todas las instancias de la función.

    A continuación he probado todas las cosas que hicimos con el Objeto y this arriba, pero por primera función de creación en lugar de escribir directamente un objeto.

    /********************************************************************* 
    1. When you add variable to the function using this keyword, it 
    gets added to the function prototype, thus allowing all function 
    instances to have their own copy of the variables added.
    *********************************************************************/
    function functionDef()
    {
    this.name = "ObjDefinition";
    this.getName = function(){                
    return this+":"+this.name;
    }
    }        
    obj1 = new functionDef();
    document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition   
    /********************************************************************* 
    2. Members explicitly added to the function protorype also behave 
    as above: all function instances have their own copy of the 
    variable added.
    *********************************************************************/
    functionDef.prototype.version = 1;
    functionDef.prototype.getVersion = function(){
    return "v"+this.version; //see how this.version refers to the
    //version variable added through 
    //prototype
    }
    document.write(obj1.getVersion() + "<br />"); //v1
    /********************************************************************* 
    3. Illustrating that the function variables added by both above 
    ways have their own copies across function instances
    *********************************************************************/
    functionDef.prototype.incrementVersion = function(){
    this.version = this.version + 1;
    }
    var obj2 = new functionDef();
    document.write(obj2.getVersion() + "<br />"); //v1
    obj2.incrementVersion();      //incrementing version in obj2
    //does not affect obj1 version
    document.write(obj2.getVersion() + "<br />"); //v2
    document.write(obj1.getVersion() + "<br />"); //v1
    /********************************************************************* 
    4. `this` keyword refers to the immediate parent object. If you 
    nest the object through function prototype, then `this` inside 
    object refers to the nested object not the function instance
    *********************************************************************/
    functionDef.prototype.nestedObj = { name: 'nestedObj', 
    getName1 : function(){
    return this+":"+this.name;
    }                            
    };
    document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj
    /********************************************************************* 
    5. If the method is on an object's prototype chain, `this` refers 
    to the object the method was called on, as if the method was on 
    the object.
    *********************************************************************/
    var ProtoObj = { fun: function () { return this.a } };
    var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
    //as its prototype
    obj3.a = 999;                       //adding instance member to obj3
    document.write(obj3.fun()+"<br />");//999
    //calling obj3.fun() makes 
    //ProtoObj.fun() to access obj3.a as 
    //if fun() is defined on obj3

    4. Cuando se utiliza dentro de la función constructora.

    Cuando se utiliza la función como un constructor (que es cuando se llama con new palabra clave), this dentro de la función de los puntos del cuerpo para el nuevo objeto que está siendo construido.

    var myname = "global context";
    function SimpleFun()
    {
    this.myname = "simple function";
    }
    var obj1 = new SimpleFun(); //adds myname to obj1
    //1. `new` causes `this` inside the SimpleFun() to point to the
    //  object being constructed thus adding any member
    //  created inside SimipleFun() using this.membername to the
    //  object being constructed
    //2. And by default `new` makes function to return newly 
    //  constructed object if no explicit return value is specified
    document.write(obj1.myname); //simple function

    5. Cuando se utiliza dentro de la función definida en el prototipo de la cadena de

    Si el método es un objeto prototipo de la cadena, this dentro de este método se refiere al objeto, el método fue llamado, como si el método está definido en el objeto.

    var ProtoObj = {
    fun: function () {
    return this.a;
    }
    };
    //Object.create() creates object with ProtoObj as its
    //prototype and assigns it to obj3, thus making fun() 
    //to be the method on its prototype chain
    var obj3 = Object.create(ProtoObj);
    obj3.a = 999;
    document.write(obj3.fun()); //999
    //Notice that fun() is defined on obj3's prototype but 
    //`this.a` inside fun() retrieves obj3.a   

    6. Dentro de la llamada(), aplicar() y bind() funciones

    • Todos estos métodos están definidos en Function.prototype.
    • Estos métodos permite escribir una función una vez y invocarlo en un contexto diferente. En otras palabras, que permite especificar el valor de this que va a ser utilizado mientras se ejecuta la función. También se tienen los parámetros que se pasan a la función original cuando se le invoca.
    • fun.apply(obj1 [, argsArray]) Conjuntos de obj1 como el valor de this dentro de fun() y llamadas fun() pasando elementos de argsArray como sus argumentos.
    • fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) – Establece obj1 como el valor de this dentro de fun() y llamadas fun() pasando arg1, arg2, arg3, ... como sus argumentos.
    • fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) – Devuelve la referencia a la función fun con this dentro de diversión obligado a obj1 y parámetros de fun obligado a los parámetros especificados arg1, arg2, arg3,....
    • Por ahora la diferencia entre apply, call y bind debe de haber vuelto evidente. apply permite especificar los argumentos de la función como de la matriz-como objeto, es decir, un objeto con una numérico length de la propiedad y su correspondiente número entero no negativo propiedades. Mientras que call permite especificar los argumentos de la función directamente. Ambos apply y call inmediatamente se invoca la función en el contexto específico y con los argumentos especificados. Por otro lado, bind simplemente devuelve la función enlazada a la especificada this y el valor de los argumentos. Podemos captar la referencia a esta devuelta por la función de asignar a una variable y después nos puede llamar en cualquier momento.
    function add(inc1, inc2)
    {
    return this.a + inc1 + inc2;
    }
    var o = { a : 4 };
    document.write(add.call(o, 5, 6)+"<br />"); //15
    //above add.call(o,5,6) sets `this` inside
    //add() to `o` and calls add() resulting:
    //this.a + inc1 + inc2 = 
    //`o.a` i.e. 4 + 5 + 6 = 15
    document.write(add.apply(o, [5, 6]) + "<br />"); //15
    //`o.a` i.e. 4 + 5 + 6 = 15
    var g = add.bind(o, 5, 6);       //g: `o.a` i.e. 4 + 5 + 6
    document.write(g()+"<br />");    //15
    var h = add.bind(o, 5);          //h: `o.a` i.e. 4 + 5 + ?
    document.write(h(6) + "<br />"); //15
    //4 + 5 + 6 = 15
    document.write(h() + "<br />");  //NaN
    //no parameter is passed to h()
    //thus inc2 inside add() is `undefined`
    //4 + 5 + undefined = NaN</code>

    7. this dentro de los controladores de eventos

    • Al asignar la función directamente a los controladores de eventos de un elemento, el uso de this directamente dentro de la gestión de eventos de la función se refiere al elemento correspondiente. Tal función directa de la asignación se puede hacer uso de addeventListener método o a través de los eventos tradicionales métodos de registro como onclick.
    • Del mismo modo, cuando se utiliza this directamente dentro de la propiedad de evento (como <button onclick="...this..." >) del elemento, se refiere al elemento.
    • Sin embargo el uso de this indirectamente a través de otra función llamada dentro de la gestión de eventos de la función o evento de la propiedad se resuelve en el objeto global window.
    • El mismo comportamiento anterior se logra cuando asignamos una función al controlador de eventos utiliza Microsoft Registro de Sucesos del modelo de método attachEvent. En lugar de asignar la función al controlador de eventos (y por lo tanto, haciendo que el método de función del elemento), se llama a la función en el evento (efectivamente llamando en el contexto global).

    Recomiendo mejor probar esto en JSFiddle.

    <script> 
    function clickedMe() {
    alert(this + " : " + this.tagName + " : " + this.id);
    } 
    document.getElementById("button1").addEventListener("click", clickedMe, false);
    document.getElementById("button2").onclick = clickedMe;
    document.getElementById("button5").attachEvent('onclick', clickedMe);   
    </script>
    <h3>Using `this` "directly" inside event handler or event property</h3>
    <button id="button1">click() "assigned" using addEventListner() </button><br />
    <button id="button2">click() "assigned" using click() </button><br />
    <button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>
    <h3>Using `this` "indirectly" inside event handler or event property</h3>
    <button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />
    <button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />
    IE only: <button id="button5">click() "attached" using attachEvent() </button>

    8. this en ES6 función de flecha

    En una función de flecha, this se comportan como variables comunes: será heredada de su ámbito léxico. La función del this, donde la flecha función está definida, será la flecha de la función this.

    Así, que el mismo comportamiento como:

    (function(){}).bind(this)

    Ver el código siguiente:

    const globalArrowFunction = () => {
    return this;
    };
    console.log(globalArrowFunction()); //window
    const contextObject = {
    method1: () => {return this},
    method2: function(){
    return () => {return this};
    }
    };
    console.log(contextObject.method1()); //window
    const contextLessFunction = contextObject.method1;
    console.log(contextLessFunction()); //window
    console.log(contextObject.method2()()) //contextObject
    const innerArrowFunction = contextObject.method2();
    console.log(innerArrowFunction()); //contextObject 
    • «Cuando se utiliza esta dentro de una función definida en el contexto global, esto es todavía ligado a objeto global ya que la función es un método de contexto global.» es incorrecta. esto está establecido por cómo se llama a una función o por bind, no se por donde está definido. Llamar a cualquier función sin una base de referencia («contexto») utilizará de forma predeterminada esto al objeto global o permanecen indefinidos en modo estricto.
    • hmm puede ser, pero me he encontrado con esta en MDN: En este caso, el valor de this no se establece la llamada. Puesto que el código no es en modo estricto, el valor de this debe ser siempre un objeto de modo que el valor predeterminado es el objeto global. Y de hecho es por eso que yo pensaba que directamente puede realizar llamada de window.f1(), lo que significa que f1() ya está conectado a window objeto, quiero decir antes de la invocación. Estoy equivocando?
    • Yo estaba comentando (tal vez no con claridad, en su vinculación a la configuración de esto con «la función en realidad es un método en el contexto mundial», como si una especie de llamado window.fn, que no lo es. esto valor por defecto el objeto global porque no hay base de referencia se utiliza en la llamada, no porque de donde la función está definida (por lo que esto está todavía por cómo se llama a la función). Si usted llamar explícitamente utilizando window.fn, entonces usted es la configuración de esto de la ventana. Mismo resultado, diferente manera de ir sobre él. 🙂
    • «yo he puesto la palabra inmediata…» no, tú no. Puede usted por favor revisar esto para que se corrige el error? Parece semántica para la respuesta y por lo tanto no se puede continuar la lectura hasta que se corrige el error por miedo de aprender algo incorrecto.
    • hacer Ctrl+F en esta página en el navegador para encontrar la cadena «inmediata» (incluyendo las comillas) yo creo que ahí si estoy entendiendo mal u
    • cuando usted hizo algo como esto var context = "global"; var obj = { context: "object", method: function () { function f() { var context = "function"; return this + ":" +this.context; }; return f(); //invoked without context } }; document.write(obj.method()); //[object Window]:global Aquí lo que no se invoca sin contexto significa?
    • Leer las dos líneas anteriores que el código, a continuación del punto 3 del título. Dice: «invoca sin ningún tipo de contexto (es decir, no sobre cualquier objeto)«
    • En realidad creo que el punto «1. Cuando se utiliza en el contexto global» debe incluir sólo el tercer ejemplo, porque los dos primeros de ellos son los casos del punto «3. Cuando invoque a menos del contexto de la función», por lo que es dos escenarios diferentes y no «el Mismo resultado, diferente manera de ir sobre él»
    • original punto es que no importa si una función es o global de la función del contexto, llamando sin ajuste de esto será por defecto el objeto global en no–de modo estricto. La frase se refiere a que fue utilizado en respuesta a un comentario, no el artículo en sí mismo.

  22. 61

    Javascript this

    Simple invocación de función

    Considere la siguiente función:

    function foo() {
    console.log("bar");
    console.log(this);
    }
    foo(); //calling the function

    Nota que estamos ejecutando este en el modo normal, es decir, el modo estricto no se utiliza.

    Cuando se ejecuta en un navegador, el valor de this sería registra como window. Esto es debido a que window es la variable global en un navegador web de su ámbito.

    Si ejecuta este mismo fragmento de código en un entorno como el de node.js, this haría referencia a la variable global en su aplicación.

    Ahora si ejecutamos este en modo estricto por la adición de la declaración de "use strict"; a los principios de la declaración de la función, this ya no se refieren a la variable global en cualquiera de los entornos. Esto se hace para evitar confusiones en modo estricto. this sería, en este caso sólo tienes que entrar undefined, porque eso es lo que es, no está definido.

    En los siguientes casos, podríamos ver cómo manipular el valor de this.

    Llamar a una función en un objeto

    Hay diferentes maneras de hacer esto. Si han llamado a los métodos nativos en Javascript como forEach y slice, usted ya debe saber que el this variable en ese caso se refiere a la Object en el que se llama a esa función (tenga en cuenta que javascript, casi todo es un Object, incluyendo Arrays y Functions). Usa el siguiente código de ejemplo.

    var myObj = {key: "Obj"};
    myObj.logThis = function () {
    //I am a method
    console.log(this);
    }
    myObj.logThis(); //myObj is logged

    Si un Object contiene una propiedad que tiene una Function, la propiedad es llamada a un método. Este método, cuando se llama, siempre es this conjunto de variables para la Object la que está asociada. Esto es cierto tanto para el estricto y no estricto modos.

    Tenga en cuenta que si un método es almacenada (o más bien, copiado) en otra variable, la referencia a this es que ya no se conservan en la nueva variable. Por ejemplo:

    //continuing with the previous code snippet
    var myVar = myObj.thisMethod;
    myVar();
    //logs either of window/global/undefined based on mode of operation

    Considerando más comúnmente escenario de práctica:

    var el = document.getElementById('idOfEl');
    el.addEventListener('click', function() { console.log(this) });
    //the function called by addEventListener contains this as the reference to the element
    //so clicking on our element would log that element itself

    La new palabra clave

    Considerar un constructor de la función en Javascript:

    function Person (name) {
    this.name = name;
    this.sayHello = function () {
    console.log ("Hello", this);
    }
    }
    var awal = new Person("Awal");
    awal.sayHello();
    //In `awal.sayHello`, `this` contains the reference to the variable `awal`

    ¿Cómo funciona esto? Bien, vamos a ver lo que ocurre cuando se utiliza el new palabra clave.

    1. De llamar a la función con el new palabra clave inmediatamente inicializar un Object de tipo Person.
    2. El constructor de esta Object tiene su constructor establece en Person. También, tenga en cuenta que typeof awal volvería Object sólo.
    3. Esta nueva Object se le asigna el prototipo de Person.prototype. Esto significa que cualquier método o propiedad en la Person prototipo estaría disponible para todas las instancias de Person, incluyendo awal.
    4. La función Person en sí es ahora invoca; this ser una referencia a la recién construida objeto awal.

    Bastante sencillo, ¿eh?

    Tenga en cuenta que el oficial de la especificación ECMAScript ningún lugar de los estados que tales tipos de funciones reales constructor funciones. Ellos son sólo funciones normales, y new puede ser utilizado en cualquier función. Es sólo que usamos como tal, y por eso las llamamos como tal sólo.

    Funciones de llamada Funciones: call y apply

    Así que sí, ya que functions también son Objects (y en el hecho primero de la clase de variables en Javascript), incluso las funciones de disponer de métodos que son… bueno, funciones propias.

    Todas las funciones heredan de la global Function, y dos de sus muchos métodos son call y apply, y ambos pueden ser usados para manipular el valor de this en la función en la que están llamados.

    function foo () { console.log (this, arguments); }
    var thisArg = {myObj: "is cool"};
    foo.call(thisArg, 1, 2, 3);

    Este es un ejemplo típico de uso de call. Básicamente, tiene el primer parámetro y establece this en la función foo como una referencia a thisArg. Todos los demás parámetros que se pasan a call se pasa a la función foo como argumentos.

    Por lo que el código anterior registro de {myObj: "is cool"}, [1, 2, 3] en la consola. Muy buena forma de cambiar el valor de this en cualquier función.

    apply es casi el mismo como call aceptar que sólo toma dos parámetros: thisArg y una matriz que contiene los argumentos que se pasan a la función. Por lo que la anterior call llamada puede ser traducido a apply como este:

    foo.apply(thisArg, [1,2,3])

    Nota que call y apply puede reemplazar el valor de this establecidas por el dot de invocación de método que hemos discutido en la segunda viñeta.
    Bastante Simple 🙂

    Presentación…. bind!

    bind es un hermano de call y apply. También es un método heredado por todas las funciones desde el mundial Function constructor en Javascript. La diferencia entre bind y call/apply es que tanto call y apply realmente invocar la función. bind, por el contrario, devuelve una nueva función con la thisArg y arguments pre-establecido. Veamos un ejemplo para entender mejor este:

    function foo (a, b) {
    console.log (this, arguments);
    }
    var thisArg = {myObj: "even more cool now"};
    var bound = foo.bind(thisArg, 1, 2);
    console.log (typeof bound); //logs `function`
    console.log (bound);
    /* logs `function () { native code }` */
    bound(); //calling the function returned by `.bind`
    //logs `{myObj: "even more cool now"}, [1, 2]`

    Ver la diferencia entre los tres? Es sutil, pero se utilizan de manera diferente. Como call y apply, bind también superan el valor de this establecidas por el dot-la invocación del método.

    También tenga en cuenta que ninguna de estas tres funciones de hacer cualquier cambio en la función original. call y apply devuelve el valor de los recién construido, mientras que las funciones bind devolverá el recién construido función de sí mismo, listo para ser llamado.

    Cosas extras, copia este

    A veces, no le gusta el hecho de que this cambios con el alcance, especialmente anidada alcance. Echa un vistazo al siguiente ejemplo.

    var myObj = {
    hello: function () {
    return "world"
    },
    myMethod: function () {
    //copy this, variable names are case-sensitive
    var that = this;
    //callbacks ftw \o/
    foo.bar("args", function () {
    //I want to call `hello` here
    this.hello(); //error
    //but `this` references to `foo` damn!
    //oh wait we have a backup \o/
    that.hello(); //"world"
    });
    }
    };

    En el código anterior, podemos ver que el valor de this cambiado con el anidado de alcance, pero queríamos que el valor de this en el ámbito original. Así que ‘copiar’ this a that y utiliza la copia en lugar de this. Inteligente, ¿eh?

    Índice:

    1. Lo que está en this por defecto?
    2. ¿Y si llamamos a la función como un método con el Objeto de notación de punto?
    3. Lo que si usamos el new palabra clave?
    4. ¿Cómo podemos manipular this con call y apply?
    5. Utilizando bind.
    6. Copia this para resolver nested-cuestiones de ámbito.
    • ¿Por qué hay una sección acerca de la new palabra clave? También esta pregunta ha sido vencer a la muerte, pero todos tenemos «que el tiempo nos trató de montar los faldones de la levita de una pregunta respondida hace 4 años»
  23. 48

    «esto» es todo acerca de alcance. Cada función tiene su propio ámbito, y puesto que todo en JS es un objeto, incluso una función puede almacenar valores en sí mismo usando el «este». La programación orientada a objetos 101 enseña que «esto» sólo es aplicable a instancias de un objeto. Por lo tanto, cada vez se ejecuta una función, una nueva «instancia» de que la función tiene un nuevo significado de «este».

    La mayoría de la gente se confunde cuando intenta utilizar «this» dentro de anónimo cierre funciones como:

    (function(value) { 
    este.valor = valor; 
    $('.algunos de los elementos').each(function(elt){ 
    elt.innerHTML = este.valor; //¡oh oh!! posiblemente no definido 
    }); 
    })(2); 
    

    Así que aquí, en el interior de cada uno ()», este» no es el «valor» que se espera (de

    este.valor = valor;

    por encima de él). Así, para obtener más de esta (ningún retruécano previsto) problema, un desarrollador podría:

    (function(value) { 
    var auto = this; //un pequeño cambio 
    auto.valor = valor; 
    $('.algunos de los elementos').each(function(elt){ 
    elt.innerHTML = auto.valor; //ufff!! == 2 
    }); 
    })(2); 
    

    Probarlo; te empiezan a gustar este patrón de programación

    • «todo en JS es un objeto» no es cierto, JavaScript también tiene valores primitivos, consulte bclary.com/2004/11/07/#a-4.3.2
    • Los valores primitivos parecen tener algunos de los métodos en sí mismos, como Cadena#substring(), el Número#toString(), etc.. Así, tal vez no con la misma nomenclatura que en el artículo, en realidad, se comportan como si fueran objetos (todos ellos son un prototipo, es decir. Cadena#substring() es realmente: String.el prototipo.subcadena = function(){…}). Por favor me corrija si estoy equivocado.
    • El this palabra clave no tiene nada que ver con el ámbito. También, tiene un significado también en funciones que no son propiedades de los objetos.
    • son dos escuelas de pensamiento sobre eso. Me gusta la que dice «todo es un objeto, pero algunos pueden ser representados por primitivas para la comodidad«. 😉
    • Los primitivos no tienen métodos o propiedades. Cuando se llama a un objeto String método en una cadena primitivo, está implícito un boxeo de la primitiva en un nuevo objeto String contenedor de instancia. El contenedor se desecha después de que se complete la operación, a menos que se capturó en una variable.
    • this no es TODO sobre el ámbito de aplicación. Es TODO acerca de la ejecución de contexto, que no es lo mismo como ámbito de aplicación. JavaScript es léxicamente ámbito (significado alcance está determinado por la ubicación del código), pero this está determinado por la función que contiene se invoca – no se donde que la función es.

  24. 17

    this en JavaScript se refiere siempre a la «dueño» de la función que se ser ejecutado.

    Si no explícito del propietario se define, entonces, la parte superior de la mayoría de propietario, el objeto de la ventana, se hace referencia.

    Por lo que si hice

    function someKindOfFunction() {
    this.style = 'foo';
    }

    element.onclick = someKindOfFunction;

    this haría referencia al elemento objeto. Pero cuidado, muchas personas cometen este error.

    <element onclick="someKindOfFunction()">

    En el último caso, usted se limita a hacer referencia a la función, no la mano sobre el elemento. Por lo tanto, this hará referencia al objeto window.

  25. 16

    Ya que este hilo se ha topado, he recopilado algunos de los puntos para los lectores nuevos a this tema.

    ¿Cómo es el valor de this determinado?

    Utilizamos esta similar a la manera en que usamos los pronombres en los lenguajes naturales, como el inglés: «Juan está corriendo más rápido porque él está tratando de coger el tren.» En su lugar se podría haber escrito «… Juan está tratando de coger el tren».

    var person = {    
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {
    //We use "this" just as in the sentence above:
    console.log(this.firstName + " " + this.lastName);
    //We could have also written:
    console.log(person.firstName + " " + person.lastName);
    }
    }

    this no se le asigna un valor hasta que un objeto se invoca la función donde está definido. En el ámbito global, todas las variables globales y funciones están definidas en el window objeto. Por lo tanto, this en una función global se refiere (y tiene el valor de) el global window objeto.

    Cuando use strict, this en global y en funciones anónimas que no están ligados a ningún objeto tiene un valor de undefined.

    La this palabra clave es la mayoría de los incomprendidos cuando: 1) tomamos prestado un método que utiliza this, 2) se le asigna un método que utiliza this a una variable, 3) una función que utiliza this se pasa como una función de devolución de llamada, y 4) this se utiliza dentro de un cierre — interior de la función. (2)

    ¿Cómo la palabra

    Qué le depara el futuro

    Definido en ECMA Script 6, flecha-funciones de adoptar la this vinculante a partir de la
    adjuntando (función o global) ámbito de aplicación.

    function foo() {
    //return an arrow function
    return (a) => {
    //`this` here is lexically inherited from `foo()`
    console.log(this.a);
    };
    }
    var obj1 = { a: 2 };
    var obj2 = { a: 3 };
    var bar = foo.call(obj1);
    bar.call( obj2 ); //2, not 3!

    Mientras flecha-funciones de proporcionar una alternativa al uso de bind(), es importante tener en cuenta que ellos son esencialmente la desactivación de la tradicional this mecanismo en favor de los más ampliamente entendido léxico de alcance. (1)


    Referencias:

    1. este & Objeto de Prototipos, por Kyle Simpson. © 2014 Getify Soluciones.
    2. javascriptissexy.com – http://goo.gl/pvl0GX
    3. Angus Croll – http://goo.gl/Z2RacU
  26. 13

    Cada función el contexto de ejecución en javascript tiene un alcance contexto este parámetro que se establece por:

    1. Cómo se llama a la función (incluso como un método de objeto, el uso de llamada y aplicar, el uso de nueva)
    2. Uso de enlazar
    3. Léxicamente por la flecha de funciones (que adoptan la este de su exterior contexto de ejecución)

    Cualquier cosa que alcance contexto, se hace referencia a «este».

    Puede cambio de que establece el valor de este alcance contexto el uso de func.call, func.apply o func.bind.

    Por defecto, y lo que confunde a la mayoría de los principiantes, cuando un devolución de llamada oyente se llama después de que un evento se produce en un elemento de DOM, el alcance de contexto este valor de la función es el elemento DOM.

    jQuery hace que este trivial cambiar con jQuery.proxy.

    • Es un poco más correcto decir que cada función llamada tiene un ámbito de aplicación. En otras palabras, lo que es confuso acerca de this en Javascript es que no una propiedad intrínseca de la función en sí, sino más bien un artefacto de la forma en que se invoca la función.
    • gracias. ¿qué causa la mayor confusión acerca de esto en js es el hecho de que en todos los idiomas utilizados anteriormente (c#, c++), esto no puede ser manipulado n siempre apunta a la instancia del objeto, mientras que en js depende y puede ser cambiado cuando la invocación de funciones mediante func.call, func.bind etc. – Sushil
    • this no no de referencia en el ámbito de una función. this hará referencia a un objeto específico (o posiblemente undefined), que como hemos dicho puede ser cambiado usando .call() o .apply(). Una función de alcance es (esencialmente, cuando simplificado) de las variables que se tiene acceso, y esto depende enteramente donde la función es declarada y no puede ser cambiado.
    • un poco más correcto decir que cada llamada a la función tiene un ámbito de aplicación.» Aún más correcto decir que las funciones (y ahora los bloques) han alcance, la función de llamadas han contexto. El alcance define lo que los identificadores que pueden ser utilizados por el código de ese ámbito. El contexto define lo que los identificadores son limitados.
    • «todo Lo que el alcance es, se hace referencia a «este».» No, this y ámbito de aplicación no tienen nada que ver el uno con el otro en ES5 y antes (por ejemplo, cuando esta respuesta fue escrito). En ES2015 (aka ES6), this y ámbito de aplicación son las relacionadas con la un bastante mínimo manera wrt flecha funciones (la this en una flecha función es heredada de su ámbito envolvente), pero this nunca se refiere a un ámbito.
    • de acuerdo, el año 2010 me fue al parecer aún peor con la terminología de lo que soy ahora.
    • Pensé que probablemente estuvo relacionado con que (por ej., hace mucho tiempo; no quiero ni saber lo que yo tengo mal). Y de hecho, yo quería decir que, por encima y distrae, disculpas.

  27. 10

    Aquí es una buena fuente de this en JavaScript.

    Aquí está el resumen:

    • global de este

      En un navegador, en el ámbito global, this es el windowobjeto

      <script type="text/javascript">
      console.log(this === window); //true
      var foo = "bar";
      console.log(this.foo); //"bar"
      console.log(window.foo); //"bar"

      En node el uso de la repl, this es la parte superior del espacio de nombres. Puede referirse a él como global.

      >this
      { ArrayBuffer: [Function: ArrayBuffer],
      Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
      Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },
      ...
      >global === this
      true

      En node la ejecución de un script, this en el ámbito global, se inicia como un objeto vacío. No es lo mismo como global

      \\test.js
      console.log(this);  \\ {}
      console.log(this === global); \\ fasle
    • función de este

    Excepto en el caso de DOM controladores de eventos o cuando un thisArg es proporcionada (ver más abajo), tanto en el nodo y en un explorador con this en una función que no es llamado con new referencias en el ámbito global…

    <script type="text/javascript">
    foo = "bar";
    function testThis() {
    this.foo = "foo";
    }
    console.log(this.foo); //logs "bar"
    testThis();
    console.log(this.foo); //logs "foo"
    </script>

    Si utiliza use strict;, en cuyo caso this será undefined

    <script type="text/javascript">
    foo = "bar";
    function testThis() {
    "use strict";
    this.foo = "foo";
    }
    console.log(this.foo); //logs "bar"
    testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined 
    </script>

    Si se llama a una función con new la this será un nuevo contexto, no de referencia mundial this.

    <script type="text/javascript">
    foo = "bar";
    function testThis() {
    this.foo = "foo";
    }
    console.log(this.foo); //logs "bar"
    new testThis();
    console.log(this.foo); //logs "bar"
    console.log(new testThis().foo); //logs "foo"
    </script>
    • prototipo de este

    Funciones de crear convertido en objetos de función. Se obtiene automáticamente una especial prototype de la propiedad, que es algo que usted puede asignar valores. Cuando se crea una instancia por llamar a la función con new usted consigue el acceso a los valores que se asignan a la prototype de la propiedad. Usted tiene acceso a esos valores mediante this.

    function Thing() {
    console.log(this.foo);
    }
    Thing.prototype.foo = "bar";
    var thing = new Thing(); //logs "bar"
    console.log(thing.foo);  //logs "bar"

    Suele ser un error asignar matrices o objetos en el prototype. Si desea que las instancias que tienen cada uno sus propias matrices, cree en la función, no el prototipo.

    function Thing() {
    this.things = [];
    }
    var thing1 = new Thing();
    var thing2 = new Thing();
    thing1.things.push("foo");
    console.log(thing1.things); //logs ["foo"]
    console.log(thing2.things); //logs []
    • objeto de este

    Puede utilizar this en cualquier función de un objeto para hacer referencia a otras propiedades de ese objeto. Este no es el mismo como una instancia creada con new.

    var obj = {
    foo: "bar",
    logFoo: function () {
    console.log(this.foo);
    }
    };
    obj.logFoo(); //logs "bar"
    • De eventos DOM este

    En un HTML DOM controlador de eventos, this es siempre una referencia al elemento DOM en el evento se adjunta a

    function Listener() {
    document.getElementById("foo").addEventListener("click",
    this.handleClick);
    }
    Listener.prototype.handleClick = function (event) {
    console.log(this); //logs "<div id="foo"></div>"
    }
    var listener = new Listener();
    document.getElementById("foo").click();

    A menos que usted bind el contexto

    function Listener() {
    document.getElementById("foo").addEventListener("click", 
    this.handleClick.bind(this));
    }
    Listener.prototype.handleClick = function (event) {
    console.log(this); //logs Listener {handleClick: function}
    }
    var listener = new Listener();
    document.getElementById("foo").click();
    • HTML este

    Dentro de los atributos de HTML en el que usted puede poner JavaScript, this es una referencia al elemento.

    <div id="foo" onclick="console.log(this);"></div>
    <script type="text/javascript">
    document.getElementById("foo").click(); //logs <div id="foo"...
    </script>
    • eval este

    Puede utilizar eval para acceder a this.

    function Thing () {
    }
    Thing.prototype.foo = "bar";
    Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
    }
    var thing = new Thing();
    thing.logFoo();
    • con este

    Puede utilizar with para agregar this a la actual alcance a leer y escribir a los valores this sin hacer referencia a this explícitamente.

    function Thing () {
    }
    Thing.prototype.foo = "bar";
    Thing.prototype.logFoo = function () {
    with (this) {
    console.log(foo);
    foo = "foo";
    }
    }
    var thing = new Thing();
    thing.logFoo(); //logs "bar"
    console.log(thing.foo); //logs "foo"
    • jQuery esta

    de jQuery en muchos lugares se han this se refieren a un elemento de DOM.

    <div class="foo bar1"></div>
    <div class="foo bar2"></div>
    <script type="text/javascript">
    $(".foo").each(function () {
    console.log(this); //logs <div class="foo...
    });
    $(".foo").on("click", function () {
    console.log(this); //logs <div class="foo...
    });
    $(".foo").each(function () {
    this.click();
    });
    </script>
  28. 9

    Daniel, impresionante explicación! Un par de palabras sobre este y una buena lista de this contexto de ejecución puntero en el caso de los controladores de eventos.

    En dos palabras, this en JavaScript puntos el objeto de quién (o de cuyo contexto de ejecución) de la función se ejecute, y siempre es de sólo lectura, no se puede establecer de todos modos (por ejemplo un intento de acabar con ‘Invalid lado izquierdo de la asignación de un mensaje.

    Para los controladores de eventos: en línea de controladores de eventos, tales como <element onclick="foo">, con exclusión de cualquier otro controladores de los adjuntos anterior y antes, así que tenga cuidado y que es mejor mantenerse fuera de eventos en línea delegación en absoluto.
    Y gracias a Zara Alaverdyan que me inspiró a esta lista de ejemplos a través de un disidente debate 🙂

    • el.onclick = foo; //in the foo - obj
    • el.onclick = function () {this.style.color = '#fff';} //obj
    • el.onclick = function() {doSomething();} //In the doSomething -
      Window
    • el.addEventListener('click',foo,false) //in the foo - obj
    • el.attachEvent('onclick, function () { //this }') //window, all the
      compliance to IE :)
    • <button onclick="this.style.color = '#fff';"> //obj
    • <button onclick="foo"> //In the foo - window, but you can <button
      onclick="foo(this)">
  29. 9

    Hay mucha confusión con respecto a cómo «este» palabra clave es interpretado en JavaScript. Esperemos que este artículo va a sentar a todos aquellos a descansar de una vez por todas. Y un montón más. Por favor leer todo el artículo con cuidado. Ten en cuenta que este artículo es largo.

    Con independencia del contexto en el que se utiliza, «este» siempre hace referencia a la «objeto actual» en Javascript. Sin embargo, lo que el «objeto actual» se difiere según contexto. El contexto puede ser exactamente 1 de los 6 siguientes:

    1. Global (es decir, Fuera de todas las funciones)
    2. Dentro Directa «No Vinculado a la Función» Llamada (es decir, una función que ha no se ha obligado llamando functionName.se unen)
    3. Dentro Indirecta «No Vinculado a la Función» Llamada a través de functionName.llame y functionName.aplicar
    4. En el interior «, Vinculados a la Función» Llamada (es decir, una función que ha sido vinculado llamando functionName.se unen)
    5. Mientras que la Creación de Objetos a través de la «nueva»
    6. Interior en línea DOM controlador de eventos

    Continuación se describe cada uno de estos contextos, uno por uno:

    1. Contexto Global (es decir, Fuera de todas las funciones):

      Fuera de todas las funciones (es decir, en el contexto global) el «actual
      objeto»
      (y por lo tanto el valor de «este») es siempre el
      «ventana» objeto para navegadores.

    2. Dentro Directa «No Vinculado A La Función» Llamada:

      Dentro de un Directo «No Vinculado a la Función» Llamada, el objeto de que
      invoca la llamada a la función se convierte en el «objeto actual»
      (y por lo tanto
      el valor de «este»). Si se llama a una función sin un explícito objeto actual, el objeto actual es el «ventana» objeto (No en Modo Estricto) o indefinido (Para el Modo Estricto) . Cualquier función (o variable), definido en el
      Contexto Global automáticamente se convierte en una propiedad de la «ventana» objeto.Para el correo.g Supongamos que la función se define en el Contexto Global como

      function UserDefinedFunction(){
      alert(this)
      }

      se convierte en la propiedad del objeto window, como si se han definido
      como

      window.UserDefinedFunction=function(){
      alert(this)
      }  

      En «No de Modo Estricto», Llamando/Invocar esta función directamente a través de «UserDefinedFunction()» llamar automáticamente a/invoke
      como «de la ventana.UserDefinedFunction()» hacer «ventana» como el
      «objeto actual» (y por lo tanto el valor de «este») dentro de «UserDefinedFunction».La invocación de esta función en «No de Modo Estricto» se producirá en el siguiente

      UserDefinedFunction() //displays [object Window]  as it automatically gets invoked as window.UserDefinedFunction()

      En «Modo Estricto», Llamando/Invocando a la función directamente a través de
      «UserDefinedFunction()» se «NO» automáticamente de llamar o invocar como «de la ventana.UserDefinedFunction()».De ahí el «actual
      objeto»
      (y el valor de «este») dentro de
      «UserDefinedFunction» será indefinido. La invocación de esta función en «Modo Estricto» se producirá en el siguiente

      UserDefinedFunction() //displays undefined

      Sin embargo, invocando explícitamente el uso de la ventana de objeto tendrá como resultado
      el siguiente

      window.UserDefinedFunction() //"always displays [object Window]   irrespective of mode."

      Veamos otro ejemplo. Por favor mira el siguiente código

       function UserDefinedFunction()
      {
      alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
      }
      var o1={
      a:1,
      b:2,
      f:UserDefinedFunction
      }
      var o2={
      c:3,
      d:4,
      f:UserDefinedFunction
      }
      o1.f() //Shall display 1,2,undefined,undefined
      o2.f() //Shall display undefined,undefined,3,4

      En el ejemplo anterior, podemos ver que cuando «UserDefinedFunction» fue
      invoca a través de o1, «este» toma el valor de o1 y la
      el valor de sus propiedades «a» y «b» obtener muestra. El valor
      de «c» y «d» se muestra como indefinido como o1 ¿
      no definir estas propiedades

      De manera similar cuando se «UserDefinedFunction» se invocan a través de o2,
      «este» toma el valor de o2 y el valor de sus propiedades «c» y «d» obtener muestra.El valor de «a» y «b» se muestra como indefinido como o2 no definir estas propiedades.

    3. Dentro Indirecta «No Vinculado a la Función» Llamada a través de functionName.llame y functionName.aplicar:

      Cuando un «No Vinculado a la Función» se llama a través de
      functionName.llame o functionName.aplicar, el «objeto actual» (y por lo tanto el valor de «este») se establece en el valor de
      «este» parámetro (primer parámetro) pasó a de llamada y aplicar. El código siguiente muestra el mismo.

      function UserDefinedFunction()
      {
      alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
      }
      var o1={
      a:1,
      b:2,
      f:UserDefinedFunction
      }
      var o2={
      c:3,
      d:4,
      f:UserDefinedFunction
      }
      UserDefinedFunction.call(o1) //Shall display 1,2,undefined,undefined
      UserDefinedFunction.apply(o1) //Shall display 1,2,undefined,undefined
      UserDefinedFunction.call(o2) //Shall display undefined,undefined,3,4
      UserDefinedFunction.apply(o2) //Shall display undefined,undefined,3,4
      o1.f.call(o2) //Shall display undefined,undefined,3,4
      o1.f.apply(o2) //Shall display undefined,undefined,3,4
      o2.f.call(o1) //Shall display 1,2,undefined,undefined
      o2.f.apply(o1) //Shall display 1,2,undefined,undefined

      El código anterior muestra claramente que el «este» valor «NO
      Vinculado a la Función» puede ser alterada a través de la de llamada y aplicar. También,si el
      «este» parámetro no está explícitamente pasa a de llamada y aplicar, «objeto actual» (y por lo tanto el valor de «este») se establece en «ventana» No de modo estricto y «undefined» en modo estricto.

    4. En el interior «, Vinculados a la Función» Llamada (es decir, una función que ha sido obligado por llamar functionName.se unen):

      Una función es una función cuyo «este» valor ha sido
      fijo. El código siguiente se demuestra cómo «este» obras en caso de que
      de obligado función

      function UserDefinedFunction()
      {
      alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)
      }
      var o1={
      a:1,
      b:2,
      f:UserDefinedFunction,
      bf:null
      }
      var o2={
      c:3,
      d:4,
      f:UserDefinedFunction,
      bf:null
      }
      var bound1=UserDefinedFunction.bind(o1); //permanantly fixes "this" value of function "bound1" to Object o1
      bound1() //Shall display 1,2,undefined,undefined
      var bound2=UserDefinedFunction.bind(o2); //permanantly fixes "this" value of function "bound2" to Object o2
      bound2() //Shall display undefined,undefined,3,4
      var bound3=o1.f.bind(o2); //permanantly fixes "this" value of function "bound3" to Object o2
      bound3() //Shall display undefined,undefined,3,4
      var bound4=o2.f.bind(o1); //permanantly fixes "this" value of function "bound4" to Object o1
      bound4() //Shall display 1,2,undefined,undefined
      o1.bf=UserDefinedFunction.bind(o2) //permanantly fixes "this" value of function "o1.bf" to Object o2
      o1.bf() //Shall display undefined,undefined,3,4
      o2.bf=UserDefinedFunction.bind(o1) //permanantly fixes "this" value of function "o2.bf" to Object o1
      o2.bf() //Shall display 1,2,undefined,undefined
      bound1.call(o2) //Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
      bound1.apply(o2) //Shall still display 1,2,undefined,undefined. "apply" cannot alter the value of "this" for bound function
      o2.bf.call(o2) //Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
      o2.bf.apply(o2) //Shall still display 1,2,undefined,undefined."apply" cannot alter the value of "this" for bound function

      Como se indica en el código de arriba, «este» valor para cualquiera «, Vinculados a la Función»
      NO puede ser alterada a través de la llamada/aplicar
      . También, si el «este»
      parámetro no está explícitamente pasa a enlazar, «objeto actual»
      (y, por tanto, el valor de «este» ) se establece para «ventana» en No
      de modo estricto y «undefined» en modo estricto. Una cosa más.
      La unión de una ya obligado de la función no cambia el valor de «este».
      Queda definido como el valor establecido por primera función de enlace.

    5. Mientras que la Creación de Objetos a través de la «nueva»:

      Dentro de una función constructora de la «objeto actual» (y, por tanto, el valor de
      «este») hace referencia al objeto que está siendo creado
      a través de «nuevo» independientemente del estado de enlace de la función. Sin embargo
      si el constructor es una función que será llamada con
      conjunto predefinido de argumentos como para establecer el límite de la función.

    6. Interior en línea DOM controlador de eventos:

      Por favor mira el siguiente Fragmento de código HTML

      <button onclick='this.style.color=white'>Hello World</button>
      <div style='width:100px;height:100px;' onclick='OnDivClick(event,this)'>Hello World</div>

      La «este» en los ejemplos anteriores se refieren a «botón» elemento y el
      «div» elemento respectivamente.

      En el primer ejemplo, el color de la fuente del botón se ajustará a la
      blanco cuando se hace clic en él.

      En el segundo ejemplo, cuando el «div» elemento se hace clic en él se
      llame a la OnDivClick función con su segundo parámetro
      hace referencia al hecho clic elemento div. Sin embargo, el valor de «este»
      dentro de OnDivClick NO referencia el hecho clic div
      elemento. Será establecido como el la ventana de»objeto» o
      «undefined» en No estricta y Estricto Modos de respectivamente (si OnDivClick es un independiente de la función) o ajustada a un predefinidos
      Valor del límite (si OnDivClick es un obligado función)

    La siguiente resume el artículo completo

    1. En el Contexto Global «este» se refiere siempre a la «ventana» objeto

    2. Cuando una función se invoca, se invoca en el contexto de un
      objeto («objeto actual»). Si el objeto actual no está expresamente previsto,
      el objeto actual es el la ventana de»objeto» en NO Estrictos
      Modo de
      y «undefined» en Modo Estricto por defecto.

    3. El valor de «este» dentro de un No Obligado función es la referencia al objeto en el contexto de la cual se invoca la función («objeto actual»)

    4. El valor de «este» dentro de un No Obligado función puede ser anulada por
      llamada y aplicar métodos de la función.

    5. El valor de «este» es fijo para una función y no puede ser
      anulada por llamada y aplicar métodos de la función.

    6. De unión y ya obligado de la función no cambia el valor de «este». Queda definido como el valor establecido por primera función de enlace.

    7. El valor de «este» dentro de un constructor es el objeto que se está
      crea e inicializa

    8. El valor de «este» dentro de una línea de DOM controlador de eventos es de referencia
      para el elemento para el que el controlador de eventos es dado.

  30. 9

    Probablemente el más detallado y completo artículo sobre this es la siguiente:

    Suave explicación de ‘esta’ palabra clave ‘ en JavaScript

    La idea detrás de this es entender que la invocación de la función de los tipos tienen la importancia significativa en la configuración de this valor.


    Cuando teniendo problemas en la identificación de this, no pregúntate a ti mismo:

    Donde se this tomado de?

    pero hacer pregúntate a ti mismo:

    Cómo es la función invoca?

    Para una función de flecha (caso especial de un contexto de transparencia) pregúntate a ti mismo:

    ¿Qué valor tiene this donde la flecha función es definido?

    Esta forma de pensar es correcta cuando se trata con this y te ahorrará dolores de cabeza.

    • Además de los enlaces a su blog, tal vez usted podría ahondar un poco más en cómo hacer esas preguntas ayuda a alguien a entender la this palabra clave?
  31. 7

    Esta es la mejor explicación que he visto: Entender JavaScripts este con Claridad

    La este de referencia SIEMPRE se refiere (y tiene el valor de una
    objeto—un objeto singular—y generalmente es usado dentro de una función o de un
    el método, aunque también puede ser utilizado fuera de una función en el mundial
    ámbito de aplicación. Tenga en cuenta que cuando usamos el modo estricto, esto es el valor de
    indefinidos en funciones globales y en funciones anónimas que no son
    ligado a un objeto.

    Hay Cuatro Escenarios donde este puede ser confuso:

    1. Cuando pasamos de un método (que utiliza este) como un argumento para ser utilizado como una función de devolución de llamada.
    2. Cuando usamos un interior de función (cierre). Es importante tomar nota de que los cierres no puede tener acceso al exterior de la función este variable mediante el uso de la palabra clave this, porque el esta variable es accesible sólo por la propia función, no por el interior de las funciones.
    3. Cuando un método que se basa en este se asigna a una variable en distintos contextos, en cuyo caso este hace referencia a otro objeto que el previsto originalmente.
    4. Cuando se utiliza este junto con el enlace, se aplican, y los métodos de llamada.

    Él da ejemplos de código, explicaciones y soluciones, lo cual me pareció muy útil.

  32. 6

    Es difícil obtener una buena comprensión de la JS, o escribir más que nada trivial en ella, si no la comprende. Usted simplemente no puede permitirse el lujo de tomar una inmersión rápida 🙂 creo que la mejor manera de empezar con el JS es primero ver estos video conferencias por Douglas Crockford – http://yuiblog.com/crockford/, que cubre esto y aquello, y todo lo demás acerca de JS.

    • +1 Crockford debe ser el primer paso en cualquier viaje en JS. Sus capítulos de libro (disponible gratuitamente en internet) me puso sobre mis pies muy rápido de hecho. Él va directamente para el crucial bits.
    • Ha, y ahora Crockford no como esto y programas sin utilizar. 😉
    • El enlace está muerto.
  33. 6

    En pseudoclassical términos, la forma en que muchos de conferencias enseñar a los ‘esta’ palabra clave ‘ es como un objeto instanciado por un objeto o clase de constructor. Cada vez que un nuevo objeto se construye a partir de una clase, imaginar que bajo el capó de una instancia local de un ‘este’ objeto se crea y se devuelve. Recuerdo que enseña como este:

    function Car(make, model, year) {
    var this = {}; //under the hood, so to speak
    this.make = make;
    this.model = model;
    this.year = year;
    return this; //under the hood
    }
    var mycar = new Car('Eagle', 'Talon TSi', 1993);
    //========= under the hood
    var this = {};
    this.make = 'Eagle';
    this.model = 'Talon TSi';
    this.year = 1993;
    return this;
  34. 5

    this es uno de los mal entendido concepto en JavaScript ya que se comporta de manera diferente de un lugar a otro. Simplemente, this se refiere a la «propietario» de la función que se están ejecutando actualmente.

    this ayuda a obtener el objeto actual (un.k.una. contexto de ejecución) con los que trabajamos. Si usted entiende en la que el objeto de la función actual es conseguir que se ejecuta, puede entender fácilmente lo actual this es

    var val = "window.val"
    var obj = {
    val: "obj.val",
    innerMethod: function () {
    var val = "obj.val.inner",
    func = function () {
    var self = this;
    return self.val;
    };
    return func;
    },
    outerMethod: function(){
    return this.val;
    }
    };
    //This actually gets executed inside window object 
    console.log(obj.innerMethod()()); //returns window.val
    //Breakdown in to 2 lines explains this in detail
    var _inn = obj.innerMethod();
    console.log(_inn()); //returns window.val
    console.log(obj.outerMethod()); //returns obj.val

    Anterior, podemos crear 3 variables con el mismo nombre de ‘val’. Uno en el contexto global, uno de ellos dentro de obj y el otro en el interior de innerMethod de obj. JavaScript resuelve identificadores dentro de un contexto determinado por subir el ámbito de la cadena de locales a globales.


    Pocos lugares donde this pueden ser diferenciados

    Llamar a un método de un objeto

    var status = 1;
    var helper = {
    status : 2,
    getStatus: function () {
    return this.status;
    }
    };
    var theStatus1 = helper.getStatus(); //line1
    console.log(theStatus1); //2
    var theStatus2 = helper.getStatus;
    console.log(theStatus2()); //1

    Cuando line1 se ejecuta, JavaScript, que establece un contexto de ejecución (CE) para la llamada a la función, la configuración de this a la objeto referenciado por lo que sucedió antes de que el último «.». así, en la última línea se puede entender que a() fue ejecutado en el contexto global que es el window.

    Con Constructor

    this puede ser usado para referirse al objeto que está siendo creado

    function Person(name){
    this.personName = name;
    this.sayHello = function(){
    return "Hello " + this.personName;
    }
    }
    var person1 = new Person('Scott');
    console.log(person1.sayHello()); //Hello Scott
    var person2 = new Person('Hugh');
    var sayHelloP2 = person2.sayHello;
    console.log(sayHelloP2()); //Hello undefined

    Cuando los nuevos Person() se ejecuta, un nuevo objeto es creado. Person se llama y su this se establece en referencia a ese nuevo objeto.

    Llamada a la función

    function testFunc() {
    this.name = "Name";
    this.myCustomAttribute = "Custom Attribute";
    return this;
    }
    var whatIsThis = testFunc();
    console.log(whatIsThis); //window
    var whatIsThis2 = new testFunc();
    console.log(whatIsThis2);  //testFunc() /object
    console.log(window.myCustomAttribute); //Custom Attribute 

    Si perdemos new palabra clave, whatIsThis se refiere a la mayoría de contexto global se puede encontrar(window)

    Con los controladores de eventos

    Si el controlador de eventos es en línea, this se refiere al objeto global

    <script type="application/javascript">
    function click_handler() {
    alert(this); //alerts the window object
    }
    </script>
    <button id='thebutton' onclick='click_handler()'>Click me!</button>

    Cuando la adición de controlador de eventos a través de JavaScript, this se refiere al elemento DOM que ha generado el evento.


  35. 5

    El valor de «esto» depende del «contexto» en que se ejecuta la función. El contexto puede ser cualquier objeto o el objeto global, es decir, la ventana.

    Por lo que la Semántica de «este» es diferente de los tradicionales lenguajes de programación orientada a objetos. Y causa problemas:
    1. cuando una función se pasa a otra variable (lo más probable, una devolución de llamada); y 2. cuando el cierre se invoca desde un método de miembro de una clase.

    En ambos casos, se establece en la ventana.

  36. 3

    Whould este ayuda? (La mayoría de la confusión de ‘esta’ en javascript que viene del hecho de que generalmente no está vinculada a su objeto, sino a la actual ejecución de alcance-que pueden no ser exactamente cómo funciona, pero siempre se siente como que para mí, ver el artículo para una explicación completa)

    • Sería mejor decir que tiene que ver con el «para el contexto de ejecución actual«. Excepto ES6 (proyecto de) los cambios que con la flecha de funciones, donde este se resuelve en el exterior contexto de ejecución.
  37. 3

    Un poco de info acerca de este palabra clave

    Vamos a iniciar sesión this palabra clave para la consola en el ámbito global, sin más código, pero

    console.log(this)

    En Cliente/Navegador this de palabras clave es un objeto global que es window

    console.log(this === window) //true

    y

    En Servidor/Node/tiempo de ejecución de Javascript this palabra clave es también un objeto global que es module.exports

    console.log(this === module.exports) //true
    console.log(this === exports) //true

    Tenga en cuenta exports es sólo una referencia a module.exports

  38. 1

    este uso para el Ámbito como este

      <script type="text/javascript" language="javascript">
    $('#tbleName tbody tr').each(function{
    var txt='';
    txt += $(this).find("td").eq(0).text();
    \\same as above but synatx different
    var txt1='';
    txt1+=$('#tbleName tbody tr').eq(0).text();
    alert(txt1)
    });
    </script>

    valor de txt1 y txt es el mismo
    en el ejemplo de Arriba
    $(this)=$(‘#tbleName tbody tr’) es el Mismo

  39. 1

    Tengo una opinión diferente sobre la this de las otras respuestas que espero que sea de ayuda.

    Una manera de ver el JavaScript para ver que solo hay 1 forma de llamar a una función1. Es

    functionObject.call(objectForThis, arg0, arg1, arg2, ...);

    Siempre hay algún valor proporcionado para objectForThis.

    Todo lo demás es azúcar sintáctico para functionObject.call

    Así, todo lo demás puede ser descrito por la forma en que se traduce en functionObject.call.

    Si usted acaba de llamar a una función, a continuación, this es el «objeto global», que en el navegador es la ventana

    JS:

    function foo() {
    console.log(this);
    }
    foo();  //this is the window object

    En otras palabras,

    foo();

    se tradujo en

    foo.call(window);

    Tenga en cuenta que si utiliza el modo estricto, a continuación, this será undefined

    JS:

    'use strict';
    function foo() {
    console.log(this);
    }
    foo();  //this is the window object

    que significa

    En otras palabras,

    foo();

    se tradujo en

    foo.call(undefined);

    En JavaScript hay operadores como + y - y *. También existe el operador punto que es .

    La . operador cuando se utiliza con una función en el derecho y un objeto a la izquierda significa «pasar de objeto como this a la función.

    Ejemplo

    JS:

    const bar = {
    name: 'bar',
    foo() { 
    console.log(this); 
    },
    };
    bar.foo();  //this is bar

    En otras palabras bar.foo() se traduce en const temp = bar.foo; temp.call(bar);

    Tenga en cuenta que no importa cómo la función fue creado (la mayoría…). Todos estos se producen los mismos resultados

    JS:

    const bar = {
    name: 'bar',
    fn1() { console.log(this); },
    fn2: function() { console.log(this); },
    fn3: otherFunction,
    };
    function otherFunction() { console.log(this) };
    bar.fn1();  //this is bar
    bar.fn2();  //this is bar
    bar.fn3();  //this is bar

    De nuevo todos estos son sólo azúcar sintáctico para

    { const temp = bar.fn1; temp.call(bar); }
    { const temp = bar.fn2; temp.call(bar); }
    { const temp = bar.fn3; temp.call(bar); }

    Otra arruga es el prototipo de la cadena. Cuando se utiliza a.b JavaScript busca primero en el objeto al que hace referencia directamente por a de la propiedad b. Si b no se encuentra en el objeto, a continuación, JavaScript mirada en el objeto prototipo de encontrar b.

    Hay diferentes maneras de definir un objeto prototipo, el más común en 2019 es el class palabra clave. Para los fines de this aunque no importa. Lo que importa es que como se ve en el objeto a de propiedad b si encuentra la propiedad b en el objeto o en la cadena de prototipos si b termina siendo una función, a continuación, las mismas reglas aplican. La función b referencias se llama mediante la call método y pasando a como objectForThis como se muestra la parte superior de esta respuesta.

    Ahora. Vamos a hacer una función que establece explícitamente this antes de llamar a otra función y, a continuación, llame a con los . (dot) operador

    JS:

    function foo() {
    console.log(this);
    }
    function bar() {
    const objectForThis = {name: 'moo'}
    foo.call(objectForThis);  //explicitly passing objectForThis
    }
    const obj = {
    bar,
    };
    obj.bar();  

    Después de la traducción para el uso call, obj.bar() se convierte en const temp = obj.bar; temp.call(obj);. Cuando entramos en la bar función llamamos foo pero de forma explícita que pasa en otro objeto para objectForThis así que cuando llegamos a foo this es que el objeto interno.

    Esto es lo que tanto bind y => funciones con eficacia. Son más azúcar sintáctico. Efectivamente construir una nueva función invisible exactamente como bar arriba que se establece explícitamente this antes de que llame a cualquier función que se especifica. En el caso de bind this se establece a lo que sea que pase a bind.

    JS:

    function foo() {
    console.log(this);
    }
    const bar = foo.bind({name: 'moo'});
    //bind created a new invisible function that calls foo with the bound object.
    bar();  
    //the objectForThis we are passing to bar here is ignored because
    //the invisible function that bind created will call foo with with
    //the object we bound above
    bar.call({name: 'other'});

    Tenga en cuenta que si functionObject.bind no existiera, podríamos hacer nuestra propia como este

    function bind(fn, objectForThis) {
    return function(...args) {
    return fn.call(objectForthis, ...args);
    };
    }

    y, a continuación, que podríamos llamar como este

    function foo() {
    console.log(this);
    }
    const bar = bind(foo, {name:'abc'});

    Flecha funciones, la => operador azúcar sintáctico para enlazar

    const a = () => {console.log(this)};

    es el mismo que

    const tempFn = function() {console.log(this)}; 
    const a = tempFn.bind(this);

    Igual bind, una nueva función invisible se crea que llama a la función dada con un valor de límite para objectForThis pero a diferencia de bind el objeto enlazado es implícita. Es lo que this sucede cuando el => operador se utiliza.

    Por lo tanto, como las reglas de arriba

    const a = () => { console.log(this); }  //this is the global object
    'use strict';
    const a = () => { console.log(this); }  //this is undefined
    function foo() {
    return () => { console.log(this); }
    }
    const obj = {
    foo,
    };
    const b = obj.foo();
    b();

    obj.foo() se traduce en const temp = obj.foo; temp.call(obj); lo que significa que el operador flecha en el interior de foo se unen obj a una nueva invisible de la función y el rendimiento que de nuevo invisible de la función que se asigna a b. b() va a trabajar como siempre lo ha hecho como b.call(window) o b.call(undefined) llamar a la nueva función invisible que foo creado. Que función invisible ignora la this pasa y pasa obj como objectForThis` para la función de flecha.

    El código anterior se traduce en

    function foo() {
    function tempFn() {
    console.log(this);
    }
    return tempFn.bind(this);
    }
    const obj = {
    foo,
    };
    const b = obj.foo();
    b.call(window or undefined if strict mode);

    1apply otra función es similar a la call

    functionName.apply(objectForThis, arrayOfArgs);

    Pero como de ES6 conceptualmente incluso se puede traducir que en

    functionName.call(objectForThis, ...arrayOfArgs);
  40. 0

    Resumen this Javascript:

    • El valor de this está determinado por cómo se invoca la función no se, en donde fue creada!
    • Generalmente el valor de this es determinado por el Objeto que está a la izquierda del punto. (window en el espacio global)
    • En los detectores de eventos el valor de this se refiere al elemento DOM en el cual el evento fue llamado.
    • Cuando se llama a la función con el new palabra clave el valor de this hace referencia al objeto recién creado
    • Puede manipular el valor de this con las funciones de: call, apply, bind

    Ejemplo:

    JS:

    let object = {
    prop1: function () {console.log(this);}
    }
    object.prop1();   //object is left of the dot, thus this is object
    const myFunction = object.prop1 //We store the function in the variable myFunction
    myFunction(); //Here we are in the global space
    //myFunction is a property on the global object
    //Therefore it logs the window object
    

    Detectores de eventos de ejemplo:

    JS:

    document.querySelector('.foo').addEventListener('click', function () {
    console.log(this);   //This refers to the DOM element the eventListener was invoked from
    })
    document.querySelector('.foo').addEventListener('click', () => {
    console.log(this);  //Tip, es6 arrow function don't have their own binding to the this v
    })                    //Therefore this will log the global object

    CSS:

    .foo:hover {
    color: red;
    cursor: pointer;
    }

    HTML:

    <div class="foo">click me</div>

    Ejemplo constructor:

    JS:

    function Person (name) {
    this.name = name;
    }
    const me = new Person('Willem');
    //When using the new keyword the this in the constructor function will refer to the newly created object
    console.log(me.name); 
    //Therefore, the name property was placed on the object created with new keyword.

  41. -1

    Respuesta es Simple:

    palabra»this» es siempre la persona a cargo en el contexto de la invocación. Ellos se mencionan a continuación.

    1. SE LLAMA A LA FUNCIÓN CON LA PALABRA CLAVE NEW

      Si se llama a la función con la palabra clave NEW, a continuación, ESTE estará obligado al objeto recién creado.

      function Car(){
      this.name="BMW";
      }
      const myCar=new Car();
      myCar.name; //output "BMW"

      En el anterior, este estará obligado a ‘myCar’ objeto

    2. SE LLAMA A LA FUNCIÓN EXPLÍCITAMENTE EL USO DE LA LLAMADA Y LA APLICACIÓN DE MÉTODOS.

      En este caso, se enlazará con el objeto de que explícitamente se pasa a la función.

      var obj1={"name":"bond"};
      function printMessage(msg){
      return msg+" "+this.name;
      }
      const message=printMessage.call(obj1,"my name is ");
      console.log(message); //HERE THIS WILL BE BOUND TO obj1 WHICH WE PASSED EXPLICITLY. SAME FOR APPLY METHOD ALSO.
    3. SI SE LLAMA A LA FUNCIÓN CON OBJETO DE FORMA IMPLÍCITA, A CONTINUACIÓN, ESTE ESTARÁ OBLIGADO A ESE OBJETO

      var obj1={
      "name":"bond",
      getName: function () {
      return this.name;
      }
      };
      const newname=obj1.getName();
      console.log(newname); //HERE THIS WILL BE BOUND TO obj1(WHITCHEVER OBJECT IS MENTIONED BEFORE THE DOT THIS WILL BE BOUND TO THAT)
    4. CUANDO SE LLAMA A LA FUNCIÓN SIN NINGÚN TIPO DE CONTEXTO, A CONTINUACIÓN, ESTE ESTARÁ OBLIGADO A OBJETO GLOBAL

      const util = {
      name: 'Utility',
      getName: function () {
      return this.name;
      };
      const getName=util.getName;
      const newName=getName();
      console.log(newName); //IF THIS EXECUTED IN BROWSER THIS WILL BE  BOUND TO WINDOW OBJECT. IF THIS EXECUTED IN SERVER THIS WILL BE BOUND TO GLOBAL OBJECT
    5. EN MODO ESTRICTO, ESTE SERÁ INDEFINIDO

      function setName(name){
      "use strict"
      return this.name;
      }
      setName(); //WILL BE ERROR SAYING name IS UNDEFINED. 

Dejar respuesta

Please enter your comment!
Please enter your name here