Tabla de contenido
1. La clasificación señalada por este
1. La llamada de la función global
2. La llamada de la función en el objeto
3. esto en setTimeout y setInterval
5. esto en la función de flecha
2. Tres formas de cambiar el punto de este
1. Cámbielo temporalmente y ejecútelo de inmediato
2. Cambiar esto permanentemente no se ejecutará de inmediato
3. Escenarios de uso de call, apply y bind
1. La clasificación señalada por este
La dirección de esto básicamente sigue una oración: quien llama a esta función, esto en la función apunta a quién .
1. La llamada de la función global
Si está llamando a una función global, entonces esto en la función apunta al objeto de ventana .
function f1(){
console.log(this) // window
}
f1()Debido a que las funciones globales o las variables globales que definimos están todas montadas en la ventana , la llamada de la función global es equivalente a: window.function name() .
2. La llamada de la función en el objeto
Al llamar a una función en un objeto, ya que se llama a través del objeto, este en la función apunta al objeto .
var obj={
a:1,
b:function(){
console.log(this)
}
}
obj.b()//obj这个对象3. esto en setTimeout y setInterval
Esto se usa en setTimeout y setInterval para apuntar a la ventana . Debido a que la función existe en forma de función de devolución de llamada, la ventana llama a la función de devolución de llamada.
setTimeout(function(){
console.log(this)//window对象
},1000)
setInterval(function(){
console.log(this) //windowd对象
},200)4. esto en enlace de evento
El enlace this en el evento se refiere a a quién está vinculado el evento, y esto apunta al nodo, y luego el estilo y el contenido del nodo se pueden manipular a través de esto.
<body>
<button id="btn">点我</button>
<script>
btn.onclick=function(){
console.log(this) //<button id="btn">点我</button>
}
</script>
</body>5. esto en la función de flecha
Si esto se usa en una función de flecha, este punto es este punto de la función anterior que no es de flecha, o este punto del objeto principal .
btn.onclick=function(){
inp.onfocus=()=>{
console.log(this) //当输入框获取到焦点时，this指向的是btn
}
}6. esto en el constructor
Ya sea que esté definido por predecesores o un constructor personalizado, esto apunta al objeto instanciado actual .
function CreateObj(){
this.a="1",
this.b:function(){
console.log(this) //指向的是当前的实例化对象
}
}
var c1=new CreateObj()
c1.b() //指向的是c1
var c2=new CreateObj()
c2.b() //指向的是c22. Tres formas de cambiar el punto de este
En JS, hay tres métodos para cambiar el punto de esto: llamar, aplicar y vincular .
gramática:
El objeto que debe tomarse prestado de this. call/apply/bind (prestar el objeto de this a otros, pasar parámetros)
1. Cámbielo temporalmente y ejecútelo de inmediato
La llamada y la aplicación solo toman prestado temporalmente el this de un objeto y ejecutarán automáticamente la función actual.
function calc() {
return this.name + "你好";
}
var nn = { name: "张三" };
// 这句话的意思是：将nn对象的this临时借给calc函数
var res=calc.call(nn);
//var res=calc.apply(nn);
console.log(res) //"张三你好"Los ejemplos anteriores usan apply y call con el mismo resultado, entonces, ¿cuál es la diferencia entre ellos?
Llamar y aplicar son diferentes al pasar parámetros :
- La llamada requiere que los parámetros reales de la función entrante se pasen por separado al pasar parámetros , por ejemplo: xxx.call(yyy, parámetro 1, parámetro 2...);
- Apply requiere que el parámetro real de la función entrante sea una matriz al pasar parámetros , como: xxx.apply(yyy, objeto de matriz). Pero la matriz se dividirá dentro de apply;
2. Cambiar esto permanentemente no se ejecutará de inmediato
La función del método de vinculación restante es cambiar permanentemente el this en un objeto al this de otro objeto. Después del cambio, la función original no se ejecutará inmediatamente y debe llamarse manualmente .
Usar bind para cambiar esto hace tres cosas en total:
1) Crear una nueva función con exactamente la misma función que la función original ;
2) Vincule permanentemente esto en la nueva función al objeto que especificó;
3) Fijar permanentemente algunos parámetros en la nueva función ;
function f1(){
return this.a
}
var obj={
a:123
}
var newF1=f1.bind(obj) //将f1的this永久改变为obj的this
console.log(newF1()) //123Nota: Este límite en la nueva función de bind no se puede volver a tomar prestado mediante una llamada o una aplicación.
function f1(){
return this.a
}
var obj={
a:123
}
var newF1=f1.bind(obj) //将f1的this永久改变为obj的this
console.log(newF1()) //123
function f2(){
console.log(this)
}
f2.call(newF1) //此时打印的是f1的内容，而不是newF1的内容3. Escenarios de uso de call, apply y bind
1. Compare los valores máximo y mínimo en la matriz: Math.max/min.apply(Math,arr)
2. Obtenga el toString original de Object: Object.prototype.toString.call/apply(arr);
3. Convierta el objeto similar a una matriz en una matriz normal: var new array=Array.prototype.slice.call/apply (objeto de pseudo-matriz)