javascript 中使用变量存储的函数与不使用变量存储的函数的加载区别，以及其中this对象的区别

本文链接：https://blog.csdn.net/DucklikeJAVA/article/details/52561090

<script language="JavaScript">

    document.getElementById("addUser").onclick = function clickAdd() {

        var nameT = getValue("name");
        var emailT = getValue("email");
        var telT = getValue("tel");
        var tr = createNode("tr");
        addTd(tr, nameT);
        addTd(tr, emailT);
        addTd(tr, telT);
        {
            // <td><a href="deleteEmp?id=Jerry">Delete</a></td>
            var td = createNode("td");
            var a = createNode("a");
            a.setAttribute("href", "deleteEmp?id=" + nameT);
            a.appendChild(createTextNode("Delete"));
            a.onclick = bbbb;
            td.appendChild(a);
            tr.appendChild(td);
        }
        var tbody = createNode("tbody");
        tbody.appendChild(tr);
        document.getElementById("usertable").appendChild(tbody);

    }

    function addTd(tr, text) {
        var td = createNode("td");
        td.appendChild(createTextNode(text));
        tr.appendChild(td);
    }

    function getValue(id) {
        return document.getElementById(id).value;
    }
    function createNode(target) {
        return document.createElement(target);
    }
    function createTextNode(str) {
        return document.createTextNode(str);
    }

    // ###################
    /**
     // todo -> 很奇怪的是，这里只能是使用一个变量来表示函数，才能通用，如果是一个func aa(){} 的形式的话，调用aa(),达不到预期效果！
     * <pre>
     * http://www.jb51.net/article/45207.htm
     * 通过这个博客知道了，如果以变量存储函数，那么函数，在调用时才会触发；
     *                     如果是一个单独的函数，没有变量存储，那么，在页面打开的时候，就会被调用。
     *  * (ps:这个和Java是不同的，Java的函数一定是调用时才会执行)
     *  而且，通过变量存储的函数，其中如果用到this对象，那么该对象也是在调用时才会赋值，
     *  也就意味着，不同的调用环境，this指向的可能是不同的对象（比如当前的函数）.这也是我们往往预期的this
     *  so: 结论就是，一个被复用的函数，最好以变量的形式存储。特别是需要使用this对象的函数！！！
     * @returns {boolean}
     * </pre>
     */
    var bbbb = function () {
        var tr = this.parentNode.parentNode; // 注意：这里一定要用this 否则，获取的永远是最后一个 a 节点 ！！！
        var content = tr.firstElementChild.textContent; // ok
        var flag = confirm("确定删除" + content + " 是吗？");
        if (flag) {
            // do delete
            tr.parentNode.removeChild(tr);
        } else {
            // do nothing
        }
        return false; // 禁止页面提交 (不让a标签点击之后跳转了) todo
    };
    var aEles = document.getElementsByTagName("a");
    for (var i = 0; i < aEles.length; i++) {
        var ae = aEles[i];

        ae.onclick = bbbb;
//        ae.onclick = deleteItemAAA(ae); // 这样一进来就被触发了，为何？？？？

    }
    // ###################

</script>

可以看到，我的var bbbb = function () {...}使用了一个变量去存储函数。目的就是注释中所解释的。
ps:该段js代码对应的html内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>添加用户</title>
    </head>
    <body>
        <center>
            <br><br>
            添加用户:<br><br>
            姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <input type="text" name="tel" id="tel" /><br><br>
            <button id="addUser">提交</button>
            <br><br>
            <hr>
            <br><br>
            <table id="usertable" border="1" cellpadding="5" cellspacing=0>
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <th>email</th>
                        <th>电话</th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="deleteEmp?id=Tom">Delete</a></td>
                    </tr>
                    <tr>
                        <td>Jerry</td>
                        <td>jerry@sohu.com</td>
                        <td>8000</td>
                        <td><a href="deleteEmp?id=Jerry">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </center>
    </body>
    <script language="JavaScript">
    </script>
</html>