前端提高篇（十六）JS进阶12函数this指针

定义：函数体内自带的一个对象指针
简单理解：哪个对象拥有这个函数，this就是谁，相当于“我”

比如bind那篇文章里举的最后一个例子：在大环境下定义了x和y，一个函数在没有定义或可以使用的x和y的情况下，调用this.x和this.y，此时的this指的是window对象；

如果函数里有定义了x和y，或者有可以调用的x和y，此时使用this，指的就是这个函数

3种常用的this指针用法：
1.普通对象使用函数
2.直接使用函数
3.函数对象使用函数

    <script>
        var x = 10;
        var obj1 = {
            x:1,
            e:function(){
                console.log(this.x);
            }
        }
        obj1.e();
        //普通对象使用函数
        //这个函数是对象的其中一个属性，即这个对象拥有这个函数，this指向这个对象obj1

        function test(){
            console.log(this.x);
        }
        test();//直接使用函数，拥有这个函数的是window对象
        //此处省略了window，即原本是：window.test();,所以this.x相当于是window.x

        //函数对象使用函数，拥有这个(使用this的)函数的是函数对象f
        function f(){
            f.x = 1000;
            f.e = function(){
                console.log(this.x);
            }
        }
        f();
        f.e();
    </script>

运行结果：

嵌套函数中的this指针

		var x = 10;
        function f(){
            f.x = 1000;
            f.e = function(){
                console.log('e:',this.x);
            }
            function e2(){
                console.log('e2:',this.x);
            }
            e2();
        }
        f();
        f.e();

e2函数输出为10，即e2函数的this是window，e2函数虽然在f函数的作用域内，但属于window对象；
而其中的匿名函数，是f的一个属性，this指向的是f，输出为1000

		var x = 10;
        function f(){
            f.x = 1000;
            f.e = function(){
                console.log(this.x);
            }
            function e2(){
                console.log('e2:', this);
            }
            e2();
        }
        f();
        f.e();

一个函数可以被多个对象拥有，但使用函数时，this依然是那个对象

        var name = 'win';
        function f(){
            console.log(this.name);
        }
        var obj1 =  {
            name:'obj1',
            f:f,//把f函数的指针赋值给obj1的属性f
        }
        var obj2 = {
            name:'obj2',
            f:f,
        }
        f();//相当于window.f();指向window
        obj1.f();//this指向obj1
        obj2.f();//this指向obj2

运行效果：符合“谁拥有这个函数，this就是谁”的定义，每个对象使用这个函数时，this指针指向自己，输出的name也就是自己的name

内存管理方面：
函数是特殊对象，在存储时，是将地址存在栈中，将对象内容存在堆中，并有一个指针做栈与堆的链接，链接地址与对象
当多个对象都有相同的函数时，存储的是这个函数的地址，

当对象存储的是函数执行后得到的结果，如果函数没有return，得到的是undefined

        var name = 'win';
        function f(){
            console.log(this.name);
        }
        var obj1 =  {
            name:'obj1',
            f:f(),//这里执行了一次f函数，是window的f，会输出'win',但obj1.f为undefined
        }
        var obj2 = {
            name:'obj2',
            f:f,
        }
        console.log('obj1.f:'+obj1.f);
        // f();
        // obj1.f();
        // obj2.f();

如果有return值，并且return了函数本身，跟之前的情况就一样了

        var name = 'win';
        function f(){
            console.log(this.name);
            return f;
        }
        var obj1 =  {
            name:'obj1',
            f:f(),//此时obj1又拥有了f函数
        }
        var obj2 = {
            name:'obj2',
            f:f,
        }
        console.log('obj1.f:'+obj1.f);
        // f();
        obj1.f();
        // obj2.f();

第一个’win’是obj1执行了一次f()函数而打印的，最后的obj1是执行了obj1的f属性，即obj1.f();

练习：
函数类使用函数，this指向具体的对象，依然是看哪个对象拥有了这个使用了this指针的函数
1.定义了一个函数A，并且嵌套了函数B：

        function f(){
        	console.log('this1:',this);
            this.name = 'ccy';//修改了全局变量中的name
            this.e = function(){
                console.log(this.name);//输出"ccy"
                console.log('this2:',this);
            }
        }
        var name = 'yyy';
        f();
        e();

f函数里的this.name和this.e中的this指的是window，
匿名函数里的this.name指的也是window，这个匿名函数，是window对象中e属性的值
也就是，这段代码中的三个this，都指的同一个对象：window
因此运行效果是：

2.函数类

        function f(){
            console.log('this1:',this);//这里的this，指的是新new出来的对象cc
            this.name = 'ccy';
            this.e = function(){
                console.log('this.name',this.name);
                console.log('this2:',this);//拥有这个匿名函数的是新对象cc，this指针也指向cc
            }
        }
        var name = 'yyy';

        var cc = new f();
        cc.e();
        cc.name = 'cc';
        cc.e();

这时，this指的是具体的对象cc，

apply，call，bind，第一个参数是obj，可以用这三个函数将this指针的指向转换成指定对象，谁调用就指向谁

事件函数

	<input type="button" value="ccy" id="btn">
	<script>
        var btn = document.getElementById('btn');
        function f(){
            console.log(this);
        }
        btn.onclick = f;
        console.log('btn:',btn);
    </script>

定时器

	<input type="button" value="ccy" id="btn">
	<script>
        var btn = document.getElementById('btn');
        function f(){
            console.log(this);
        }
        setTimeout(f, 1000);
        //1秒钟后执行f函数，是window对象在调用setTimeOut
    </script>