老师,我有一个问题
来源: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回答
同学你好, 因为老师是在函数operate内部中调用的operation下的方法,函数值定义没有调用时不会执行里面的代码,所以代码从上到下执行时,并不会operate内的代码,所以不会报错。
并且老师是在operation方法声明之后,将operate方法return返回出去的,所以之后调用operate方法是不会报错的了。
同学可以试着对比理解下。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
小林龙
提问者
2020-03-08
老师,我上面还复制了一段老师写的代码,他是先调用再定义为什么可以执行不报错呢?
好帮手慕慕子
2020-03-08
同学你好,因为使用var关键字定义的变量和方法,只能先声明,然后调用,同学一开始将countResult写在switch方法后,就是先调用后定义了,所以会报错,调整位置就好了。
对于能够自己解决问题,很棒哦,以后我们在工作中肯定会遇到各种各样的问题,我们没办法每一个都去找同事帮忙解决,所以独立解决问题的能力很重要,同学可以从现在开始就培养,提升自己各方面的能力,相信同学一定会变得更棒。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题