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

Question

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知识就都忘完了，而且理解的也忘记完了。。。。

Answer 1

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