JS这段code怎么理解？、嗯，有难度

var x = 10;                         //全局变量x

function foo(y) {                 //foo 函数声明
    var z = 30;                  //函数作用域中的z函数
    function bar(q) {           //被嵌套的函数bar，bar函数声明
        return x + y + z + q;  //bar函数的返回值
    }
    return bar;              //foo函数的返回值为 bar函数
}
var ba = foo(20);         //不懂 
ba(40);                  //不懂

这两行不懂的应该怎么解释啊？也在chrome上面运行了，结果是100
两个ba之间有什么关系呢？

var ba = foo(20);    
//这个是赋值语句，把foo函数赋给了变量a，但是foo(20)是什么意思？20应该是y的值
ba(40);             
//这个 ba(40）是什么意思？和var的ba又有什么关系？？我上chrome跑了，这个ba和上一行的ba
//应该是同一个，ba，不能换名字。那如果是同一个ba，那这个40应该怎么传？为什么？

补充测试图片
顺便问一下，刚学JS，有好多语句看不懂，应该怎么办？有怎么找练手的项目。。。在DOM什么的没有学习的情况下。不然不练的话，学到DOM后，JS知识就都忘完了，而且理解的也忘记完了。。。。。

---

var ba=f00(20);这个东东其实 返回了个函数 bar（q）并在前面 声明了个var y =20；后面你再执行了bar()这个函数，里面的数相加 就是 10+20+30+40==100

---

第一步执行foo(20)返回一个闭包函数 bar(q){}。 也就是此时ba=bar(){}
第二补则是执行ba这个函数，也就是执行bar()这个函数

---

var x = 10;                         //全局变量x

function foo(y) {                 //foo 函数声明
    var z = 30;                  //函数作用域中的z函数
    function bar(q) {           //被嵌套的函数bar，bar函数声明
        return x + y + z + q;  //bar函数的返回值
    }
    return bar;              //foo函数的返回值为 bar函数
}

var ba = foo(20);   //这个是赋值语句，把foo函数赋给了变量a，但是foo(20)是什么意思？20应该是y的值
//赋值，并不是把foo赋给ba，而是把foo函数执行的结果赋给a，就是把bar函数赋值给ba了。并且这里foo调用参数是20，也就是你将来调用bar函数，bar函数的父作用域的y就是20

ba(40);          
//这个 ba(40）是什么意思？和var的ba又有什么关系？？我上chrome跑了，这个ba和上一行的ba
//应该是同一个，ba，不能换名字。那如果是同一个ba，那这个40应该怎么传？为什么？

//这个ba就是你var声明的函数，就是调用了bar函数，参数是40，所以x = 10，y = 20, z = 30 , q = 40