¿Puedes entender este problema de señalización de JS? echa un vistazo a este artículo

Cómo comenzar rápidamente con VUE3.0: aprenda

cómo apuntar a this

En las diversas introducciones que hemos visto sobre cómo determinar el método de apuntamiento de this, la oración "esto finalmente apunta al objeto que lo llama" se considera como la. núcleo, pero frente a Tendemos a confundirnos acerca de una variedad de situaciones. Basado en mi comprensión de varias situaciones, presenté una oración : "Flechas, tiempo y estructura, mire situaciones especiales, mire el número de punto para llamadas ordinarias, no mire al frente para los puntos posteriores y luego juzgue". basado en el principio más cercano, y lo último que queda es la ventana." .

Función de flecha

La función de flecha en sí no tiene esto, por lo que no hay este cambio. Captura el exterior usando

var name = "windowsName";
var a = {
    nombre: "Cereza",
    fn() {
      establecerTiempo de espera(()=>{
        console.log(este.nombre); 
      },0)
    }
}

a.fn() //

Análisis de cereza: primero, el objeto a llama a la función fn, por lo que esto de la función fn apunta al objeto a, y luego la flecha captura el esto exterior, luego no es esto en setTimeout, sino esto de la función fn, por lo que al final obtiene el nombre en el objeto a.

El temporizador

de la función de devolución de llamada dentro de la función de retardo apunta al objeto global window

var name = "windowsName";
var a = {
    nombre: "Cereza",
    fn() {
      setTimeout(función (){
        console.log(este.nombre); 
      },0)
    }
}

a.fn() //

Análisis de WindowsName: primero, el objeto a llama a la función fn, y luego la función de devolución de llamada en setTimeout aquí es una función anónima, que es una función ordinaria. Luego, esto en la función anónima apunta a la ventana

var nombre =. "nombre de Windows";
varb={
  nombre: "setTimeoutName"
}
var a = {
    nombre: "Cereza",
    fn() {
      setTimeout((función (){
        console.log(este.nombre); 
      }).bind(b),0)
    }
}

a.fn() //

Análisis de setTimeoutName: primero, el objeto a llama a la función fn, y luego la función de devolución de llamada en setTimeout aquí es una función anónima, que es una función ordinaria. Luego, esto en la función anónima apunta a la ventana, pero. use bind para cambiar la función anónima. Esto apunta al objeto b, por lo que el nombre

del constructor

en el objeto b finalmente apunta al objeto de instancia creado en el constructor.

Nota: Si se devuelve un objeto en el constructor, no habrá una nueva instancia. objeto cuando se crea, pero este El objeto devuelto por

la función fn(){
  esta.edad = 37;
}

var a = nueva función();
consola.log(a.edad); // 37
a.edad = 38;
console.log(fn); // { esta.edad = 37 }
console.log(a.age); // 38

Análisis: Aquí creamos el objeto de instancia a a través del constructor, lo que equivale a abrir un nuevo lugar y copiar el contenido del constructor. En este momento, esto apunta al objeto. a, nuestra modificación del contenido en el objeto a no afecta el paso del

juicio del número de

. Juzga este punto y sigue el principio de proximidad

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

Análisis: el objeto a llama a la función fn del objeto b. Hay dos delante de la función fn . Entonces el más cercano es el objeto b, por lo que este de la función fn apunta al objeto by. lo último que se obtiene es la edad del objeto b

var a = {

  edad: 10,
  b: {
      edad: 12,
      fn(){
          console.log(esta.edad); //indefinido
      }
  }
}
var c = {
  edad: 20,
}

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

análisis: el objeto a llama a la función fn del objeto by luego usa bind para cambiar la dirección de esto. En este momento, fn tiene . Independientemente del anterior . solo mire hacia atrás, y luego el último enlace cambia este punto a c, entonces este punto de la función fn es el objeto c, y lo que obtiene es la

función

de práctica

   console.log(esto) // { x: 1 }
   función función() {
    console.log(this) // Ventana 
   }
   divertido()
} 

exteriorFunc.bind({ x: 1 })()

obj = {
  función() {
    const funciónflecha = () => {
      console.log(este._nombre)
    }

    flecha de retornoFunc
  },

  _nombre: "obj",
}

obj.func()() //obj

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

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

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

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

aplicar, llamar, vincular

Utilice las funciones aplicar, llamar y vincular para cambiar la dirección de. this. Lo anterior this

La diferencia entre

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

La diferencia entre las funciones de aplicación y llamada radica en los parámetros pasados ​​después de esto. en aplicar es una matriz, y lo que se pasa en llamada es el parámetro expandido

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

• y la función de enlace crea una nueva función
• . para ser llamado manualmente, this se designa como bind() El primer parámetro, y los parámetros restantes se usarán como parámetros de la nueva función para usar al llamar.

Si hay algún error, ¡corríjame! ! ¡Gracias a todos por leer!

Material de referencia

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

[Recomendaciones de tutoriales en video relacionados: interfaz web]

¿Lo anterior es cómo se puede entender este problema de señalización de JS? Eche un vistazo a los detalles de este artículo. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de php.