JavaScript 另类写法：匿名函数、位运算取整与原型继承实战

JavaScript 概述与特性

JavaScript 作为网络脚本语言，广泛应用于各类网页开发中。

它被数以百万计的网页用于改进设计、验证表单、检测浏览器、创建 cookies 以及其他多种应用场景。

JavaScript 是目前互联网上最为流行的脚本语言之一。

JavaScript 易于上手，许多开发者对其持积极态度。

JavaScript 是一种解释型脚本语言，语法灵活，允许不同开发者对同一功能采用多种实现方式。如何组织代码能让他人一眼看出你的专业水平？是否期待在代码审查中获得“原来还可以这样写”的赞叹？

匿名函数的多种实现方式

JavaScript 中的匿名函数通常指未声明函数名的自执行函数，其基本格式如下：


(function(){})();

在实际项目开发中，我们通常会在匿名函数前添加分号“;”：


;function(){}();

由于 JavaScript 语法允许省略分号，但这种机制可能导致意外错误。为了避免代码合并压缩后出现语法问题，添加分号可以有效规避未知错误。

有时在查看他人库或插件代码时，会看到如下形式的匿名函数写法：


+function(){}();

此处的“+”为运算符，具有极高优先级，因此右侧函数声明加括号的部分（即函数执行写法）会直接执行。实际上，前缀不仅限于“+”，“-”、“！”、“~”、“++”等运算符均可实现相同效果。具体使用哪种写法取决于团队统一规范，此处仅作扩展介绍。

位运算取整技巧

替代 Math.ceil() 和 Math.floor 的取整方法

也许你在其他代码中见过 ~~ 和 |0 这两种符号，直接观察运行结果：


>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

需注明，此种写法并非原创，此处引用旨在分析和说明这种另类写法。简要解释：~ 是按位取反运算符，可通过舍去浮点数小数部分转换为整数。正整数可转换为无符号十六进制值，再取反一次（~~），负负得正，从而得到原整数。这种写法避免了调用方法，是否可视为一种优化？

注意：若需进行严格的四舍五入运算，请慎用此方法，此时仍应使用 Math 函数。

条件判断的简化写法

if 和 else 并非唯一选择

使用 if-else 进行条件判断逻辑清晰，但在处理数据量不大时，代码显得不够简洁：


if (a===1) { //此处强烈建议用严格等于符号“===”，不会进行类型转换
a=2
} else if (a===3) {
a=4
} else {
a=5
}

尝试使用 || 和 && 对代码进行“瘦身”：


((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

一行即可搞定，实现代码精简。|| 和 && 原理简单，此处不再赘述。若对逗号运算符感到困惑，可进一步替换为三元运算符：


(a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )

这种写法虽然结构简化，但可能增加他人阅读代码的难度。

DOM 结构的字符串生成优化

使用 toString 替代繁琐的 DOM 结构字符串拼接

动态生成 DOM 结构时，常规实现方式如下：


var template = "<div>" 
+ "<h2>{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

若需添加各种属性和参数，大小引号混用极易导致报错。ES6 提供了 Template String 解决此问题，写法如下：


var template = <div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

然而 ES6 尚未全面普及，无需担忧，可通过 function.toString 解决过渡期的尴尬：


var rComment = /\/\*([\s\S]*?)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

此处的输出与前述字符串输出一致，前端开发者只需关注 DOM 结构本身即可。

AMD 模块封装与原型继承

添加 AMD 模块支持，提升代码格调

为代码声明 AMD（异步模块定义，Asynchronous Module Definition）规范，便于他人通过 AMD 规范加载模块。若未通过规范加载，代码可优雅地返回常规全局对象。参考 jQueryUI 的写法：


(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依赖"jQuery"这个插件 
define( [ "jquery" ], factory ); } 
else { 
// 浏览器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 这里放模块代码 
return $.widget; 
}));

采用 AMD 模块结构，使代码更适应浏览器端脚本依赖加载。遵循此格式编写代码，可让他人一眼识别出开发者的专业性。

继承的最优实践

JavaScript 的灵活性导致存在十余种继承方式，每种写法优缺点各异。此处以常用的原型继承为例：


function Parent() {}
function Child() {}
Child.prototype = Parent.prototype
Child.prototype.constructor = Child ；

该方法实际上是将 Child.prototype 和 Parent.prototype 中的指针指向同一对象，导致子对象原型扩展属性时，父对象原型也会被改写。为解决此问题，可尝试借用临时构造器的写法：


function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

如此可保护父对象的自身属性和原型方法。“最优”一词略显夸大，但相较于前述方法更为稳妥。相信每位开发者都有各自偏好，关于借用 call 和 apply 实现属性继承的优缺点，因篇幅有限不再赘述。

总结

上述 JavaScript 另类写法中，部分旨在提高程序可读性或执行效率的语法糖，如省略 if-else 的做法，较为可取。部分则旨在提升代码兼容性和性能，如 AMD 模块和继承方式。本人水平有限，内容可能存在不全或解释未透彻之处，后续将补充。

以上内容针对 JavaScript 的另类写法进行了介绍，希望对大家有所帮助！

JavaScript 另类写法实战：从匿名函数到原型继承的优化技巧