前端知识学习----this详解

关于this，首先要知道this的是在代码执行的时候才能确定的，定义的时候不能确定，因为this是执行上下文的一部分，而执行上下文是在代执行的时候才能确定的。实际上this的最终指向的是那个调用它的对象。
想理解this先看几个例子：

var a = {
    name:'A',
    fn: funcrion(){
        console.log(this.name);   
        console.log(this);
    }
}
a.fn(); //this.name === 'A'; this===a
a.fn.call({name:'B'}); //this.name===='B'; this==={name:'B'}
var fn1 = a.fn;
fn1();  //this.name === undefined; this===window

通过上面的例子可以看出this的执行会有不同，主要集中在以下几种情况：
1.作为构造函数执行，在构造函数中（上面例子未体现）
2.作为对象属性执行，上述代码中的a.fn();
3.作为普通函数执行，上述代码中fn1();
4.用于call，apply，bind，上述代码中a.fn.call({name:’B’})；

其中fn1() 的执行结果有些出乎意料，上文说过‘实际上this的最终指向的是那个调用它的对象’，fn1中this为什么指向了window？继续来看例子：

function a() {
    var user = "例子";
    console.log(this.user); //undefined
    console.log(this); //window
} 
a();

按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明:

function a() {
    var user = "例子";
    console.log(this.user); //undefined
    console.log(this); //window
} 
window.a();

继续看例子：

var o = {
    user: "例子",
    fn: function(){
        console.log(this.user); //'例子'
        console.log(this); // o
    }
}
o.fn(); ==>window.o.fn()

o.fn();等价于window.o.fn()，但是this并没有指向window，而是指向O对象；是不是有些迷惑，继续看例子：

var o = {
    a = 10;
    b : {
        a:12;
        fn:function(){
            console.log(this.a); //12
            console.log(this); //b
        }
    }
}
o.b.fn();

同样属性都是对象o调用出来的，但同样this没有指向O。其实我们需要知道以下几点：

1.如果一个函数中有this，但是没有被上一级对象调用，那么this就指向window，严格模式下t’his将指向undefined；
2.如果一个函数中有this，这个函数被上一级对象调用，那么this指向上一级对象；
3.如果函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也是其上一级对象。（上面的例子中，将b对象的值注销既可以验证）

var o = {
    a = 10;
    b : {
        //a:12;
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //b
        }
    }
}
o.b.fn();

还有个特殊的例子：

var o = {
    a = 10;
    b : {
        a:12;
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window;
        }
    }
}
var c = o.b.fn;
c();

this指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，这个例子中虽然函数fn是被对象b所引用，但是在将fn赋值给变量c的时候并没有执行所以最终指向的是window。

在构造函数中this指向也会不同：

function Fn(){
    this.user = '例子';
}
var a = new Fn();
console.log(a.user) //'例子'

这里a可以调用到user的值，因为构造函数new关键字改变了this的指向，所以将this指向a。

当this遇到return时结果也会有差异,如下面的连个例子：

function Fn(){
    this.user = '例子';
    return {};
}
var a = new Fn();
console.log(a.user) //undefined

function Fn(){
    this.user = '例子';
    return 1;
}
var a = new Fn();
console.log(a.user) //'例子'

总结： 如果返回值是一个对象，那么this指向返回的这个对象，如果返回值不是一个对象，那么this还是指向函数的实例；null也是一个对象，但是null比较特殊，返回值是null，this还是指向函数的实例。