某网站JS的变态写法/诺禾

工作中需要查看一些网站的JS语句，打心眼里对这种语法充满了鄙夷，优雅跟它没关系，一些烂写法很难读懂，简直就是反人类，太变态了。

下面举个小例子，因为篇幅原因，就复制了一小段，看看你能看懂多少？

(window.webpackJsonp = window.webpackJsonp || [

]).push([[36],

{

1161: function (e, t) {

//some codes

},

}]);

说实话乍一看到这种代码我内心是抵触的，一眼望去就是乱糟糟的，不知道它想表达什么。不过工作需要，也只能硬着头皮往下捋。

看懂这些代码语文要学好，分段很重要，在哪断句是重点；眼神也得好，标点符号一个都不能少。于是乎，三个部分很快就被找出来。

第一部分：(window.webpackJsonp = window.webpackJsonp || [

])

第二部分：push([[36],

{…}]);

第三部分：1161: function (e, t) {

(function (t) {

e.exports = t

}).call(this, {

})

},

第一部分
因为window.webpackJsonp=window.webpackJsonp的返回值就是window.webpackJsonp，所以可以化简为：(window.webpackJsonp || [])，化简后的代码也不大容易看懂，但如果了解了js的语法，也就好理解了，其实等同于：

if (window.webpackJsonp)

//什么都不干

else

window.webpackJsonp = [];

说白了，第一部分的意思就是：如果window.webpackJsonp为空，就声明window.webpackJsonp为一个数组变量；如果window.webpackJsonp不为空，那么表达式为window.webpackJsonp，执行第二部分。

第二部分
第一部分理解了，第二部分就容易了，就是push参数。绕了一个小弯的是[[36],{…}]，乍一看push，应该是push(a, b)这种形式，但这里是第一层就只push了一个值，是一个二维数组；第二层才push了两个值，第一个值是36，第二个值是一个对象。

第三部分
这里的难理解之处是1161: function，这是什么鬼？

正常的写法都是 function xxx() 或 xxx: function()，纯数字难道也能作为函数名吗？正常js语法是不支持的呢。实验是检验真理的唯一标准，管它怎么写，运行一下就见分晓。

于是我做了调用测试：

alert(window.webpackJsonp[0][1].1161());

alert(window.webpackJsonp[0][1].1161);

发现这两种方式是错误的，无法运行。难道是这个数字是作为变量的序号吗？于是我尝试：

alert(window.webpackJsonp[0][1][1161]);

结果弹出了函数声明的对话框。于是更进一步：

alert(window.webpackJsonp[0][1][1161](null, null));

调用成功。

至此，难懂的JS代码终于明白其含义了。

总结
或许这些代码是前端开发故意为之，不让其他用户那么容易的理解其目的，其实前端代码再怎么混淆加密都只是时间长短而已，重要的是后端，何必呢。