1. Introducción: En primer lugar, debemos comprender los conocimientos básicos de apply (), apply () y call () son métodos no heredados que tiene toda función u objeto.
2. Función: Se usa para cambiar la dirección de este
3. A continuación se presentan aplicaciones comunes con y sin parámetros
Primero, quiero entender y aplicar aplicar bien, que es básicamente una comprensión de esto.
Tres puntos de esto: 1. Señale al llamador directo de la función donde está, 2. Cuando sea nuevo, apunte al objeto que sale de nuevo, 3. Apunte al objeto de inicio actual en el
Resumen del evento : Esto apuntará a un objeto,
¿por qué usar esto? Debido a que el punto de esto no es único, se puede cambiar y puede reemplazar a las futuras llamadas. Para una función fija, es conveniente que diferentes instancias llamen en el futuro para tener resultados diferentes. Sin esto, los resultados de quien llama en el futuro será el mismo, que no cumplirá con los requisitos.
Primero mire la comprensión de aplicar escrito por otros, y luego míreme nuevamente después de leerlo, se beneficiará mucho
de otros tutoriales para novatos
function Parent(name,age){
this.name=name
this.age=age
console.log(this)
console.log(this.name,this.age)
}
function Children(name,age,height){
console.log(this,arguments)
// Parent.apply(this,[name,age,height])
// Parent(name,age)
this.height=height
}
let lisi=new Children("李四",12,170)
console.log(lisi.name,lisi.age,lisi.height)
A partir del código y la salida anteriores, puede ver que esto en los niños se refiere al objeto de los niños, y el argumento es el parámetro pasado. Debido a que no hay this.name = name y this.age = age en los niños, la salida lisi.name y lisi.age no están definidas.En
es5 queremos heredar las propiedades de parent, en otras palabras, queremos Con el dos líneas de código en this.name = name y this.age = age en el padre, lo primero que solemos pensar es llamar al padre directamente en los hijos, probemos la viabilidad
function Parent(name,age){
this.name=name
this.age=age
console.log(this)
console.log(this.name,this.age)
}
function Children(name,age,height){
// console.log(this,arguments)
// Parent.apply(this,[name,age,height])
Parent(name,age)
this.height=height
}
let lisi=new Children("李四",12,170)
console.log(lisi.name,lisi.age,lisi.height)
El resultado es la salida, esto en el padre apunta a la ventana. Aunque llamar al padre en los niños puede recibir dos parámetros name y age, Li Si y 12 se muestran en el padre, pero no está definido en la instancia porque solo tiene el padre. En. Entonces, ¿cómo usamos esas dos líneas de código en padre o heredamos esas dos propiedades? Lo mismo es cómo llamar a los padres para hacer que esto en los padres apunte al objeto secundario. Obviamente, necesitamos cambiar la dirección de esto, para que podamos pensar en aplicar, llamar, enlazar, etc. Aquí usamos aplicar, pero otros también son posibles.
function Parent(name,age){
this.name=name
this.age=age
console.log(this)
console.log(this.name,this.age)
}
function Children(name,age,height){
// console.log(this,arguments)
Parent.apply(this,[name,age,height])
// Parent(name,age)
this.height=height
}
let lisi=new Children("李四",12,170)
console.log(lisi.name,lisi.age,lisi.height)
Ahora mire el resultado de salida, hay "Li Si" y 12 en el objeto de instancia lisi, y el resultado de salida de esto en el padre es el objeto secundario. Esto cumple con los requisitos que queremos. Parent.apply (esto, [nombre, edad, altura]) se ejecuta en los niños, Parent.apply (esto, argumentos) y Parent.apply (esto, [nombre, edad, altura]) son iguales, la diferencia es uno Los parámetros pueden ser aceptados automáticamente de acuerdo a cómo cambian los parámetros de los hijos, este último establece los parámetros manualmente, lo que equivale a ejecutar las dos líneas de código this.name = name, this.age = age. Y esto apunta a los niños.
En la función de estrangulamiento y anti-vibración, veremos una oración como fun.apply (esto, argumentos)
<div>
账户：<input type="text" id="myinput"><span id="tip"></span>
</div>
<script>
function debounce(fun,wait=300){
let timeout=null;
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout=setTimeout(()=>{
fun.apply(this,arguments)
// fun()
},wait)
}
}
let span=document.getElementById('tip')
function testUname(){
span.innerHTML="用户名合法"
}
let input=document.getElementById('myinput')
addEventListener('input',debounce(testUname,1000))
</script>
Esta es la función anti-vibración. Con la experiencia anterior, podemos conocer el propósito de fun.apply (esto, argumentos). No es más que querer que esto en diversión apunte a esto en la función de retorno en debounce, y el función de retorno a cambio Esto se refiere al objeto que llama directamente a la función de retorno. Aquí hay ventanas para llamar directamente a la función devuelta por return. Así que esto aquí es realmente inútil. La razón para escribir esto es porque los argumentos son la matriz de parámetros pasados, y el número puede devolverse a fn indefinidamente. Cuando normalmente tenemos una función con parámetros, fn ('parámetro 1', 'parámetro 2', ...) // La elipsis aquí no es una sintaxis regular, pero significa indeterminada. En este momento, si hacemos esto en fn apunte a un objeto obj. Entonces nuestro método de escritura es fn.apply (obj, ['parámetro 1', 'parámetro 2', ...]) donde la elipsis no es una gramática regular, solo significa un número incierto. Eche un vistazo al siguiente ejemplo:
// var name='zhangsan'//let不上升到window
window.name='zhangsan'
function test2(num){
console.log(this.name)
console.log(num)
}
let obj={
name:'lisi'
}
test2.apply(obj,[4])//lisi，4
Si hacemos que test2 tenga anti-vibración, y le pasamos en 1 un parámetro. Llamamos debounce (test2) (6) // zhangsan 6 de
esta manera porque no estamos seguros de cuántos parámetros hay en una función como test2 que tendrá anti-vibración en el futuro. También sabemos que los argumentos pueden aceptar parámetros inciertos. Pero pasamos este parámetro incierto a fn, podemos escribirlo así, fn (argumento), obviamente no. Porque fn acepta la forma de fn ('parámetro 1', 'parámetro 2', ...) en lugar de fn (['parámetro 1', 'parámetro 2', ...]). Entonces, qué hacer, ahora creemos que el método de aplicación acepta este estilo. Entonces, usar fn.apply (esto, argumentos) es lógico.
Entonces, el siguiente código prueba múltiples parámetros;
function debounce(fn){
let timeout=null
return function (){
fn.apply(this, arguments);
}
}
// var name='zhangsan'//let不上升到window
window.name='zhangsan'
function test2(num1,num2,num3){
console.log(this.name)
console.log(num1,num2,num3)
}
let obj={
name:'lisi'
}
test2.apply(obj,[4])//lisi，4
debounce(test2)(6,2,4)//zhangsan 6 2 4
En este punto, vamos a solucionarlo. Hay dos problemas. ① No sé cuántos parámetros necesita la función anti-vibración en el futuro. Use argumentos para aceptar. ②Cómo devolver argumentos a la función que necesita anti-vibración. aplicar es una aplicación justa. Existe tal idea. Podemos imaginarnos usando es6 ... también podemos pasar fácilmente los parámetros a fn. el código se muestra a continuación:
function debounce(fn){
let timeout=null
return function (){
// fn.apply(this, arguments);
fn(...arguments)
}
}
// var name='zhangsan'//let不上升到window
window.name='zhangsan'
function test2(num1,num2,num3){
console.log(this.name)
console.log(num1,num2,num3)
}
let obj={
name:'lisi'
}
test2.apply(obj,[4])//lisi，4
debounce(test2)(6,2,4)//zhangsan 6 2 4
El resultado es el mismo, por lo que prueba nuestra idea. Entonces, en el futuro, podemos usar la siguiente escritura más corta, más concisa y fácil de entender.