Eu sempre tive um sentimento plausível sobre isso em JavaScript. Hoje de repente me senti esclarecido. Vou gravar aqui.
Vejamos uma castanha primeiro:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> usando este </title> <script type = "text/javascript"> var car, tesla; car {)t ({) {this.start = function () {console.log ('car idair);}; Carkey = document.getElementById ('car_key'); carkey.onClick = function () {this.start (); };} Retorne tis;} tesla = new Car (); tesla.turnkye (); </script> </ad head> <body> <input type = "button" id = "car_key" value = "test"/> </body> </html>À primeira vista, não há problema com este código, mas o entendimento errado disso leva ao resultado errado. Ligamos o evento de clique no elemento car_key e acreditamos que o aninhamento do evento de cliques de encadernação na classe de carros pode permitir que esse elemento DOM acesse o contexto do carro. Esse método parece razoável, mas infelizmente não funciona.
Em JavaScript, essa palavra -chave sempre aponta para o proprietário do escopo que está sendo executado.
Por favor, entenda cuidadosamente a frase acima. Como sabemos, as chamadas de função produzirão um novo escopo, e um pequeno evento OnClick é acionado, e isso aponta para o elemento DOM em vez da classe de carros.
Então, como fazemos isso para fazê -lo funcionar corretamente? Geralmente atribuímos isso a uma variável gratuita local (como essa, isso, eu, eu, eu etc., que são refletidas em muitas estruturas) para evitar os problemas causados pelo escopo. Aqui usamos variáveis locais para substituir o método anterior:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso deste </title> </ad Head> <body> <input type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var, tesla; caroneio; {this.start = function () {console.log ('car iday');}; this. };} retornar este;} tesla = new Car (); tesla.turnkye (); </script> </body> </html>Como essa é uma variável livre, a partida do evento OnClick não causa sua redefinição.
Se você estiver familiarizado com o ES6, pode usar o símbolo de seta de gordura, que é mais simples e mais fácil de entender, da seguinte maneira:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso deste </title> </ad Head> <body> <input type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var, tesla; caroneio; {this.start = function () {console.log ('carro iniciado');}; this.Turnkye = function () {// var that = this; var carkey = document.getElementById ('car_key'); // carkey.onClick = function () {// that.start (); //a} ;carkey.onClick=()=> this.start();} return this;} tesla = new car (); tesla.turnkye (); </script> </body> </html>Obviamente, também podemos usar o método da função de ligação para resolver este problema: o seguinte
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso deste </title> </ad Head> <body> <input type = "button" id = "car_key" value = "test"/> <script type = "text/javascript"> var, tesla; caroneio; {this.start = function () {console.log ('carro iniciado');}; var click = function () {this.start (); } this.Turnkye = function () {// var th That = this; var carkey = document.getElementById ('car_key'); carkey.onclick = click.bind (this);} retorna tis;} tesla = new car (); tesla.turnkye (); </script> </body </body)Na verdade, eu só sabia como escrever essas armadilhas quando estava aprendendo reagir e quando eu estava vinculando eventos. Naquela época, eu só sabia como escrevê -los assim, mas não sabia o que aconteceu. Hoje de repente me senti esclarecido. Espero que seja útil para todos.