几个测试浏览器兼容性问题的Javascript例子，IE真的很奇葩

前言

在前端开发中编写Javascript代码时，通常会考虑到不同浏览器之间的差异，找到兼容性方案。

今天这篇文章我们来看看两个有意思的问题，都是因为浏览器不同带给我们理解上的差异。

本篇文章的测试主要以最新Chrome，Firefox和IE8为代表。

Javascript

函数声明与函数表达式

• 函数标识符

根据ECMAScript标准，变量名，函数方法名等标识符只能包含数字，字母，'$'，'_'等，是不能包含点运算符('.')的。

目前最新的Chrome，Firefox，Safari等浏览器都遵循这一原则，但是IE6，IE7，IE8却不一样，它们支持点运算符来进行函数方法命名。

我们将下面一段代码在不同的浏览器中运行测试。这段代码是定义一个对象A，然后在prototype上定义一个变量b，b为一个function，然后生成一个A的实例a，最后返回a.b的类型。

测试代码

首先是在Chrome浏览器中。

Chrome浏览器运行结果

通过报的错误，我们发现不支持点运算符'.'操作。

然后在IE8中测试。

IE8测试结果

在IE8中测试后发现，输出了function，证明b已经明确定义为了对象A的一个属性。

（吐槽一下：IE8的调试真的是相当麻烦！！！）

• 函数表达式标识符

根据ECMAScript标准，函数表达式的标识符只能在函数体内部访问，它的作用域只存在于该函数体内部。

代码

以上代码中，b就是函数表达式的标识符。

在Chrome等高级浏览器中，在外部是无法访问到b的，以下为测试结果。

Chrome测试结果

返回undefined，证明Chrome浏览器是遵循了ECMAScript规则的。

而在IE8中测试结果如下所示。

IE8测试结果

最后返回的结果是function，就证明IE8并没有遵循ECMAScript规则。

• 解决方案

为了防止上述的问题发生，请避免使用IE的这些不遵循规则的特性，保证浏览器的兼容性。

块级函数声明处理

什么是块级函数声明呢？我们先来看看下面这段代码。

块级函数声明

就是在一段判断语句中，满足条件后才去定义函数，不满足条件就不去定义函数。

如果在这段代码后再去执行zero方法，结果会有什么差异呢？

首先来看看在Chrome浏览器下的运行结果。

Chrome运行结果

从运行结果来看，zero不是一个函数，说明zero的声明为生效。

然后看看IE8的运行结果。

IE8运行结果

通过运行结果可以看出，在IE8中，即使变量variable不为true，方法zero仍然被成功定义。

对于块级函数声明问题，是在ES6中新增的标准，在早期不支持ES6标准的浏览器中和IE8中都一样，包括早期的Chrome和Firefox等高级浏览器。

• 解决方案

遇到IE8级以下版本的浏览器，就避免使用块级函数声明的处理。

结束语

今天这篇文章总结了两个与函数声明和函数表达式有关的浏览器兼容性问题。在测试过程中发现IE浏览器真的是超级难用啊，而且有很多兼容性的问题都是来自于IE，所以大家尽可能的远离IE吧。