JavaScript中函数的语法糖（syntactic sugar）小结

语法糖(Syntactic sugar),是由Peter J. Landin(和图灵一样的天才人物，是他最先发现了Lambda演算，由此而创立了函数式编程)创造的一个词语，它意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。

（引自知乎甘强）

其实就是一种更便捷的写法，提高编码效率但不会有性能上的损失。

下面部分转载自http://www.tuicool.com/articles/ZV73Uz

一、原始写法

<script>
function firstFunction(){
    //do something
};
function secondFunction(){
    //do something
}
</script>

二、模拟类，用prototype扩展函数

<script>
/*定义Person类（其实是模拟的，JS里面根本就没有类的概念，一切皆对象）*/
var Person = function(name, age, sex){
    //something
};
Person.prototype.body = function(){
    //some body
};
Person.prototype.head = function(){
    // person head
};
/*use Person Object*/
var tengfei = new Person("tengfei",22,"male");
tengfei.body();
tengfei.head();
</script>

三、模拟类，用prototype整体扩展函数

<script>
/*定义Person类*/
var Person = function(name, age, sex){
    //something
};
Person.prototype = {
    head: function(){
        //head is here
    },
    body: function(){
        //body is here
    }
};
/*use Person Object*/
var tengfei = new Person("tengfei",22,"male");
tengfei.body();
tengfei.head();
</script>

四、扩展Function对象的method写法

<script>
(function(d){
Function.prototype.method = function(name, fn){
    return this.prototype[name] = fn;
};
var Person = function( name, age, sex ){
    this.name = name;
    this.age = age;
    this.sex = sex;
};
Person.method("body",function(){
    d.write("this is body");
});
Person.method("say", function(msg){
    d.write(msg)
});
// use Person Object
var tengfei = new Person("tengfei",22,"male");
tengfei.say("JS变化多端，但是很有趣"); 
})(document);
</script>

五、方法的链式调用初探

<script>
(function(d){
Function.prototype.method = function(name, fn){
    this.prototype[name] = fn;
    return this;
};
var Person = function( name, age, sex ){
    this.name = name;
    this.age = age;
    this.sex = sex;
};
Person.method("body",function(){
    d.write("this is body");
}).
   method("say", function(msg){
       d.write(msg)
   });
// use Person Object
var tengfei = new Person("tengfei",22,"male");
tengfei.say("JS变化多端，但是很有趣"); 
})(document);
</script>

另外一部分

JavaScript装X指南（出处http://www.tuicool.com/articles/RrEZ3a6）

如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢？下面列出一些在JavaScript时的装逼技巧。

1. 匿名函数的N种写法

你知道“茴”的四种写法吗？ε=(д｀*)… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：

(function(){})();

但下面几种写法也是可以的：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());

其实细看可以看出规律，因为+-!~这些具有极高的优先级，所以右边的函数声明加上括号的部分（实际上就是函数执行的写法）就直接执行了。当然，这样的写法，没有什么区别，纯粹看装逼程度。

2. 另外一种undefined

从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：

var data = undefined;

但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：

 var data = void 0; // undefined

void在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。

当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。

3. 抛弃你的if和else

当JS代码里有大量的条件逻辑判断时，那代码看起来多可怕：

if () {
 // ...
} else if () {
 // ...
} else if () {
 // ...
} else {
 // ...
}

不用我说你都猜到用什么语法来简化if-else了。没错，用||和&&，很简单的原理就不用说啦。值得一提的是，有时候用!!操作符也能简化if-else模式。例如这样：

// 普通的if-else模式
var isValid = false;
if (value && value !== 'error') {
    isValid = true;
}
// 使用!!符号
var isValid = !!(value && value !== 'error');

“!”是取反操作，两个“!”自然是负负得正了。

4. 不加分号

关于JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号，很多JavaScript语法书籍也告诉我们加上分号更安全。然而，分号加不加，全靠个人对代码的写法，你确信写得足够安全的话，不加分号显得更加高大上。

5. 赶上ES6的早班车

ES6即将在年底正式发布，赶时髦的开发者们，赶快在自己的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都会让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的"use strict";呀。

6. 添加AMD模块支持

给你写的代码声明一下AMD模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：

(function( factory ) {
 if ( typeof define === "function" && define.amd ) {
  // AMD. Register as an anonymous module.
  define( [ "jquery" ], factory );
 } else {
  // Browser globals
  factory( jQuery );
 }
}(function( $ ) {
 // 这里放模块代码
 return $.widget;
}));

就用它来包裹你的实际代码吧，保证别人一看代码就知道你是个专业的开发者。

7. Function构造函数

很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如var arr = new Array(2);的写法就应该用var arr = [1, 2];的写法来取代。但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。

var f = new Function('a', 'alert(a)');
f('test'); // 将会弹出窗口显示test

或许大家疑惑了，你这样绕着写，跟function f(a) {alert(a);}比有什么好处呢？
事实上在某种情况下是有好处的，比如不能用eval的时候，你需要传入字符串内容来创建一个函数的时候。在一些JavaScript模板语言的解析，和字符串转换json对象的时候比较实用。

8. 用原生Dom接口不用jQuery

一个傲娇的前端工程师是不需要jQuery的，前提是你经得起折腾。实际上，几乎所有的jQuery方法都可以用同样的Dom原生接口来实现，因为这货本来就是用原生接口实现的嘛，哈哈。怎样做到不用jQuery（也叫jQuery-free）呢？阮老师的博文《如何做到 jQuery-free？》给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个现代浏览器的接口，可以实现跟jQuery同样方便和同样效率的Dom查找，而且其他的类似Ajax和CSS的接口同样也可以把原生方法做一些兼容方面的包装即可做到jQuery-free。

总结

上述所有的JavaScript装逼写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法；而有些写法则容易造成代码晦涩难懂或者效率偏低，例如上面说的void 0的写法，实际上不可取。JavaScript语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。