return换行也有错?javascript中return的设计缺陷

今天和同事看了一段简单的javascript代码,但是被折磨疯了,搞了好久才发现问题。

代码1:

<script>
var gisService = (function(window)
{ 

    return
    {
        name:function ()
        {
            alert(1);
        }
    };

})(this);

gisService.name();
</script>

这种写法没有什么问题呀,尤其是对java开发人员来说,java中我们一般会采用这种大括号对齐的方式编写java的类或者函数。但是这段javascript代码在Chrome下会报错:

Uncaught SyntaxError: Unexpected token ( 。

代码2:

<script>
var gisService = (function(window)
{ 

    return {
        name:function ()
        {
            alert(1);
        }
    };

})(this);

gisService.name();
</script>

代码2与代码1几乎是一模一样的,唯一的差别在于return后面的大括号。但是代码2可以在chrome下正常运行。不知道这是什么原因,不过很显然这是javascript设计上的缺陷,因为代码1和代码2仅仅是格式化和排版不一样。

代码3:

<script>
var gisService = (function(window)
{
    function name()
    {
        alert(1);
    }

    return
    {
        name:name
    };

})(this);

gisService.name();
</script>

chrome下运行代码3会报错:

Uncaught TypeError: Cannot read property ‘name’ of undefined 。

知乎上这篇文章也提到了类似的问题:把大括号{放在一行的结尾而不是下一行的开头,因为它会避免在JavaScript的return语句中的一个可怕的设计错误。

javascript有一个自动修复机制——在程序可能有缺陷的时候,自动插入分号补全,但这个机制很不靠谱,常常会掩盖一些错误。

比如:

return {
    hello:"world";
};

正常的理解是返回一个字面量构成的对象。

但是如果这么写:

return
{
    hello:"world"
};

javascript的自动补全会将上面代码变成:

return;
{
    hello:"world"
};

实际返回一个undefined,这种错误不会有任何提示。

知道这个自动补全机制后,就不难理解为什么代码3会报错了。

下面几种定义函数的方式,只有方式1是错误的。这也可以解释,为啥代码1会报错了。

// 方式1:错误
{
    name:function(){

    }
};

// 方式2:正确
var obj =
{
    name:function(){

    }
};
//方式3:正确
({
    name:function(){

    }
});

//方式4:正确
function name()
{

}

{
    name:name
};
时间: 2024-11-10 19:52:09

return换行也有错?javascript中return的设计缺陷的相关文章

Javascript的10个设计缺陷

我经常说Javascript的设计不够严谨,有很多失误. 今天的这一篇,前半部分就谈为什么会这样,后半部分将列举Javascript的10个设计缺陷. 我参考的文献主要是Douglas Crockford的专著<Javascript语言精粹>(JavaScript: The Good Parts)和Fredrik Holmstr?m的文章<我对Javascript的抱怨>(My gripes with Javascript).精心开发5年的UI前端框架! 一.为什么Javascri

javascript中&quot;return obj === void 0&quot;这种写法的原因和好处

学习underscore.js的时候,发现源码中经常出现类似下面的代码: if (context === void 0) return func; if (array == null) return void 0; 以前没有见过这种写法,到网上搜了一些资料,刚好发现stackoverflow上也有人提出类似的疑问.这里总结归纳下,做个笔记.void其实是javascript中的一个函数,接受一个参数,返回值永远是undefined.可以说,使用void目的就是为了得到javascript中的un

JavaScript中return的用法详解

最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 this,从字面意思来看就是'这个',官方定义:在 ECMAScript 中,要掌握的最重要的概念之一是关键字 this 的用法,它用在对象的方法中.关键字 this 总是指向调用该方法的对象,可以看下下面的示例代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head

JavaScript 中的事件设计

1. 事件绑定的几种方式  主要介绍一下 最常用的事件设计 其他就稍微带过. 直接在代码里面添加onclick指定函数名字. B) 在JS代码中通过dom元素的onclick等属性 这种做法this表示当前DOM对象 还有一点 这种做法只能绑定一个事件处理函数 后面的会覆盖前面的.可以看出 只能打印 "2 = div" C) 至于IE下面的attachEvent 函数就不介绍了 直接介绍W3C的 标准的 addEventListener 和 removeEventListener. I

try catch finally中return语句与非return语句的执行顺序问题

finally语句一定是会被执行的,不管前边的try块catch块中有无return语句,并且如果finally中存在return语句,这个return语句将会是最后执行的return语句,即函数最后的返回值.try,catch中的return并不是让函数直接返回,而是return语句执行完毕,把返回结果放到函数栈中,转而执行finally块,所以,若是finally中含有return语句,那么函数栈中的返回值将被刷新.看以下几种情况: 1:try有return,finally无 public

JavaScript中函数的四种调用模式

理解函数的四种调用方法,可以有效的帮助我们分析和理解JavaScript代码.但是经常有人分不清楚或者不理解这四种调用模式,在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:1.函数调用形式 2.方法调用形式 3.构造器调用形式 4.上下文调用形式(apply,call)这里所有的调用模式中,最主要的区别在于关键字 this 的意义.下面分别介绍这几种调用形式. 一.函数调用形式

javascript中对象的创建

本文是根据李炎恢老师的相关视频和讲义整理成的,如果感兴趣可以亲自去听李炎恢老师的相关课程.讲的很详细.下面是链接:javascript视频教程 1.一般方法: 创建一个对象,然后给这个对象新建属性和方法.  var box = new Object();                   //创建一个Object 对象      box.name = 'Lee';                           //创建一个name 属性并赋值      box.age = 100;   

在JavaScript中创建命名空间的几种写法

在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello(); 最终的输出为 > "Hello var" 为什么会这样,根据 StackOverFlow 的解释,实际上JavaScript的是

一篇文章带你了解JavaScript中的变量,作用域和内存问题

作者 | Jeskson 来源 | 达达前端小酒馆 1 在JavaScript中的变量分别区分为两种: 一种为基本类型值,一种为引用类型值. 基本类型值指的是简单的数据段 引用类型值为可能由多个值组成的对象 引用类型的值是保存在内存中的对象,JavaScript不允许直接操作对象的内存空间,实际上操作对象的引用而不是实际对象. var dada = new Object(); undefined dada.name = "dada"; "dada" console.