1. Esto apunta al objeto de instanciación del constructor
En el artículo anterior, mencionamos la diferencia entre usar constructores nuevos y no llamados, como se muestra en el siguiente ejemplo:
La copia del código es la siguiente:
función benjamin (nombre de usuario, sexo) {
this.Username = UserName;
this.sex = sexo;
}
var benjamin = new Benjamin ("Zuojj", "masculino");
// salidas: benjamin {sexo: "masculino", nombre de usuario: "zuoj"}
console.log (Benjamin);
var ben = benjamin ("zhangsan", "hembra");
// salidas: indefinido
console.log (ben);
Cuando el constructor se llama como una función normal, no se devuelve ningún valor, y esto apunta al objeto global. Entonces, ¿cómo podemos evitar los problemas causados por la falta de nuevas palabras clave?
La copia del código es la siguiente:
función benjamin (nombre de usuario, sexo) {
// verifique si "esto" es un objeto "benjamin"
if (esta instancia de Benjamin) {
this.Username = UserName;
this.sex = sexo;
}demás {
devolver nuevo Benjamin (nombre de usuario, sexo);
}
}
var benjamin = new Benjamin ("Zuojj", "masculino");
// salidas: benjamin {sexo: "masculino", nombre de usuario: "zuoj"}
console.log (Benjamin);
var ben = benjamin ("zhangsan", "hembra");
// salidas: benjamin {nombre de usuario: "zhangsan", sexo: "mujer"}
console.log (ben);
En el ejemplo anterior, primero verificamos si esta es una instancia de Benjammin, si no, usa nuevo para llamar automáticamente al constructor e instanciarlo, lo que significa que ya no debemos preocuparnos por faltar el constructor de instanciación de nuevas palabras clave. Por supuesto, podemos desarrollar un mal hábito de esta manera. ¿Qué pasa si evitamos este fenómeno? Podemos lanzar un error como este:
La copia del código es la siguiente:
función benjamin (nombre de usuario, sexo) {
// verifique si "esto" es un objeto "benjamin"
if (esta instancia de Benjamin) {
this.Username = UserName;
this.sex = sexo;
}demás {
// Si no, tire el error.
arrojar un nuevo error ("` benjamin` invocado sin 'nuevo' ");
}
}
2. Esto apunta al objeto que llama a la función
Vea el siguiente ejemplo:
La copia del código es la siguiente:
var x = 10;
var obj = {
X: 10,
salida: function () {
// salidas: verdadero
console.log (this === obj);
devolver esto.x;
},
Innerrobj: {
x: 30,
salida: function () {
// salidas: verdadero
console.log (this === obj.innerobj);
devolver esto.x;
}
}
};
// salidas: 10
console.log (obj.output ());
// salidas: 30
console.log (obj.innerobj.output ());
3. Esto apunta al objeto global
Al discutir el constructor anterior, también discutimos que cuando lo nuevo no es aplicable, esto apuntará al objeto global. Echemos un vistazo a dos ejemplos comunes que son propensos a los errores:
La copia del código es la siguiente:
var x = 100;
var obj = {
X: 10,
salida: function () {
(función() {
// salidas: verdadero
console.log (this === ventana);
// Salidas: Inter: 100
console.log ("Inner:" + this.x);
}) ();
devolver esto.x;
}
};
// salidas: 10
console.log (obj.output ());
Al usar cierres, el alcance cambia, y esto apunta a la ventana (en el navegador).
La copia del código es la siguiente:
var x = 100;
var obj = {
X: 10,
salida: function () {
devolver esto.x;
}
};
salida var = obj.output;
// salidas: 10
console.log (obj.output ());
// salidas: 100
console.log (output ());
var obj2 = {
x: 30,
Salida: obj.output
}
// salidas: 30
console.log (obj2.output ());
En este momento, esto siempre apunta al objeto en el momento de la llamada de función.
4. Esto apunta al objeto asignado por el método Aplicar/callar ()
La copia del código es la siguiente:
var x = 100;
var obj = {
X: 10,
salida: function () {
devolver esto.x;
}
};
// salidas: 10
console.log (obj.output ());
var obj2 = {
X: 40,
Salida: obj.output
}
// salidas: 40
console.log (obj.output.call (obj2));
// salidas: 10
console.log (obj2.output.apply (obj));
5. Esta de la función de devolución de llamada apunta al objeto señalado por esta función que llama a la devolución de llamada.
La copia del código es la siguiente:
// <input type = "text" value = "3" id = "txt_username">
$ ("#username"). on ("hacer clic", function () {
console.log (this.Value);
});
6. Esto en function.prototype.bind
El método bind () crea una nueva función que, cuando se llama, tiene su palabra clave establecida en el valor proporcionado, con una secuencia dada de argumentos que preceden a cualquiera proporcionada cuando se llama la nueva función.
Ejemplo 1:
La copia del código es la siguiente:
función persona () {
devolver esto.name;
}
//Function.prototype.bind
var per = persona.bind ({
Nombre: "Zuojj"
});
console.log (per);
var obj = {
Nombre: "Ben",
persona: persona,
PER: PER
};
// salidas: Ben, Zuojj
console.log (obj.person (), obj.per ());
Ejemplo 2:
La copia del código es la siguiente:
this.x = 9;
módulo var = {
X: 81,
getx: function () {return this.x; }
};
// salidas: 81
console.log (módulo.getx ());
var getx = module.getx;
// salidas: 9, porque en este caso, "esto" se refiere al objeto global
console.log (getx);
// crear una nueva función con 'este' Bound to Module
var boundgetx = getx.bind (módulo);
// salidas: 81
console.log (BoundgetX ());