时间戳

首页 > 解决方案 > Setter 和扩展属性同名

javascript - Setter 和扩展属性同名

问题描述

我正在创建一个处理AudioAPI 的类，以简化一些行为并包装一些我想要的功能。我需要做的一件事是，当set值时volume，我希望音量发生变化，但关键是我正在扩展音频 API，并且volume是该 API 上已经存在的值。

我知道我可以将其更改为set volume()，setVolume()但这看起来像是一个工作区，我想知道是否有办法在没有这个的情况下设置该音量。

我尝试制作一个“别名”，类似于vol，但是我想使用该别名将volume其设为私有，并且我不知道是否可以使用扩展道具来做到这一点。

我也尝试过，但会导致回调循环：

class MyAudio extends Audio {
  set volume(vol) {
    this.volume = vol;
  }
}

有没有办法处理这个保持音频 API 的默认行为？

[编辑] 我想这样做的原因之一是，由于AudioAPIvolume只接受number作为参数，我想清理作为参数的字符串数据并使用解析的字符串设置音量。

标签： javascripthtml5-audioweb-audio-api

解决方案

您是否可以直接使用super而不是调用基类的卷属性this？

请参见下面的示例：

class MyAudio extends Audio {
  get volume() {
    return (super.volume * 100).toFixed(0);
  }
  set volume(vol) {
    const value = Number(vol) / 100;
    super.volume = value;
  }
}

const myAudio = new MyAudio();
myAudio.volume = "57";
console.log('MyAudio volume', myAudio.volume);

const audio = new Audio();
audio.volume = 0.57;
console.log('Audio volume', audio.volume);

编辑：更新包括可执行代码片段。

推荐阅读