this在定义的时候是无法确认指的是哪个对象的,只有在执行的时候才能确认。
简单的理解:谁调用了this所在的函数,那么this指向就是那个对象。
var a = {
name:"winne",
fn1:function(){
console.log(this);
}
}
a.fn1(); // 这里的 this === a 对象
a.fn1.call({name:"xf"}); // 这里的 this === {name:"xf"}
var fn2 = a.fn1;
fn2(); // 这里的 this === window 对象
this的几种不同的使用场景
1、作为构造函数调用
this指向new创建的实例对象。
function Foo(name){
this.name = name;
this.fn1 = function(){
console.log(111);
}
console.log(this);
}
var f = new Foo("winne");
2、作为对象属性调用
this指向这个对象。
var obj = {
name:"winne",
printThis:function(){
console.log(this);
}
}
obj.printThis();
3、作为普通函数调用
this指向window对象。
function fn1(){
console.log(this);
}
fn1();
4、使用call()、apply()、bind()调用
this指向上述方法的规定指定的第一个参数。
function fn2(name,age){
console.log(this);
}
// call函数中的第一个参数就是this规定指向的对象,随后的参数个数就是原本函数的参数。
fn2.call({x:100},'winne',20);
// apply函数中的第一个参数就是this规定指向的对象,随后的数组参数个数就是原本函数的参数。
fn2.apply({y:200},["winne",20]);
var fn3 = function(name,age){
console.log(this);
}.bind({y:300}); // bind函数里面的参数就是指定了this的指向,使用bind函数必须是使用函数表达式的形式
fn3("winne",22);
call函数中的第一个参数就是this规定指向的对象,随后的参数个数就是原本函数的参数。
apply函数中的第一个参数就是this规定指向的对象,随后的数组参数个数就是原本函数的参数。
bind函数里面的参数就是指定了this的指向,使用bind函数必须是使用函数表达式的形式。