this指向问题与技巧

this指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个最后调用它的对象

• 一般的函数调用对象this指向Window

function a(){
    var user = "lucy";
    console.log(this.user); 
    console.log(this); 
}
a();
//undefined
//Window

window.a();		// 和直接执行a()完全一样
//undefined
//Window

• 调用对象里的函数this指向对象

var o = {
    user:"lucy",
    fn:function(){
        console.log(this.user);  
        console.log(this);
    }
}
o.fn();
// lucy
// { user: 'lucy', fn: [Function: fn] }   （下面简写为对象名）

var O = {
    o:{
        user:"lucy",
        fn:function(){
            console.log(this.user);  
            console.log(this);
     	}		
    }
}
O.o.fn();
// lucy
// 对象o	最近原则

• this只会指向它的上一级对象，不管这个对象中有没有this要的东西

var o = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); 
        }
    }
}
o.b.fn();	//undefined
// 这里this指向b，因此为b.a为undefined

• 函数赋值情况

var o = {
    b:{
        fn:function(){
            console.log(this); 
        }
    }
}
var j = o.b.fn;		// 注意不是o.b.fn() 这里函数还是没有执行的
j();	// window
// 使用j去接收了fn函数，即最后实际上等于window.fn()

• 函数中有return的情况

  返回值为对象时（即使为空），this指向返回的那个对象

function fn()  
{  
    this.user = 'lucy';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = 'lucy';  
    return {};
}
var a = new fn;  
console.log(a.user); //undefined

​ 返回值不是对象时，this指向不变（null是一个特殊对象，返回null时this指向也不变）

function fn()  
{  
    this.user = 'lucy';  
    return 1;
}
var a = new fn;  
console.log(a.user); //lucy

function fn()  
{  
    this.user = 'lucy';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //lucy

总结：

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象
情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

---

箭头函数

箭头函数主要的特点是不会产生this

普通构造函数通过new实例化对象时this指向实例化对象，箭头函数无法使用用new实例化对象，也不拥有原型prototype

箭头函数不会产生this，若函数内有this，则this只能由父级函数继承而来，并不是谁调用指向谁，要看父级函数的this指向，追踪到最近的一个父级this，不会再往上寻找

var x = 111
var A = {
    x: 222
    B: {
    	x: 333,
    	C: function f() {
            var D = {
                x: 444,
                say: () => {
                    console.log(this.x)
                }
            }
            D.say()
        }
	}
}
A.B.C()		// 箭头函数this往上找，this从f()传来，f()的this指向B，因此this.x = B.x = 333

var x = 111
var A = {
    x: 222
    B: {
    	x: 333,
    	C: f = () => {
            var D = {
                x: 444,
                say: () => {
                    console.log(this.x)
                }
            }
            D.say()
        }
	}
}
A.B.C()		// 箭头函数this往上找，找不到function传来的this，因此this.x = Wiondow.x = 111

var x = 111
var A = {
    x: 222,
    B: {
    	x: 333,
    	C: function f_a() {
            var D = {
                x: 444,
                say: function f_b() {
                    console.log(this.x)
                }
            }
            D.say()
        }
	}
}
A.B.C()		// 不是箭头函数时，this指向最后调用者，因此this.x = D.x = 444