1.在指定位置定义this存为变量
在外部定义this之前,this会指向obj自身
const obj = {
age:19,
func:function(){
console.log(this);
}
}
obj.func();
在外部定义this之后,this会指向定义位置的window
let _this = this;
const obj = {
age:19,
func:function(){
console.log(_this);
}
}
obj.func();
2.延时器
const obj = {
age:19,
func:function(){
console.log(this);
setTimeout(function(){
console.log(this);
})
}
}
obj.func();
第一次打印输出对象,第二次打印输出window
所以延时器会改变this指向,让它指向window
3.箭头函数(()=>)
const obj = {
age:19,
func:()=>{
console.log(this);
}
}
obj.func();
此时this指向window,说明箭头函数可改变this指向
const obj = {
age:19,
func:function(){
setTimeout(()=>{
console.log(this);
})
}
}
obj.func();
此时打印输出的是对象,并不是因为延时器与箭头函数共同作用,而是因为函数本身指向对象,与延时器和箭头函数无关
const obj = {
age:19,
func:function(){
console.log(this);
}
}
obj.func();
4.call()方法
语法:函数名.call(调用者, 参数1, …)
function func(a,b){
console.log(this);
console.log(this.age);
console.log(a);
console.log(b);
}
let obj1 = {
age:"张三"
}
func.call(obj1,1,2);
正常情况下直接调用函数,打印this会直接指向window,call改变了this的指向,由call的语法可知,第一个值为调用者,this则会指向该调用者
5.apply()方法
语法:函数名.apply(调用者, [参数, …])
function func(name,age){
console.log(this);
console.log(name);
console.log(age);
}
let obj = {};
func.apply(obj,["张三",19]);
此时的this已经指向了对象,说明apply改变了this的指向
apply与call方法相似,call后面要接参数,而apply后面必须接数组,否则会报错
6.bind()方法
语法:函数名.bind(调用者, 参数, …)()
function func(name,age){
console.log(this);
console.log(name);
console.log(age);
}
let obj = {};
func.bind(obj,"张三",19)();
this指向obj
call与bind相同点是都从第二个开始传入参数
bind与call和apply不同的点是,它在执行后,会返回的是改变this指向之后的新函数,要手动去执行,而call和apply是自动执行