每日思考（2020/07/13）

题目概览

• HTML5如何识别语音读出的内容和朗读指定的内容
• 用CSS画出一个任意角度的扇形，可以写多种实现的方法
• 说说instanceof和typeof的实现原理并自己模拟实现一个instanceof

题目解答

HTML5如何识别语音读出的内容和朗读指定的内容

• 语音识别通过 SpeechRecognition 接口进行访问，它提供了识别从音频输入（通常是设备默认的语音识别服务）中识别语音情景的能力。一般来说，你将使用该接口的构造函数来构造一个新的 SpeechRecognition 对象，该对象包含了一些列有效的对象处理函数来检测识别设备麦克风中的语音输入。SpeechGrammar 接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (JSGF.) 来定义。
• 语音合成通过 SpeechSynthesis 接口进行访问，它提供了文字到语音（TTS）的能力，这使得程序能够读出它们的文字内容（通常使用设备默认的语音合成器）。不同的声音类类型通过 SpeechSynthesisVoice 对象进行表示，不同部分的文字则由 SpeechSynthesisUtterance 对象来表示。你可以将它们传递给 SpeechSynthesis.speak() 方法来产生语音

用CSS画出一个任意角度的扇形，可以写多种实现的方法

<div class="sector"></div>
<div class="sector" style="border-radius: 0;"></div>

.sector {
  display: inline-block;
  margin: 20px;
  background: red;
   100px;
  height: 100px;
  border-radius: 100%;
  animation: sector 4s linear both infinite;
  transform: rotate(45deg);
}

@keyframes sector{
  from {
    clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
  }
  25% {
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
  }
  25.000001% {
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
  }
  50%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
  }
  50.000001%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
  }
  75%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  75.000001%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
  }
  to{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
  }
}

说说instanceof和typeof的实现原理并自己模拟实现一个instanceof

• instanceof

  • 返回 boolean

  • 通过调用 class 的 [Symbol.hasInstance] static method 来判断一个 object 是否是一个 class 的 instance

  • 缺省行为：判断 object 的 prototype chain 中是否有任意一个 prototype 与 class 的 prototype 相等

  • polyfill:

    interface IConstructor<T> {
      new(...args: any[]): T
    }
    
    function isObject(o: any) {
      return (typeof o === 'object' || typeof o === 'function') && o !== null
    }
    
    function instanceOf<T>(obj: any, cls: IConstructor<T>): obj is T {
      if (isObject(cls)) {
        if (typeof cls[Symbol.hasInstance] === 'function')
          return cls[Symbol.hasInstance](obj)
        else if (typeof cls === 'function') {
          if (isObject(cls.prototype))
            return cls.prototype.isPrototypeOf(obj)
          else return false
        } else throw new TypeError('cls is not callable')
      } else throw new TypeError('cls is not an object')
    }
    

• typeof

  • 返回 'string', 'number', 'undefined', 'boolean', 'object', 'function', 'symbol'
  • 获取数据底层的类型标签。