js中this那些事儿

前几天写东西由于恶趣味作祟将所有的函数全部封装在json中，起初好好的，函数B也可以调用函数A的内容，不过在写一个点击事件时出现了意外，

代码如下：

var $ ={
    "A":function(x){
        alert("Hello World")
    },
    "B": function(){
        this.A();
    }
}
$.B();  //输出“Hello World”

这样在json中别的函数内也能调用，当然仅仅这样我也没写这篇随笔了，下面Dome升级，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
    var btn=document.getElementById("btn");
    var $ ={
        "A":function(x){
            alert("Hello World")
        },
        "B": function(){
            btn.onclick=function(){
                this.A();
            }
        }
    }
    $.B();
}
</script>
</head>
<body>
    <button id="btn">你好</button>
</body>
</html>

点击按钮控制台包错： this.A is not a function

明明A函数定义了为什么显示A不是函数呢？

我们看看上下两个案例B函数中的this的区别：

//上面的案例
"B": function(){
        this.A();
        console.log(this)
 }

//输出：
Object {A: function, B: function}
    A: function (x)
    B: function ()
     __proto__: Object

//下面的案例
"B": function(){
        btn.onclick=function(){
            console.log(this)
            this.A();
    }
}            

//输出
<button id="btn">你好</button>

这就说明此时this指向的是btn，原因是this指的是，调用函数的那个对象

那如果我们非在B函数中点击btn调用函数A呢，有没有办法？答案是有的，我们借用桥梁的思想，设置一个中间变量，上代码：

var btn=document.getElementById("btn");
    var $ ={
        "A":function(x){
            alert("Hello World")
        },
        "B": function(){
            var that=this
            btn.onclick=function(){
                console.log(that)
                that.A();    //弹出“Hello World”
            }
        }
    }
    $.B();

//控制台输出
object {A: function, B: function}
    A: function (x)
    B: function ()
    __proto__: Object

到这儿this的这个坑就算跳出来了，以后遇到别的坑也会在另行讲述