在类方法Javascript中引用类变量

我正在用Javascript定义一个类，作为与iOS兼容的音频播放器。我刚刚开始学习基础知识，在尝试访问类方法时遇到了一个问题

创建类的实例（

var audio=new WebAudio（'soundfile.mp3'，document.querySelector（#sound_div）

）并尝试访问方法

audio.playSound（）

）后，我得到：

ReferenceError:在第29行找不到变量：elem

---

当您将函数传递给事件侦听器时，您将失去与此的绑定：

var unlock = function() {
               //resume AudioContext (allow playing sound), remove event listeners
               context.resume().then(function() {
                   console.log("context resumed");
                   // this won't point to the instance when called by listener
                   this.elem.removeEventListener('touchstart', unlock);
                   this.elem.removeEventListener('touchend', unlock);
                   resolve(true);
               }, function (reason) {
                   reject(reason);
               });
           };
           this.elem.addEventListener('touchstart', unlock, false); //error

箭头函数或手动调用

bind（this）

可以修复它。箭头函数将在函数中按词汇绑定

this

，这意味着

this

将是定义它的

this

值，而不是它的调用方式：

var unlock = () => {
               //resume AudioContext (allow playing sound), remove event listeners
               context.resume().then(() => {
                   console.log("context resumed");
                   this.elem.removeEventListener('touchstart', unlock);
                   this.elem.removeEventListener('touchend', unlock);
                   resolve(true);
               }, function (reason) {
                   reject(reason);
               });
           };
           this.elem.addEventListener('touchstart', unlock, false); //error 

---

当您将函数传递给事件侦听器时，您将失去与此的绑定：

var unlock = function() {
               //resume AudioContext (allow playing sound), remove event listeners
               context.resume().then(function() {
                   console.log("context resumed");
                   // this won't point to the instance when called by listener
                   this.elem.removeEventListener('touchstart', unlock);
                   this.elem.removeEventListener('touchend', unlock);
                   resolve(true);
               }, function (reason) {
                   reject(reason);
               });
           };
           this.elem.addEventListener('touchstart', unlock, false); //error

箭头函数或手动调用

bind（this）

可以修复它。箭头函数将在函数中按词汇绑定

this

，这意味着

this

将是定义它的

this

值，而不是它的调用方式：

var unlock = () => {
               //resume AudioContext (allow playing sound), remove event listeners
               context.resume().then(() => {
                   console.log("context resumed");
                   this.elem.removeEventListener('touchstart', unlock);
                   this.elem.removeEventListener('touchend', unlock);
                   resolve(true);
               }, function (reason) {
                   reject(reason);
               });
           };
           this.elem.addEventListener('touchstart', unlock, false); //error 

---

什么是示例输入？您会将哪些参数传递给

new WebAudio

？@JackBashford感谢您的回答，用法是个问题。“var audio=new WebAudio（'soundfile.mp3'，document.querySelector（#sound_div）”什么是一些示例输入？你会将哪些参数传递给

new WebAudio

？@JackBashford谢谢你的回答，用法是个问题。“var audio=new WebAudio（'soundfile.mp3'，document.querySelector（#sound#u div）”谢谢，现在我得到了TypeError:undefined不是对象（评估'this.elem'））-webAudio.js:29-audio.elem持有正确的引用though@froggomad很抱歉，这里有很多嵌套函数。您可能还需要使用箭头函数定义You Promise回调：

return new Promise（（resolve，reject）=>{…

谢谢，你引导我走上了正确的道路…没有你是不可能做到的。需要

这个.webAudioTouchUnlock（这个.context（））。然后（（unlocked）=>

在

playSound（）

和一个单独的函数来添加listenerCool，很高兴你找到了它@froggomad。谢谢，现在我得到了TypeError:undefined不是一个对象（评估'this.elem'）-webAudio.js:29-audio.elem持有正确的引用though@froggomad很抱歉，这里有很多嵌套函数。您可能还需要使用箭头函数定义You Promise回调：

return new Promise（（resolve，reject）=>{…

谢谢，你引导我走上了正确的道路…没有你是不可能做到的。需要

this.webAudioTouchUnlock（this.context（））。然后（（unlocked）=>

在

playSound（）

中添加listenerCool的单独函数，很高兴你找到了@Frogomad。