前端面试题(八)

• 浏览器内多个标签页之间的通信方式有哪些

  这个问题没有进行过多的研究, 借阅一下别人的答案网页消息通信

  1. WebSocket （可跨域）
     WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

  2. postMessage（可跨域）
     window.postMessage()方法安全地启用Window对象之间的跨源通信

     对将接收消息的窗口的引用，获得此类引用的方法包括：

     1. iframe标签
     2. Window.open （生成一个新窗口然后引用它）
     3. Window.opener （引用产生这个的窗口）

  3. Worker之SharedWorker
     作为浏览器的一个新特性，可以提供一个额外的线程来执行一些js代码（真正的多线程），并且不会影响到浏览器用户界面，但是不能DOM操作。

     SharedWorker可以被多个window共同使用，所以可以用来跨页面传输数据，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

  4. Server-Sent Events
     HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达
  5. localStorage
     localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。 直接在window对象上添加监听即可。
  6. BroadcastChannel
     这个方式，只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。这个感觉就有点类似于广播了。
  7. Cookies
     Cookies在同一个域名内，并且目录也得相同

---

• 简述你理解的优雅降级和逐渐增强

  优雅降级:

  先不考虑兼容，优先最新版本浏览器效果，之后再逐渐兼容低版本浏览器

  逐渐增强:

  考虑兼容，以较低（多）浏览器效果为主，之后再逐渐增加对新版本浏览器的支持，以内容为主。也是多数公司所采用的方法。
  

---

• 写一个判断数据类型的方法

  一般来说有这么几种办法, 但是有着各自的一些缺陷
  1. typeof
  如果使用 typeof 来判断数据类型的话:

  console.log(
      typeof 123, //"number"
      typeof 'dsfsf', //"string"
      typeof false, //"boolean"
      typeof [1,2,3], //"object"
      typeof {a:1,b:2,c:3}, //"object"
      typeof function(){console.log('aaa');}, //"function"
      typeof undefined, //"undefined"
      typeof null, //"object"
      typeof new Date(), //"object"
      typeof /^[a-zA-Z]{5,20}$/, //"object"
      typeof new Error() //"object"
  );

  通过上面的测试发现:

  Array，Object，null，Date，RegExp，Error这几个类型都被typeof判断为object，所以如果想要判断这几种类型，就不能使用typeof了。
  Number，String，Boolean，Function，undefined，如果想判断这几种类型，那就可以使用typeof

  2. instanceof
  instanceof运算符需要指定一个构造函数，或者说指定一个特定的类型，它用来判断这个构造函数的原型是否在给定对象的原型链上。

  console.log(
      123 instanceof Number, //false
      'dsfsf' instanceof String, //false
      false instanceof Boolean, //false
      [1,2,3] instanceof Array, //true
      {a:1,b:2,c:3} instanceof Object, //true
      function(){console.log('aaa');} instanceof Function, //true
      undefined instanceof Object, //false
      null instanceof Object, //false
      new Date() instanceof Date, //true
      /^[a-zA-Z]{5,20}$/ instanceof RegExp, //true
      new Error() instanceof Error //true
  )

  可以发现:

  Number，String，Boolean没有检测出他们的类型，但是如果使用下面的写法则可以检测出来：

  var num = new Number(123);
  var str = new String('dsfsf');
  var boolean = new Boolean(false);

  还需要注意null和undefined都返回了false，这是因为它们的类型就是自己本身，并不是Object创建出来它们，所以返回了false。

  3. constructor
  constructor是prototype对象上的属性，指向构造函数。根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的.
  如果输出一个类型的实例的constructor,就如下所示:

  console.log(new Number(123).constructor)
  //ƒ Number() { [native code] }
  

  可以看到它指向了Number的构造函数，因此，可以使用num.constructor==Number来判断一个变量是不是Number类型的。

  var num  = 123;
  var str  = 'abcdef';
  var bool = true;
  var arr  = [1, 2, 3, 4];
  var json = {name:'wenzi', age:25};
  var func = function(){ console.log('this is function'); }
  var und  = undefined;
  var nul  = null;
  var date = new Date();
  var reg  = /^[a-zA-Z]{5,20}$/;
  var error= new Error();
  
  function Person(){
  
  }
  var tom = new Person();
  
  // undefined和null没有constructor属性
  console.log(
      tom.constructor==Person,
      num.constructor==Number,
      str.constructor==String,
      bool.constructor==Boolean,
      arr.constructor==Array,
      json.constructor==Object,
      func.constructor==Function,
      date.constructor==Date,
      reg.constructor==RegExp,
      error.constructor==Error
  );
  //所有结果均为true

  除了undefined和null之外，其他类型都可以通过constructor属性来判断类型。

  4. 使用toString()检测对象类型
  可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。

  var toString = Object.prototype.toString;
  
  toString.call(123); //"[object Number]"
  toString.call('abcdef'); //"[object String]"
  toString.call(true); //"[object Boolean]"
  toString.call([1, 2, 3, 4]); //"[object Array]"
  toString.call({name:'wenzi', age:25}); //"[object Object]"
  toString.call(function(){ console.log('this is function'); }); //"[object Function]"
  toString.call(undefined); //"[object Undefined]"
  toString.call(null); //"[object Null]"
  toString.call(new Date()); //"[object Date]"
  toString.call(/^[a-zA-Z]{5,20}$/); //"[object RegExp]"
  toString.call(new Error()); //"[object Error]"

  这样可以看到使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。

  综上所述
  封装一个获取变量准确类型的函数:

  function gettype(obj) {
    var type = typeof obj;
  
    if (type !== 'object') {
      return type;
    }
    //如果不是object类型的数据，直接用typeof就能判断出来
  
    //如果是object类型数据，准确判断类型必须使用Object.prototype.toString.call(obj)的方式才能判断
    return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
  }

  这样判断一个变量的数据类型就很方便了。

面试题摘自Github