this指向解析
this:包含他的函数作为方法被调用时所属的对象
情况一:如果一个函数中有this,但是它没有被上一级的对象调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,而是undefined
function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a(); //相当于window.a();
//this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的
情况二:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象
var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
console.log(this); //{user: "追梦子", fn: ƒ}
}
}
o.fn(); //this执行时被它的上一级对象o{user: "追梦子", fn: ƒ}调用
情况三:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是他上一级的对象
var o = {
a:10,
b:{
//a:12,
fn:function(){
console.log(this.a); //undefind 有两个对象b和o,所以此this.a指向它的上一级
}
},
fn1:function(){
console.log(this.a); //10
}
}
o.fn1();
o.b.fn();
还有两种特殊情况:
第一种:当 this遇到return
function fn() {
this.user='追梦子';
return{};
}
var a=new fn();
console.log(a.user);//undefined
function fn() {
this.user='追梦子';
return function(){};
}
var a=new fn;
console.log(a.user);//undefined
unction fn() {
this.user='追梦子';
return 1;
}
var a=new fn;
console.log(a.user);//追梦子
unction fn() {
this.user='追梦子';
return null;
}
var a=new fn;
console.log(a.user);//追梦子
总结:如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例
还有一点:虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊
二.改变this的指向
第一种:new关键字改变this指向
//构造函数版this
function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子
用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份
第二种:call()
var a = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
var b = a.fn;
b.call(a); //若不用call,则b()执行后this指的是Window对象
第三种:apply()
var a = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
var b = a.fn;
b.apply(a);
apply和call方法类似,都可以改变this指向,也可以有多个参数,但是不同的是,apply第二个参数必须是数组
第四种:bind()
bind方法和call、apply方法有些不同,如下:
var a = {
user:"追梦子",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b.bind(a); //代码没有被打印
我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。
var a = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
var b = a.fn;
var c = b.bind(a);
c();
同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
总结: call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别