注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】JavaScript案例精讲 - return语句的坑以及作用域的综合用法  

2015-03-03 17:19:56|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
JavaScript案例精讲 - return语句的坑以及作用域的综合用法
今天讲一个比较经典的案例,涉及到我们对return语句的理解以及作用域的基本知识。很多人都会掉进这个题目的坑里。先来看题目:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course - 独行冰海 - 刘国利</title>
</head>
<body>
<script>
var str = "
刘国利";

function test(str){
var str = "
独行冰海";

return
{
str;
}
}
var result = test("H5course");
console.log(result);
</script>
</body>
</html>

返回结果是什么呢?“独行冰海”,还是“刘国利”或者“H5course”?
打印出来的结果,发现都不是上面我们假设的结果,而是“undefined”。
我们来分析一下:
此处主要涉及的是JS语法的问题,在JS中,默认用分号结束一条语句,在return之后存在一个换行符,虽然没有分号,但是系统会默认为一句话的结束,增加一个分号,于是,上面代码中的JS部分就等价于如下代码:

<script>
var str = "
刘国利";

function test(str){
var str = "
独行冰海";

return ;
{
str;
}
}
var result = test("H5course");
console.log(result);
</script>

那么,如果我们将{}的位置进行调整呢,将return与{放置在一行呢?

<script>
var str = "
刘国利";

function test(str){
var str = "
独行冰海";

return {
str;
}
}
var result = test("H5course");
console.log(result);
</script>

<script>
var str = "
刘国利";

function test(str){
var str = "
独行冰海";

return { str; }
}
var result = test("H5course");
console.log(result);
</script>

此时我们会发现,会直接报错。原因在于,此时{str;}表示的是一个对象,但是很明显这种书写方式并不符合对象的书写格式。

之后我们调整一下{},将{}替换成()。

<script>
var str = "刘国利";

function test(str){
var str = "独行冰海";

return ( str; )
}
var result = test("H5course");
console.log(result);
</script>

此时是不是就能够正常输出了呢?如果你觉得没有问题了,那么好好回顾一下小括号的语法,str后面的;貌似应当出现在()之外,即:

<script>
var str = "刘国利";
function test(str){
var str = "独行冰海";

return ( str );
}
var result = test("H5course");
console.log(result);
</script>

此时我们就能够正常输出了,在此我们分析一下作用域问题。
在全局当中创建了一个str变量,在test函数当中也创建了一个str变量,在进行test函数调用的时候,也提供了一个str的参数。我们return语句对str进行了调用,这个调用出现在了test函数当中,因此,必然是使用局部作用域的变量空间,即打印出的是“独行冰海”。

今天就扯到这里,欢迎大家互相沟通交流哦~~~独行冰海 刘国利~
  评论这张
 
阅读(29)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017