请问老师这里为什么计算结果是undefined

来源：4-6 第五次修改--开放与封闭原则

不明道理

2020-07-19 11:25:16

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color: #eee;
            /*position: relative;*/
        }
        #calculator{
            width: 600px;
            margin:0 auto;
            position: absolute;
            top:50%;
            margin-top: -31px;
            left:50%;
            margin-left: -300px;
        }
    </style>
</head>

<body>
    <div id="calculator">
        <p>
            <input type="text" class="formerInput" value="1">
            <span class="sign">+</span>
            <input type="text" class="laterInput" value="1">
            <span>=</span>
            <span class="resultOutput">2</span>
        </p>
        <p>
            <input type="button" value="+" class='btn' title='add'>
            <input type="button" value="-" class='btn' title='subtract'>
            <input type="button" value="x" class='btn' title='multiply'>
            <input type="button" value="÷" class='btn' title='divide'>
            <input type="button" value="%" class='btn' title='mod'>
        </p>
    </div>
    <script>
    //获取元素

    var wrapElem = document.querySelector('#calculator');

    var calculatorElem = {
        formerInput: wrapElem.querySelector('.formerInput'),
        sign: wrapElem.querySelector('.sign'),
        laterInput: wrapElem.querySelector('.laterInput'),
        resultOutput: wrapElem.querySelector('.resultOutput'),
        btns: wrapElem.querySelectorAll('.btn')
    }

    function each(array, fn) {
        for (var i = 0; i < array.length; i++) {
            fn(array[i])
        }
    }
    each(calculatorElem.btns, function(elem) {
        elem.onclick = function() {
            updataSign(this.value);
            outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
        }
    });
    //更新符号
    function updataSign(symbol) {
        calculatorElem.sign.innerHTML = symbol;
    }

    function operate(name, num1, num2) {
        if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法');
        operation[name](num1, num2); //计算结果为undefined
        //return operation[name](num1, num2);
    }
    var operation = {
        add: function(num1, num2) {
            return +num1 + +num2;
        },
        subtract: function(num1, num2) {
            return num1 - num2;
        },
        multiply: function(num1, num2) {
            return num1 * num2;
        },
        divide: function(num1, num2) {
            return num1 / num2;
        },
        mod:function(num1,num2){
            return num1 % num2;
        }
    }

    //输出结果
    function outputResult(result) {
        calculatorElem.resultOutput.innerHTML = result;
    }
    </script>
</body>

</html>

______________________________________________________________________________________________________

function operate(name, num1, num2) {
if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法');
operation[name](num1, num2); //计算结果为undefined
//return operation[name](num1, num2);
}

operate()函数没有return 的时候计算结果是undefined

但是我的理解执行operation[name](num1, num2);这段代码的时候，name实参为this.title。比如点击‘+’按钮，这里name的值为add，即这行代码执行的时候为add(calculatorElem.formerInput.value,calculatorElem.laterInput.value);