No entiendo el uso detallado de esto en js. ¿Alguien puede ayudarme a responderlo en detalle?

En lenguajes de programación orientados a objetos, estamos muy familiarizados con la palabra clave this. Por ejemplo, C, C# y Java proporcionan esta palabra clave. Aunque es difícil al principio del aprendizaje, una vez que la comprende, es muy conveniente y significativa de usar. JavaScript también proporciona esta palabra clave, pero su uso es mucho más "confuso" que en los lenguajes OO clásicos.

Echemos un vistazo a lo que resulta confuso acerca de las diversas formas de usar esto en JavaScript.

1. Utilice esta palabra clave en línea en el atributo de evento del elemento HTML:

lt; div onclick="

// Puede utilizar esto dentro de

"gt; division elementlt; /divgt;

lt; div onclick="

// Puedes usar esto dentro

" gt; elemento de divisiónlt; / divgt;

El método más utilizado es utilizar este: javascirpt: EventHandler(this), en este formulario. Sin embargo, puedes escribir cualquier declaración legal de JavaScript aquí. Si lo deseas, puedes definir una clase aquí (pero será una clase interna). El principio aquí es que el motor de script genera un método miembro anónimo del objeto de instancia div y onclick apunta a este método.

2. Utilice el método DOM para utilizar esta palabra clave en la función de procesamiento de eventos:

lt; div id="elmtDiv"gt; division elementlt;/divgt;

lt;mce:script language="javascript"gt;lt;!--

var div = document.getElementById('elmtDiv');

div.attachEvent( ' onclick', EventHandler);

function EventHandler()

{

// Usa esto aquí

}

// --gt;lt;/mce:scriptgt;

lt;div id="elmtDiv"gt;elemento de divisiónlt;/divgt;

lt;mce: script language="javascript"gt;lt;!--

var div = document.getElementById('elmtDiv');

div.attachEvent('onclick', EventHandler);

function EventHandler()

{

// Usa esto aquí

}

// - - gt;lt;/mce:scriptgt;

En este momento, la palabra clave this en el método EventHandler() indica que el objeto es el objeto de ventana de IE.

Esto se debe a que EventHandler es solo una función ordinaria. Después de adjuntarEvent, la llamada del motor de secuencia de comandos no tiene nada que ver con el objeto div en sí. Al mismo tiempo, puede observar el atributo de llamada de EventHandler, que es igual a nulo. Si queremos obtener la referencia del objeto div en este método, debemos usar: this.event.srcElement.

3. Utilice DHTML para utilizar esta palabra clave en la función de procesamiento de eventos:

lt; div id="elmtDiv"gt; division elementlt;/divgt; >lt;mce:script language="javascript"gt;lt;!--

var div = document.getElementById('elmtDiv');

div.onclick = function ( )

{

// Utilice esto aquí

}

/ --gt;lt;/mce:scriptgt ; /p>

lt;div id="elmtDiv"gt;elemento de divisiónlt;/divgt;

lt;mce:script language="javascript"gt;lt;!--

var div = document.getElementById('elmtDiv');

div.onclick = function()

{

// aquí Usar this

};

// --gt; lt; /mce:scriptgt;

El contenido indicado por la palabra clave this aquí es el objeto del elemento div. Por ejemplo, usar DHTML en el script para asignar directamente un método EventHandler a div.onclick equivale a agregar un método miembro a la instancia del objeto div. La diferencia entre este método y el primer método es que el primer método usa el método HTML, y aquí está el método DHTML. El motor de análisis de scripts en este último ya no generará métodos anónimos.

4. Utilice esta palabra clave en la definición de clase:

function JSClass()

{

var myName = 'jsclass';

this.m_Name = 'JSClass';

}

JSClass.prototype.ToString = function()

{

alert(miNombre ', ' this.m_Name);

};

var jc = new JSClass(); );

función JSClass()

{

var myName = 'jsclass'

this.m_Name = 'JSClass';

}

JSClass.prototype.ToString = function()

{

alert(myName ', ' this.m_Name);

};

var jc = new JSClass();

jc.ToString()

Esta es una clase de simulación de JavaScript. definición El uso de esto es muy similar a la situación en otros lenguajes OO. Sin embargo, es necesario que se haga referencia a las propiedades y métodos de los miembros utilizando la palabra clave this. Si ejecuta el programa anterior, se le informará que myName no está definido.

5. Agregue la palabra clave this en el método prototipo al objeto interno del motor de script:

function.prototype.GetName = function()

{

var fnName = this.toString();

fnName = fnName.substr(0, fnName.indexOf('('));

fnName = fnName. reemplazar (/^función/, '');

return fnName.replace(/(^\s )|(\s $)/g,

}

función foo(){}

alert(foo.GetName()

función.prototype.GetName = función()

{

var fnName = this.toString();

fnName = fnName.substr(0, fnName.indexOf('('));

fnName = fnName.replace(/^función/, '');

return fnName.replace(/(^\s )|(\s $)/g, ''); >

}

function foo(){}

alert(foo.GetName());

Esto aquí se refiere al prototipo agregado. de la clase es algo similar a la definición de clase en 4, no tiene nada de especial.

6. Combinado con 2amp; 4, hablemos de un uso confuso de esta palabra clave:

¿ver copia simple en portapapeles?

función JSClass()

p >

{

this.m_Text = 'elemento de división';

this.m_Element = document.createElement('DIV'); . m_Element.innerHTML = this.m_Text;

this.m_Element.attachEvent('onclick', this.ToString

}

JSClass.prototype). renderizar = función()

{

document.body.appendChild(this.m_Element

}

JSClass.prototype. ToString = function()

{

alert(this.m_Text

}

var jc = new JSClass(); ;

jc.Render();

jc.ToString();

función JSClass()

{

this.m_Text = 'elemento de división';

this.m_Element = document.createElement('DIV');

this.m_Element.innerHTML = this.m_Text;

this.m_Element.attachEvent('onclick', this.ToString);

}

JSClass.prototype.Render = function()

{

document.body.appendChild(this.m_Element

}

JSClass.prototype.ToString = function()

{

alerta(this.m_Text);

};

var jc = nueva JSClass(); jc.Render ();

jc.ToString();

Déjame hablar sobre los resultados. Después de ejecutar la página, se mostrará: "elemento de división". , haga clic en el texto "elemento de división" para cambiar. Se mostrará: "indefinido".

7. Utilice esta palabra clave en la expresión CSS:

lt; table width="100" height="100"gt

lt; /p>

lt; tdgt;

lt; div style="ancho: expresión(este.parentElement.width);

alto: expresión(este .parentElement.height) );"gt;

elemento de divisiónlt;/divgt;

lt;/tdgt;

lt;/trgt;

lt ;/tablegt;

lt;table width="100" height="100"gt;

lt;trgt;

lt;

lt; p>

lt;div style="ancho: expresión(this.parentElement.width);

altura: expresión(this.parentElement.height);"gt;

elemento de divisiónlt;/divgt;

lt;/tdgt;

lt;/trgt;

lt;/tablegt;

Solo Piense en esto aquí como lo mismo que en 1. También se refiere a la instancia del objeto del elemento div en sí.

8. Utilice esta palabra clave en la función interna de la función:

¿ver copia simple en portapapeles?

función OuterFoo()

{

this.Name = 'Nombre externo';

función InnerFoo()

{

var Nombre = 'Nombre interno' ;

alerta(Nombre ', ' this.Name

}

return InnerFoo

}

OuterFoo()();

función OuterFoo()

{

this.Name = 'Nombre externo'

; function InnerFoo()

{

var Nombre = 'Nombre interno'

alerta(Nombre ', ' this.Name

return InnerFoo;

}

OuterFoo()();

El resultado de ejecución es: "Nombre interno, Nombre externo".

Según nuestra explicación en 2, parece más razonable si el resultado aquí es "Nombre interno, indefinido", ¿verdad? Pero el resultado correcto es de hecho el primero. Esto se debe al problema del alcance de la variable de JavaScript. Para obtener información detallada, se recomienda consultar el artículo "Resulta que la palabra clave 'var' en JScript todavía tiene un artículo". la respuesta.

En resumen, hay tres formas de utilizar esto en JavaScript (consulte el texto original para conocer su uso detallado):

1. Úselo en línea en atributos de eventos de elementos HTML o expresiones CSS esta palabra clave - corresponde a 1 y 7 del texto original

2. Utilice esta palabra clave en la función de procesamiento de eventos - corresponde a 2 y 3 del texto original

Que se puede dividir en dos tipos Método

(1) Método DOM: el resultado de este método es que apunta al objeto de ventana

(2) Método DHTML: el resultado de este método es que esto apunta a la instancia del objeto del elemento div del objeto de ventana

3. Utilice esta palabra clave en la definición de clase y úsela en sus funciones internas o funciones miembro (principalmente generadas por el prototipo), correspondientes a 4, 5 y 8 del texto original

Cabe señalar que una función también es un objeto, por lo que es necesario distinguir entre definición de variable y definición de variable miembro, de la siguiente manera:

ver copia simple to clipboardprint?

var variableName; / /Definición de variable

//Alcance: dentro del alcance de la definición de función

//Método de uso: usar variableName directamente

p>

this.varName; //Definición de variable miembro

//Alcance: dentro del alcance de definición del objeto de función y su función miembro

//Método de uso: this .varName

var variableName; // Definición de variable

// Alcance: dentro del alcance de la definición de función

// Método de uso: usar directamente variableName

this.varName; //Definición de variable miembro

//Alcance: dentro del alcance de definición del objeto de función y su función miembro

//Método de uso: this.varName

Los tres tipos de esto resumidos anteriormente Entre los métodos de uso, el primero es más fácil de entender. El programa mencionado en el punto 6 del artículo original ha sido probado y mejorado de la siguiente manera para ilustrar. últimos dos métodos de uso:

ver copia simple en el portapapeles

lt;htmlgt

lt;headgt

lt;meta http; -equiv="content-type" content="text/html; charset= UTF-8"/gt;

lt; títulogt; Prueba "this"lt;/titlegt; >lt; mce:script type="text/javascript"gt;lt; !--

función JSClass()

{

var varText = " variable func!"; //Variables ordinarias en la función

this.m_Text = 'miembro func!';

//Variables miembro de la clase de función

this.m_Element = document.createElement('DIV'); //Variables miembro, crea un objeto div

this.m_Element.innerHTML = varText ; //Usa variables ordinarias de la función

this.m_Element.attachEvent('onclick', this.ToString //Conecta la función del controlador al evento de este objeto