this运用规则习题分析

题目一： 

 var point = {
	 x: 0,
     y: 0,
     moveTo: function (x, y) {
     	console.log(this.x);
        this.x = x;
        console.log(this.x);

        console.log(this);
        var moveX = function (x) {
        	this.x = x;
            console.log(this);
        };
        var moveY = function (y) {
            this.y = y;
            console.log(this.y);

        }
        moveX(x);
        moveY(y);
     }
};
point.moveTo(1, 1);
console.log(point.x);
console.log(point.y);
console.log(x);
console.log(y);

1）执行point.moveTo(1, 1);
2)moveTo: function (1, 1){
    //moveTo: function (x, y)，由于实参x和y是1,1，所以函数下的所有x和y都是1,1
    1.console.log(this.x);/*输出0，是point调用moveTo，此时this指向的对象是point，
                            所以输出的是point中的x的值为0*/
    2.this.x = x;//将实参的1赋值给this.x，也就是point中的x，此时point中的x值为1
    3.console.log(this.x);//输出为1
    4.console.log(this);//this指向的对象是point,所以输出point{x: 1, y: 0, moveTo: ƒ}
    
    5.moveX(x);//调用moveX函数，x为实参moveX(1);
    6.var moveX = function (x){
        //var moveX = function (1)
        1.this.x = 1;//实参x赋值，相当于window.x=1
        2.console.log(this);// 输出Window 
        					/*moveX(x)调用的时候，前面没有任何.，所以它是
                              被Window对象所点出来的*/         
        //this是Window对象，此时的this.x中的x就为全局中的x,为1
    }

    7.moveY(y);//moveY(1)
    8.moveY = function (y){
        //moveY = function (1)
        1.this.y = 1;         //此时y为全局中的y window.y=1
        2.console.log(this.y);//输出的y值为1
    }
}

3)console.log(point.x);//输出局部point中的x值为1
4)console.log(point.y);//输出局部point中的y值为0
5)console.log(x);   //输出全局window中的x值为1
6)console.log(y);   //输出全局window中的y值为1

运行结束；

题目二：

function a(xx) {
    this.x = xx;
    return this;
};
var x = a(5);
var y = a(6)

console.log(x.x);
console.log(y.x)

1)全局预编译window{
	a : function(xx){};
    x = undefined;
    y = undefined;   
}

2)var x = a(5);//调用a函数，实参为5，返回值给x
3)function a(5) {
    1.this.x = 5; 
    	{
           function a()中的this指向的是全局，
           this.x为全局中的x，所以此时全局的x值为5 this.x = 5->window.x=5
    	}
    2.return this;
    	{this指向全局，function a()返回值给x，此时x为window}
}

4)var y = a(6);//调用a函数，实参为6，返回值给y
5)function a(6) {
    1.this.x = 6;
    	{
            this.x为全局中的x，所以此时全局的x值为6
            this.x = 6->window.x=6
    	}
    2.return this;
    	{
            this指向全局，function a()返回值给y，此时y为window
    	}
}

6)console.log(x.x);//输出undefined 此时x的值是6，所以x中没有变量，所以x.x为找不到为 
                     undefined

7)console.log(y.x)//输出6 此时y为window，那么y.x=window.x,那么window中的x值为6，
                     所以输出6

运行结束；

题目三：

var a = 5;

function fn1() {
    var a = 6;
    console.log(a);
    console.log(this);
    console.log(this.a);
}

function fn2(fn) {
    var a = 7;
    fn();
}

var obj = {
    a: 8,
    getA: fn1
}
fn2(obj.getA);

1)fn2(obj.getA)：实参是obj.get，调用fn2函数，传入实参

2)进入function fn2(fn)中，传入实参后成为：
	function fn2(obj.getA){
		var a = 7;
    	obj.getA();
	}

3)调用obj中的getA，getA的属性是fn1，进入fn1函数,/*注意：这里的fn1并没有发生调用*/

4）fn1函数中fn1() {
    1.var a = 6;
    2.console.log(a);    //输出a局部变量的值为6
    3.console.log(this);//输出window
    				  /*在getA: fn1中，没有对fn1进行调用，只是被对象getA所引用，
                        所以fn1中的this最终指向的是window*/
    4.console.log(this.a);//输出a的值全局变量是5
}

运行结束;