this的指向及应用

用总结性的一句话来说：this始终执行调用他的对象
1.对象中的this→对象

 var obj = {
            a: 100,
            con: {
                b: 10,
                fn: function () {
                    console.log(this.a)  //undefined
                    console.log(this.b)  //10
                    console.log(this)    //指向con对象
                }
            },
            objF:function(){
                console.log(this.a) //100
                console.log(this.b) //undefined
                console.log(this)   //指向obj对象
            }
        }
        obj.con.fn()
        obj.objF()
        console.log(this) //指向window

运行结果

2.改用赋值后调用：this→window

 var obj = {
            a: 100,
            con: {
                b: 10,
                fn: function () {
                    console.log(this.a) //undefined
                    console.log(this.b) //undefined
                    console.log(this)   //window
                }
            },
        }
        var fun=obj.con.fn;//将fn方法赋值给并没有调用
        fun() //调用 此时执行的是window.fun故指向this指向的对象是window

运行结果

3.函数调用

        function Fun(x) {
            console.log(this.x) //undefined
            this.x = x;
            console.log(this.x) //5
        }
        Fun(5) //掉用改方法时this的指向时window故Fun方法中this.x为自动声明的一个全局变量
        console.log(x) //5
        console.log(this.x) //5

太过简单，我们变形一下

        var obj = {
            a: 0,
            b: 0,
            Func: function (x, y) {
                this.b = y
                var getA = function (x) {
                    this.a = x
                }
                var getB = function (y) {
                    this.b = y
                }
                getA(x);
                getB(y)
            },
        }
        obj.Func(1, 1)
        console.log(obj.a) //0 虽然调用Func方法的对象是obj但调用getA方法是window
        console.log(a) //1
        console.log(obj.b) //1 调用Func方法的对象是obj故this指向obj
        console.log(b) //1

我们的本意是改变a、b的值，但这样写明显有悖本意，不仅没有改变a、b的值还声明了新的变量造成资源的浪费。解决方法，利用作用域特性

        var obj = {
            a: 0,
            b: 0,
            Func: function (x, y) {
                var that=this
                var getA = function (x) {
                    that.a = x
                }
                var getB = function (y) {
                    that.b = y
                }
                getA(x);
                getB(y)
            },
        }
        obj.Func(1, 1)
        console.log(obj.a) //1 
        console.log(a) //undefined

运行结果

将内部函数改为外部函数时你会发现一个有意思的地方。废话不多说直接上代码。

        var obj = {
            a: 0,
            Func: {
                getA: function (x) {
                    this.a = x
                }
            },
        }
        obj.Func.getA(1)
        console.log(obj.a)//0
        console.log(obj.Func)//由于getA的对象时Func故this指向Func而a在Func中不存在故会自动声明一个变量。

运行结果