面试题：JavaScript中函数调用兼容性处理的常见场景及方法

Question

请列举至少3个JavaScript函数调用在不同浏览器或环境中可能出现兼容性问题的场景，并说明对应的处理方法。

Answer 1

1. 事件绑定
   • 兼容性问题场景：在IE8及以下浏览器中，使用addEventListener方法会报错，IE8及以下使用attachEvent来绑定事件。例如在现代浏览器中这样绑定事件：

   const element = document.getElementById('myElement');
   element.addEventListener('click', function () {
       console.log('Clicked');
   });
   

   而在IE8及以下会报错，IE8及以下代码如下：

   const element = document.getElementById('myElement');
   element.attachEvent('onclick', function () {
       console.log('Clicked');
   });
   

   • 处理方法：可以封装一个兼容性的事件绑定函数，例如：

   function addEvent(element, eventType, handler) {
       if (element.addEventListener) {
           element.addEventListener(eventType, handler);
       } else if (element.attachEvent) {
           element.attachEvent('on' + eventType, handler);
       }
   }
   const element = document.getElementById('myElement');
   addEvent(element, 'click', function () {
       console.log('Clicked');
   });
   

2. 获取事件对象
   • 兼容性问题场景：在现代浏览器中，事件对象会作为参数传递给事件处理函数，例如：

   document.addEventListener('click', function (event) {
       console.log(event.target);
   });
   

   但在IE8及以下，事件对象是作为window.event存在的，例如：

   document.attachEvent('onclick', function () {
       const event = window.event;
       console.log(event.srcElement);
   });
   

   • 处理方法：可以在事件处理函数中统一获取事件对象，例如：

   document.addEventListener('click', function (event) {
       event = event || window.event;
       const target = event.target || event.srcElement;
       console.log(target);
   });
   

3. console.log打印
   • 兼容性问题场景：在一些较老的浏览器（如IE8及以下）中，console对象可能不存在，如果直接使用console.log会报错。例如：

   console.log('This will error in old browsers');
   

   • 处理方法：可以在代码开头添加对console对象的检测和定义，例如：

   if (!window.console) {
       window.console = {
           log: function () {}
       };
   }
   console.log('Safe to use now');
   

4. JSON解析与序列化
   • 兼容性问题场景：IE7及以下浏览器不支持JSON.parse和JSON.stringify方法。例如在现代浏览器中：

   const jsonStr = '{"name":"John"}';
   const obj = JSON.parse(jsonStr);
   const newStr = JSON.stringify(obj);
   

   在IE7及以下会报错。
   • 处理方法：可以引入一个json2.js的垫片库来解决兼容性问题，也可以手动实现JSON.parse和JSON.stringify方法。例如手动实现JSON.parse（简化示例）：

   if (!window.JSON) {
       window.JSON = {
           parse: function (jsonStr) {
               return (new Function('return'+ jsonStr))();
           }
       };
   }
   const jsonStr = '{"name":"John"}';
   const obj = JSON.parse(jsonStr);
   

5. Object.keys方法
   • 兼容性问题场景：IE8及以下浏览器不支持Object.keys方法，该方法用于获取对象自身可枚举属性的键组成的数组。例如在现代浏览器中：

   const obj = {a: 1, b: 2};
   const keys = Object.keys(obj);
   

   在IE8及以下会报错。
   • 处理方法：可以手动实现Object.keys方法，例如：

   if (!Object.keys) {
       Object.keys = function (obj) {
           const keys = [];
           for (const key in obj) {
               if (obj.hasOwnProperty(key)) {
                   keys.push(key);
               }
           }
           return keys;
       };
   }
   const obj = {a: 1, b: 2};
   const keys = Object.keys(obj);