老师,我有一个问题

来源:4-8 编程练习

小林龙

2020-03-08 16:38:28

var operate =(function () {
   function operate(name,num1,num2) {
    if (!operation[name]){
     throw new Error("不存在名为"+name+"的属性");
    }
    return operation[name].apply(operation,[].slice.call(arguments,1,arguments.length));
   }

  var operation = {
   add:function(num1,num2) {
   return +num1 + +num2;
  },
    abtract:function(num1,num2) {
   return num1 - num2;
  },
   multiply:function(num1,num2) {
   return num1 * num2;
  },
    divide:function(num1,num2) {
   return num1 / num2;
  },
   addOperation:function (name,fn) {
    if (!operation[name]) {
     operation[name] = fn;
    }
    return this;
   }
  }
   operate.addOperation = operation.addOperation
   return operate
  })();

这是我跟着老师一起写的代码,在这里老师后定义operation这个对象然后调用对象中的加减乘除,没有问题

<!DOCTYPE html>
<html>
<head>
    <title> 事件</title>
</head>
<body>
    <input type='text' id='num1' />
   
    <select id='operate'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type='text' id='num2' />
   
    <input type='button' value=' = ' onclick="count()" />
   
    <input type='text' id='result' />
   
   
    <script type="text/javascript">
        function count() {
            /*此处写代码*/
            var num1 = document.querySelector("#num1"),
                num2 = document.querySelector("#num2"),
                operate = document.querySelector("#operate"),
                result = document.querySelector("#result");
               
             var countResult = {
                 addHandler:function(num1,num2){
                    return +num1 + +num2;
                },
                 abtractHandler:function(num1,num2){
                    return num1-num2;
                },
                 multiplyHandler:function (num1,num2){
                    return num1*num2;
                },
                 divideHandler:function(num1,num2){
                    return num1/num2;
                }
            };   
               
            switch (operate.value){
                case "+" :
                resultOutput(countResult["addHandler"](num1.value,num2.value));
                break;
                case "-" :
                resultOutput(countResult["abtractHandler"](num1.value,num2.value));
                break;
                case "*" :
                resultOutput(countResult["multiplyHandler"](num1.value,num2.value));
                break;
                case "/" :
                resultOutput(countResult["divideHandler"](num1.value,num2.value));
                break;
            };
               
             
           
           
            function resultOutput(Output){
                result.value = Output;
            };
           
        }
    </script>
</body>
</html>

这是我写的下一节的编程练习,这里我开始把countResult这个对象后定义,结果浏览器报错,显示加减乘除这些方法未定义,后面调整以后把countResult提到switch前定义,如上代码所示,计算正常

问一下这是什么原因?

写回答

3回答

好帮手慕慕子

2020-03-08

同学你好, 因为老师是在函数operate内部中调用的operation下的方法,函数值定义没有调用时不会执行里面的代码,所以代码从上到下执行时,并不会operate内的代码,所以不会报错。

http://img.mukewang.com/climg/5e64bdc1097f153814980460.jpg

并且老师是在operation方法声明之后,将operate方法return返回出去的,所以之后调用operate方法是不会报错的了。

http://img.mukewang.com/climg/5e64be7f09306b9e20220868.jpg

同学可以试着对比理解下。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

小林龙

提问者

2020-03-08

老师,我上面还复制了一段老师写的代码,他是先调用再定义为什么可以执行不报错呢?

0

好帮手慕慕子

2020-03-08

同学你好,因为使用var关键字定义的变量和方法,只能先声明,然后调用,同学一开始将countResult写在switch方法后,就是先调用后定义了,所以会报错,调整位置就好了。

对于能够自己解决问题,很棒哦,以后我们在工作中肯定会遇到各种各样的问题,我们没办法每一个都去找同事帮忙解决,所以独立解决问题的能力很重要,同学可以从现在开始就培养,提升自己各方面的能力,相信同学一定会变得更棒。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 14456 问题

查看课程