¿Cómo la palabra «this» de trabajo?

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>

OriginalEl autor Mahesha999

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.

OriginalEl autor Awal Garg

«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

OriginalEl autor arunjitsingh

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

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. ⁽²⁾

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. ⁽¹⁾

---

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

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.

OriginalEl autor blockhead

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

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

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

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

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

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.

OriginalEl autor tathagata

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

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.

---

• También puede manipular el contexto de uso de .apply() .call() y .bind()
• JQuery proxy es otra forma que puede utilizar para asegurarse de que esta en una función que será el valor que usted desea. (Marque La comprensión de dólares.proxy(), jQuery.proxy() uso de)
• ¿Qué significa var = significa en JavaScript

OriginalEl autor Nipuna

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

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)

OriginalEl autor Simon Groenewolt

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

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

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. 

OriginalEl autor PALLAMOLLA SAI

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);
   

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 

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.

«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

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.

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. ⁽²⁾

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. ⁽¹⁾

---

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

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.

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>