关于this的使用

一、关于this的使用   

 javaScript的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境

二、具体到实际应用中，this指向大致可以分为以下4种：

    1、作为对象的方法调用
    2、作为普通函数调用
    3、构造器调用
    4、Function.prototype.call和Function.prototype.apply调用


三、闭包中使用this对象会导致的一些问题

    this对象是在运行时基于函数的执行环境绑定的，
    1、在全局环境中，this 等于 window
    2、当函数被作为某个对象的方法调用时，this 等于 (那个对象)
    3、匿名函数的执行环境具有全局性，因此其this对象通常指向window

//1作为对象的方法调用
    //当函数作为对象的方法被调用时，this指向该对象
    var obj = {
        a:1,
        getA:function(){
            console.log(this); // 输出 Object
            console.log(this.a); //输出 1
        }
    };
    obj.getA();


    //2.作为普通函数调用
    //当函数不作为对象的属性被调用时，此时的this总是指向全局对象。在javaScript中这个全局对象是window对象
    window.name = "globalName";
    var getName1 = function (){
        return this.name;
    };
    console.log(getName1()); // 输出 globalName

    //有时候我们会遇到一些困扰，比如在div节点的事件函数内部，
    //有一个局部的callback方法，callback被作为普通函数的调用时，
    //callback内部的this指向了window，但我们往往是想让它指向该div节点


    window.id = "windowId";
    document.getElementById("div1").onclick = function (){
        console.log(this.id);//div1
        var callback = function(){
            console.log(this.id);//输出windowId，指向全局window对象----???
        };
        callback();// 自执行函数中的this指向window
    };


    //一种简单的解决方案，用一个变量保存div节点的引用
    window.id = 'windowId';
    document.getElementById("div1").onclick = function(){
        var that = this; //保存div的引用
        var callback = function(){
            console.log(that.id); // 输出div1
        };
        callback();
    };

    /*ES5下的严格模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined*/
    function func(){
        "use strict";
        console.log(this);//注意为undefined
    }
    func();



    //3.构造器的调用
    //当用new操作符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this指向返回的那个对象

    var MyClass = function (){
        this.name = "six";
    };

    var obj = new MyClass();//大部分js函数都可以当做构造器使用

    console.log(obj.name);//six

    /*
    * 注意：使用new调用构造器时，还要注意一个问题，如果构造器显示的返回了一个object类型的对象，
    * 此次的运算结果最终会返回这个对象，而不是我们之前期待的this
    *
    * */
    var MyClass  = function(){
        this.name = "GoUp";
        return {//构造器显示的返回了一个object类型的对象
            name:"lalala"
        };
    };

    var obj = new MyClass();
    console.log(obj.name);//lalala

    /*
     * 注意：如果构造器不显示任何类型数据，或者返回一个非对象类型的数据，就不会造成上述问题
     *
     * */
    var MyClass  = function(){
        this.name = "GoUp";
        return 'kakaka';//返回string类型
    };

    var obj = new MyClass();
    console.log(obj.name);//GoUp




    //4.用call()和apply()方法可以修改this的指向
    var obj1 = {
        name:'seven',
        getName:function(){
            return this.name;
        }
    };
    var obj2 = { name:'anne'};
    console.log(obj1.getName()); // 'seven'
    console.log(obj1.getName.call(obj2));// 'anne'



    /*
    注意：经常遇到问题：丢失this
    * */

    var obj = {
        myName:'seven',
        getName:function(){
            return this.myName;
        }
    };
    console.log(obj.getName());//seven
    var getName2 = obj.getName;
    console.log(getName2);//function (){return this.myName;}
    console.log(getName2());//undefined
    /* 当调用obj.getName时，getName方法是作为obj对象的属性被调用的，此时的this指向obj对象，所以obj.getName()输出'seven'
     当用另外一个变量getName2来引用obj.getName,并且调用getName2时，此时是普通函数调用方式，this指向全局window，所以执行结果是undefined
     */



    //闭包中出现的问题
    var name = "The Window"; //全局变量
    var object = {
        name : "My Object",
        getNameFunc : function(){
            return function(){ // 返回匿名函数
                return this.name; //this指向全局对象window
            };
        }
    };
    console.log(object.getNameFunc()());//The Window





    var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
            var that = this;//把外部作用域中的this对象保存在一个闭包能够访问到的变量里，就可以让闭包访问该对象了
            return function(){
                return that.name;
            };
        }
    };
    console.log(object.getNameFunc()());//My Object!!!