Página Inicial>Tutorial de web design>Tutorial Javascript

Você consegue entender esse problema apontador de JS? dê uma olhada neste artigo

Autor：Eve Cole Data da Última Atualização：2022-09-03 09:02:53
Você consegue entender esse problema de apontar do JavaScript? O artigo a seguir falará com você sobre esse problema irritante de apontar. Espero que seja útil para você!

Como começar rapidamente com VUE3.0: Aprenda

como apontar isso

Nas várias introduções que vimos sobre como determinar o método de apontar isso, a frase "isto aponta para o objeto que o chama" é considerada o. núcleo, mas diante de Tendemos a ficar confusos sobre uma variedade de situações. Com base na minha compreensão de várias situações, apresentei uma frase : "Setas, tempo e estrutura, olhe para situações especiais, olhe para o número do ponto para chamadas comuns, não olhe para a frente para os pontos posteriores, e então julgue baseado no princípio mais próximo, e a última coisa que resta é a janela." .

Função de seta

A função de seta em si não possui this, portanto não há essa alteração. Ela captura o this externo usando

var name = "windowsName";
var a = {
    nome: "Cereja",
    fn() {
      setTimeout(()=>{
        console.log(este.nome); 
      },0)
    }
}

a.fn() //Análise cereja

: Primeiro, o objeto a chama a função fn, então this da função fn aponta para o objeto a, e então a seta captura o this externo, então não é this em setTimeout, mas this de a função fn, portanto, no final, obtenha o nome no objeto a

O timer

é this da função de retorno de chamada dentro da função de atraso aponta para a janela do objeto global

var name = "windowsName";
var a = {
    nome: "Cereja",
    fn() {
      setTimeout(função(){
        console.log(este.nome); 
      },0)
    }
}

a.fn() //análise windowsName

: Primeiro, o objeto a chama a função fn e, em seguida, a função de retorno de chamada em setTimeout aqui é uma função anônima, que é uma função comum. Então, isso na função anônima aponta para window

var name =. "nomejanelas";
var b={
  nome: "setTimeoutName"
}
var a = {
    nome: "Cereja",
    fn() {
      setTimeout((função(){
        console.log(este.nome); 
      }).bind(b),0)
    }
}

a.fn() //análise setTimeoutName

: Primeiro, o objeto a chama a função fn e, em seguida, a função de retorno de chamada em setTimeout aqui é uma função anônima, que é uma função comum. Então, isso na função anônima aponta para a janela, mas. use bind para alterar a função anônima. Isso aponta para o objeto b, então o nome

construtor

no objeto b finalmente aponta para o objeto de instância criado no construtor.

Nota: Se um objeto for retornado no construtor, não haverá nova instância. objeto quando criado, mas este O objeto retornado pela

função fn(){
  esta.idade = 37;
}

var a = new fn();
console.log(a.idade);
a.idade = 38;
console.log(fn); // { this.age = 37;
console.log(a.age); // 38

Análise: Aqui criamos o objeto de instância a através do construtor, o que equivale a abrir um novo local e copiar o conteúdo do construtor. vez, isso aponta para o objeto a, nossa modificação do conteúdo no objeto a não afeta a aprovação do

julgamento do número

de ponto do construtor

. Julgue este ponto e siga o princípio de proximidade

var a = {.
  idade: 10,
  b: {
      idade: 12,
      fn(){
          console.log(esta.idade); 
      }
  }
}
abfn(); //12

Análise: O objeto a chama a função fn do objeto b. Existem dois na frente da função fn . Então o mais próximo é o objeto b, então este da função fn aponta para o objeto b. a última coisa obtida é a idade do objeto b

var a = {
.
  idade: 10,
  b: {
      idade: 12,
      fn(){
          console.log(this.age); //indefinido
      }
  }
}
varc = {
  idade:20,
}

var d = {
  idade:30,
}
abfn.bind(c).bind(d)(); //20

análise: O objeto a chama . função fn do objeto b e então usa bind para mudar a direção disso. independentemente do anterior . basta olhar para trás e, em seguida, a ligação mais recente altera esse ponto para c, então esse ponto da função fn é o objeto c, e o que você obtém é a

função

de prática

de idade 
outerFunc() {
do objeto c
   console.log(este) // { x: 1 }
   função função() {
    console.log(this) //Janela 
   }
   diversão()
} 

outerFunc.bind({ x: 1 })()
obj = {
  função() {
    const arrowFunc = () => {
      console.log(este._nome)
    }

    seta de retornoFunc
  },

  _nome: "obj",
}

obj.func()() //obj

func = obj.func
func()() //indefinido

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //indefinido

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

apply, call, bind.

Use as funções apply, call e bind para alterar a direção de

.

this. O acima this

A diferença entre

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

é usada no exemplo.

A diferença entre as funções apply e call está nos parâmetros passados ​​​​após isso. em apply é um array, e o que é passado em call É o parâmetro expandido

bind(thisArg[, arg1[, arg2[, ...]]])()

  • e a função bind cria uma nova função
  • .
a ser chamado manualmente. Isto é designado como bind() O

primeiro

  • this bind() e os parâmetros restantes serão usados ​​​​como parâmetros da nova função para uso ao chamar.

! Obrigado a todos pela leitura!

Material de referência

https://juejin.cn/post/6946021671656488991#comment

[Recomendações de tutoriais em vídeo relacionados: front-end da web]

O texto acima é como você pode entender esse problema apontador de JS? Dê uma olhada nos detalhes deste artigo. Para obter mais informações, preste atenção a outros artigos relacionados no site php chinês!

Artigos Relacionados