javascript中this的指向问题

this 的指向问题
this 的指向容易头晕
此处翻了大神的文章 得出 this ——> 5种指向

下面准备好编辑器, 慢慢看

第一种
1. this 指向 当前调用 它 的对象

        var obj = {
                a: 20,
                fun: function(){
                        console.log(this.a)
        }
}
        obj.fun();  //20
        // 此时 this --> obj
       
        obj.fun = {
                a: 30,
                fun: function(){
                        console.log(this.a)
                }
        }
        obj.fun.fun();  //30
        // 此时 this --> fun
        // this 指向只在上一级对象进行绑定


第二种
2. this 指向全局

        var a = 20;
        var fun = function(){
                console.log(this.a)
        // fun 为全局 this --> 全局
}
fun();



2.1 易出现的错误

var a = 10;
var obj = {
        a: 20,
        fun: function(){
                console.log(this.a);
                var foo = function(){
                        console.log(this.a)
                }
                foo(); // 10
                // 调用前方没有对象 , this 指向全局
        }
}
obj.fun(); //


此时 obj.fun() this –> obj, foo() –> 无对象调用, this –>全局 全局 a = 10

此时 使 foo()内 this 指向 a:20 ,需要 缓存 this

        var a = 10;
        var obj = {
                a: 20,
                fun: function(){
                        console.log(this.a);  // this --> a:20
                        var that = this;  // 缓存当前 this 指向
                        var foo = function(){
                                console.log(that.a) // that --> a:20
                        }
                        foo();
                }
        }

obj.fun();


2.2 易出现的错误

var a = 10;
var obj = {
        a: 20,
        fun: function(){
                console.log(this.a)  // this--> a:20
        }
}

obj.fun();
var funOut = obj.fun; // 函数未调用
funOut();    // this指向全局  a:10
        var obj2 = {
        a: 30,
        fun: obj.fun
}
obj2.fun(); // 30


此时 三处调用 三处输出
① line9 obj.fun() this 指向obj this.a = 20
② line11 funOut() –> window.funOut()
this 指向全局 this.a = 10
③ line16 obj2.fun() this 指向obj2 this.a = 30

第三种
3.this 指向call 或 apply

var obj = {
        a: 20,
        fun: function(){
                console.log(this.a)
        }
}
var obj2 = {
        a: 30
}
obj.fun.call(obj2);  // 30


此时 使用 call 强行将 obj2 的属性绑定给 obj
this–>obj2 this.a = 30

第四种
4.this 指向new 构造函数创建的对象

function Money(){
        this.money = 100;
}
var eric = new Money(); //this 指向 new 出来的 对象


第五种
5.this 指向当前对象所调用的 callback


<div id="box">内容区</div>
var box = document.getElementById("box")
box.onclick = function(){
        this.innerHTML= "click me";
}


此时 调用 callback 的对象为 box , this 将指向 传给 调用 callback 的对象
this –> box

综上，this 指向可总结为两种：
1. 指向window ， 全局
2. 指向 调用前的对象 既 obj.xxx . 前的对象
over.