this理解

原创
2017/04/14 10:41
阅读数 28

通常来说,this指向的是那个对象,在函数的创建过程中是无法确定的,只有在执行时才能确定。谁调用它就指向谁(其实网上很多文章都是这么说的),下面看例子:

例子1:

var a={
    b:1,
    c:function(){
        b:2;
        console.log(this.b);
    }
}
a.c();//1

函数c是由a对象调用,所以函数c内的this指向的a对象,而a.b=10,所以最终结果是1而不是2

例子2

var a=1;
function b(){
    var a=2;
    console.log(this.a)
}
b();//1

也许有些同学会比较疑惑,window对象是一个全局对象,其实b函数是由window对象调用执行的(window.b()),随意b函数内的this指向的是window

例子3

var a={
    b:1,
c:{
    b:2,
d:function(){
    b:3;
    console.log(this.b)
}
}
}
a.c.d()//2

有多个嵌套对象或函数,虽然这个函数是被最外面的对象所调用,但是this指向的也只是它上一级的对象

例子4(比较特殊的例子)

var a={
    b:1,
c:{
    b:2,
d:function(){
    b:3;
    console.log(this.b)
}
}
}
 var e=a.c.d
e();//undefined

虽然把d函数赋值个e,也就是e=d,但是没有执行,最后执行的时候是有window调用的,所以结果是undefined

例子5(构造函数内的this)

 function a(x){
        this.x=x;
    }
    var b=new a(3);
    console.log(b.x)//3

这里之所以输出3,是因为new改变了this的指向,将this指向函数的实例b. 为什么this会指向b?首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

例子6(函数内有return)

function a(){
    this.x="张三";
    return {};
}
var b=new a();
console.log(b.x)//undefined

再看一个

function a(){
    this.x="张三";
    return function(){};
}
var b=new a();
console.log(b.x)//undefined

再看一个

function a(){
    this.x="张三";
    return 1;
}
var b=new a();
console.log(b.x)//张三
function a(){
    this.x="张三";
    return undefined;
}
var b=new a();
console.log(b.x)//张三

如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例

还有一点补充下

function a(){
    this.x="张三";
    return null;
}
var b=new a();
console.log(b.x)//张三

虽然null也是对象,但是在这里this还是指向函数a的实例b,因为null比较特殊

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部