THIS 常用场景
1、以函数形式调用,this 指向 window
function fn(m,n){
m=2;
n=3;
console.log(this.m,n);//undefined,this 指向了 window
}
fn();
2、以方法形式调用,this 指向调用方法的那个对象
box.onclick =function(){
this.style.backgroundColor = “red”; //this 指向 box,box 颜色为红色
}
3、构造函数调用,this 指向实例的对象
function Person(age , name) {
this.a = age ;
this.b = name;
console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2
}
var p1 = new Person(18, ‘zs’)
var p2 = new Person(18, ‘ww’)
控制台输出:
Person {a: 18, b: “zs”}
Person {a: 18, b: “ww”}
4、使用 window 对象的方法使, 指向 window
var box =document.getElementById(“box”);
box.onclick =function(){
setTimeout(function(){
this.style.backgroundColor=”yellow”
},1000)
}
// 报错, 因为 setTimeout 是 window 的一个方法. 解决方法可以在 14 行加上 var me=this, 然后在本行用 me.style 调用
更改错误, 使 box 颜色为 yellow
var box =document.getElementById(“box”);
box.onclick =function(){
var me = this;//box 调用了这个方法, 此时的 this 指向 box, 此操作将指向 box 的 this 赋给 me, 则得到的 me 的指向为指向 this
setTimeout(function(){
me.style.backgroundColor=”yellow”// 此时的 me.style 就指的是 box 的 style
},1000)
}
5、多重场景改变 this 指向
box.onclick=function(){
function fn1(){
console.log(this);
}
fn1(); // 事件触发了 fn1, 在函数内部, 以函数形式调用 this 依旧指向 window
console.log(this);// 事件处理函数中的 this, 该事件由谁触发,this 就指向谁
};
控制台输出:
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
<div id = “box”>box</div>
box.onclick=function(){
var me = this;
function fn1(){
console.log(me);
}
fn1(); // 事件触发了 fn1,me 指向 box, 所以 console 的是 box
console.log(this);// 事件处理函数中的 this, 该事件由谁触发,this 就指向谁
};
控制台输出:
<div id = “box”>box</div>
<div id = “box”>box</div>
6、call 和 apply 改变 this 指向
var person={
name : “lili”,
age: 21
};
function aa(x,y){
console.log(x,y);
console.log(this.name);
}
aa.call(person,4,5);
控制台输出
//4 5
//lili
使用 call,this 指向 call 后面紧跟的元素,this 就指向 person