在ES5中,this永远指向最后调用它的那个对象。
this永远指向最后调用它的那个对象,此处调用的对象是window
var name="windowsName";
function a(){
var name="Cherry";
console.log(this.name); //windowsName
console.log("inner:"+this);//window
}
a();
console.log("outer:"+this);//window
此处调用的对象是a
var name="windowsName";
var a={
name:"Cherry",
fn:function(){
console.log(this.name); //Cherry
}
}
a.fn();
window.a.fn();
此处调用函数的对象依然是a,但是a的name没有定义,所以是undefined
var name="windowsName";
var a={
//name:"Cherry",
fn:function(){
console.log(this.name); //Cherry
}
}
a.fn();
window.a.fn();
此处把a对象的fn方法赋给了变量f,但是没有调用,所以fn仍然是被window调用的
var name="windowsName";
var a={
name:"Cherry",
fn:function(){
console.log(this.name); //windowsName
}
}
var f=a.fn;
f();
1 使用ES6箭头函数
不箭头函数,最后调用setTimeout的对象是window,但是window中没有func1函数
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()//报错
},100);
}
};
a.func2();// this.func1 is not a function
使用箭头函数,箭头函数的this始终指向函数定义时的this,而非执行时的,“箭头函数中没有给this绑定,必须通过查找作用域链来决定其值,如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this,否则this为undefined”
2 在函数内部使用_this=this
先将调用这个函数的对象保存在变量_this中,然后在函数中都使用这个_this,this就不会改变了。
var name="windowsName";
var a={
name:"Cherry",
fun1:function(){
console.log(this.name);
},
fun2:function(){
var _this=this;
setTimeout(function(){
_this.fun1();
},100);
}
};
a.fun2(); //Cherry
在fun2中,设置_this=this,这里的this是调用fun2的对象a,为了防止在fun2中的setTimeout被window调用而导致的在setTimeout中的this为window,将this(指向变量a),赋值给一个变量_this,这样,在fun2中使用_this就是指向对象a了。
3 使用apply call bind
使用apply,改变this指向
var name="windowsName";
var a={
name:"Cherry",
fun1:function(){
console.log(this.name);
},
fun2:function(){
setTimeout(function(){
this.fun1();
}.apply(a),100);
}
};
a.fun2();
使用call
var name="windowsName";
var a={
name:"Cherry",
fun1:function(){
console.log(this.name);
},
fun2:function(){
setTimeout(function(){
this.fun1();
}.call(a),100);
}
};
a.fun2();
使用bind
var name="windowsName";
var a={
name:"Cherry",
fun1:function(){
console.log(this.name);
},
fun2:function(){
setTimeout(function(){
this.fun1();
}.bind(a)(),100);
}
};
a.fun2();
call 和 apply的区别
apply和call基本类似,知识传入的参数不同
call接受若干个参数列表,apply接受包含多个参数的数组。
var a={
name :"Cherry",
fn:function(a,b){
console.log(a+b)
}
}
var b=a.fn;
b.apply(a,[1,2]);
var a={
name :"Cherry",
fn:function(a,b){
console.log(a+b)
}
}
var b=a.fn;
b.call(a,1,2);