Visão geral conceitual isso
Quando uma função é criada, uma palavra -chave que é criada (em segundo plano), que está vinculada a um objeto, e a função opera nesse objeto. Em outras palavras, a palavra -chave que isso pode ser usada em uma função, uma referência a um objeto e a função é a propriedade ou método desse objeto.
Vejamos este objeto:
<! Doctype html> <html lang = "en"> <body> <cript> var code = {viva: true, idade: 23, gênero: 'masculino', getGender: function () {return cody.gender;}}; console.log (cody.getgender ()); // Logs 'masculino' </script> </body> </html>Observe que, na função Getgender, pois dentro do objeto Cody, podemos obter o atributo de gênero (ou seja, Cody.gender). Você também pode usar isso para obter o objeto Cody, porque isso aponta para o objeto Cody.
<! Doctype html> <html lang = "en"> <body> <cript> var code = {viva: true, idade: 23, gênero: 'masculino', getGender: function () {return this.gender;}}; console.log (cody.getgender ()); // Logs 'masculino' </script> </body> </html>Neste.GENDER, isso aponta para um objeto Cody, e a função getGender pode operar em um objeto Cody.
O tópico sobre isso pode ser um pouco confuso, mas não precisa ser. Lembre -se de que, geralmente, o objeto que isso aponta é o objeto que contém a função, não a própria função (é claro que existem exceções, como o uso das palavras -chave new ou Call () e Apply ()).
Dicas importantes
- A palavra -chave Isso é como outras variáveis, a única diferença é que você não pode alterá -la.
- Ao contrário de outros parâmetros e variáveis passados para uma função, essa é uma palavra -chave (não uma propriedade) no objeto que chama a função.
Como determinar o valor disso?
Isso é passado para todas as funções e seu valor depende de quando a função é chamada quando é executada. Observe aqui, porque este é um lugar muito especial que você precisa se lembrar.
No código a seguir, o objeto MyObject possui uma propriedade diz o FOO, que aponta para a função diz o FOO. Quando a função Sayfoo é chamada no domínio global, isso aponta para o objeto da janela. Quando o MyObject chama uma função, isso aponta para o MyObject.
Como o MyObject tem uma propriedade chamada Foo, ela é usada aqui.
<! Doctype html> <html lang = "en"> <body> <cript> var foo = 'foo'; var myObject = {foo: 'eu sou myObject.foo'}; var sayfoo = function () {console.log (this ['foo']); }; // Dê a MyObject uma propriedade SayFoo e faça um ponto de Sayfoo function myObject.sayfoo = Sayfoo; myObject.sayfoo (); // Logs 'eu sou myObject.foo' 12 sayfoo (); // Logs 'Foo' </sCript> </body> </html>É claro que o valor disso depende de quando a função é chamada. MyObject.Sayfoo e Sayfoo apontam para a mesma função, mas o contexto da chamada Sayfoo () é diferente, portanto o valor disso é diferente. Abaixo está um código semelhante, o objeto principal (janela) é usado explicitamente, esperando que seja útil para você.
<! Doctype html> <html lang = "en"> <body> <cript> window.foo = 'foo'; window.myObject = {foo: 'eu sou myObject.foo'}; window.sayfoo = function () {! console.log (this.foo); }; window.myobject.sayfoo = window.sayfoo; window.myobject.sayfoo (); window.sayfoo (); </script> </body> </html>Certifique -se de que, quando tiver várias referências apontando para a mesma função, você saiba claramente que o valor dessas alterações, dependendo do contexto da função de chamada.
Dicas importantes
- Todas as variáveis e parâmetros, exceto que isso pertence ao escopo da variável estática.
Isso aponta para o objeto principal dentro da função incorporada
Você pode estar se perguntando o que acontece ao usar isso em uma função incorporada em outra função. Infelizmente na ECMA 3, isso não segue as regras, não aponta para o objeto onde a função pertence, mas ao objeto da cabeça (o objeto da janela do navegador).
No código a seguir, este no Func2 e Func3 não aponta mais para o MyObject, mas sim o objeto da cabeça.
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {func1: function () {console.log (this); // logs myObject varfunc2 = function () {console.log (this); // Loges da janela e o fará a partir deste ponto no varfunc3 = function () {console.log (this); // Janela de logs, como é o objeto da cabeça} (); } (); }}; myObject.func1 (); </script> </body> </html>No entanto, no ECMAScript 5, esse problema será corrigido. Agora você deve estar ciente desse problema, especialmente quando passa o valor de uma função para outra.
Veja o código abaixo, passe uma função anônima para foo.func1. Quando uma função anônima é chamada no foo.func1 (a função é aninhada em outra função), isso apontará para o objeto da cabeça na função anônima.
<! Doctype html> <html lang = "en"> <body> <cript> var foo = {func1: function (bar) {bar (); // Janela de logs, não foo console.log (this); // A palavra -chave aqui será uma referência ao objeto Foo}}; foo.func1 (function () {console.log (this)}); </script> </body> </html>Agora você não esquecerá que, se a função que contém isso estiver em outra função ou for chamada por outra função, o valor disso apontará para o objeto da cabeça (novamente, isso será corrigido no ECMAScript 5.)
Resolva o problema das funções aninhadas
Para evitar que isso seja perdido, você pode usar uma cadeia de escopo na função pai para salvar referências a isso. No código a seguir, usando uma variável chamada assim, usando seu escopo, podemos salvar melhor o contexto da função.
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {myProperty: 'icanseehelight', myMethod: function () {var que = this; // Armazene uma referência a este (iemyObject) no escopo MyMethod VarhelPerfunction function () {// ChildFunction var Helperfunction function () {// Childfunção // Logs 'Eu posso ver a luz da luz' via escopo porque esse // Logs 'eu posso ver a luz' console.log (this); // Loga o objeto da janela, se não usarmos "that"} (); }} myObject.mymethod (); // Invoque mymethod </sCript> </body> </html>Controle o valor disso
O valor disso geralmente depende do contexto em que a função é chamada (a menos que a palavra -chave nova seja usada, que será introduzida posteriormente), mas você pode usar o aplicativo () ou a chamada () para especificar o objeto que isso aponta quando uma função é acionada para alterar/controlar o valor disso. Usar esses dois métodos é como dizer novamente: "Ei, chame a função X, mas deixe o objeto Z fazer esse valor". Fazendo isso, o valor padrão deste JavaScript será alterado.
Abaixo, criamos um objeto e uma função e, em seguida, acionamos a função através da chamada (), de modo que isso na função aponta para MyoJBect. Isso na função MyFunction opera no MyObject em vez do objeto da cabeça, por isso alteramos o objeto apontado por isso na MyFunction.
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {}; var myfunction = function (param1, param2) {// setViacall () 'This'Points para o meu objeto quando a função é invocada this.foo = param1; this.bar = param2; console.log (this); // Logs objeto {foo = 'foo', bar = 'bar'}}; myfunction.call (myObject, 'foo', 'bar'); // Invocar a função, defina esse valor como MyObject Console.log (myObject) // objeto Logs {Foo = 'Foo', bar = 'bar'} </sCript> </body> </html>No exemplo acima, usamos Call (), Appl () também pode ser aplicado ao mesmo uso. A diferença entre os dois é como os parâmetros são passados para a função. Use chamado (), os parâmetros são separados por vírgulas e aplicam () e os parâmetros são passados em uma matriz. A seguir, é o mesmo código, mas o uso APPLIC ().
<! Doctype html> <html lang = "en"> <body> <cript> var myObject = {}; var myfunction = function (param1, param2) {// definido via aplicação (), isso aponta para o meu objeto quando a função é invocada this.foo = param1; this.bar = param2; console.log (this); // Logs objeto {foo = 'foo', bar = 'bar'}}; myfunction.apply (myObject, ['foo', 'bar']); // Invocar a função, defina este valor console.log (myObject); // Logs objeto {foo = 'foo', bar = 'bar'} </cript> </body> </html>Use isso em um construtor personalizado
Quando a função é acionada com a palavra -chave nova, o valor disso é declarado no construtor para apontar para a própria instância. Em outras palavras: no construtor, podemos usá -lo para especificar o objeto antes que ele seja realmente criado. Isso parece alterar esse valor para chamar () ou aplicar ().
Abaixo, construímos uma pessoa construtora, que aponta para o objeto criado. Quando o objeto da pessoa é criado, isso aponta para esse objeto e coloca o nome da propriedade no objeto, e o valor é o valor do parâmetro (nome) passado para este construtor.
<! Doctype html> <html lang = "en"> <body> <cript> var pessoa = function (nome) {this.name = nome || 'johndoe'; // Isso se referirá ao instante criado} var code = new Person ('Cody Lindley'); // Crie uma instância, com base no Console de Construtor Pessoa.log (Cody.name); // Logs 'Cody Lindley' </SCRIPT> </body> </html>Dessa forma, quando o construtor é acionado com a palavra -chave nova, isso aponta para "Objeto a ser criado". Então, se não usarmos a palavra -chave nova, o valor disso apontará para o contexto que desencadeia a pessoa - este é o objeto principal. Vamos dar uma olhada no código abaixo.
<! Doctype html> <html lang = "en"> <body> <cript> var pessoa = function (nome) {this.name = nome || 'johndoe'; } var code = Person ('Cody Lindley'); // Observe que não usamos 'novo' console.log (cody.name); // indefinido, o valor é realmente definido em window.name console.log (window.name); // Logs 'Cody Lindley' </SCRIPT> </body> </html>Este apontando para a instância do construtor no método do protótipo
Quando um método é usado como uma propriedade de protótipo de um construtor, isso neste método aponta para uma instância do método de gatilho. Aqui, temos um construtor de pessoa (), que requer o nome completo da pessoa. Para obter o nome completo, adicionamos um método WhatismyfullName ao Pessoa.Prototype, e todas as instâncias de pessoa herdam esse método. Isso neste método aponta para a instância (e suas propriedades) que desencadearam esse método.
Abaixo, criei dois objetos de pessoas (Cody e Lisa), e o método herdado WhatismyfullName contém esse ponto para esta instância.
<! Doctype html> <html lang = "en"> <body> <cript> var pessoa = function (x) {if (x) {this.fullName = x}; }; Pessoa.Prototype.whatismyfullName = function () {return this.fullName; // 'this' refere -se à instância criada a partir de pessoa ()} var code = new Pessoa ('Cody Lindley'); var lisa = nova pessoa ('Lisa Lindley'); // Chame o método herdado WhatismyfullName, que usa isso para se referir ao console de instância (cody.whatismyfullName (), lisa.whatismyfullame ()); /* A cadeia do protótipo ainda está em vigor; portanto, se a instância não tiver uma propriedade FullName, ela a procurará na cadeia de protótipo. Abaixo, adicionamos uma propriedade FullName ao protótipo da pessoa e ao protótipo de objeto. Veja Notas. */Object.prototype.fullName = 'John Doe'; var John = new Pessoa (); // Nenhum argumento é aprovado para que o FullName não seja adicionado ao console de instância.log (John.WhatismyfullName ()); // Logs 'John Doe' </SCRIPT> </body> </html>Use isso no método dentro do objeto de protótipo, e isso aponta para a instância. Se a instância não contiver atributos, a pesquisa de protótipo começará.
dica
- Se o objeto apontou para isso não contiver os atributos que você deseja encontrar, a lei que se aplica a quaisquer atributos também é aplicável aqui, ou seja, os atributos serão "pesquisados" ao longo da cadeia de protótipo. Portanto, em nosso exemplo, se a instância não contiver a propriedade FullName, o nome completo procurará por pessoa.prototype.fullName e depois object.prototype.fullName.
Para visualizar mais sintaxe JavaScript, você pode seguir: "Javascript Reference Tutorial" e "Javascript Code Style Guide". Eu também espero que todos apoiem mais wulin.com.