前几天写东西由于恶趣味作祟将所有的函数全部封装在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的这个坑就算跳出来了，以后遇到别的坑也会在另行讲述