在类方法Javascript中引用类变量

Question

我在 Javascript 中定义了一个类，用作与 iOS 兼容的音频播放器。我刚刚开始了解基础知识，并在尝试访问类方法时遇到问题。创建类 ( var audio = new WebAudio('soundfile.mp3', document.querySelector(#sound_div))的实例并尝试访问该方法后audio.playSound()，我得到：ReferenceError: Can't find variable: elem on line 29class WebAudio {    constructor(soundFile, elem) {        this.soundFile = soundFile;        this.elem = elem;    }    context() {        var AudioContext = window.AudioContext || window.webkitAudioContext;        var context = new AudioContext();        return context;    }    webAudioTouchUnlock(context) {       return new Promise(function (resolve, reject) {       //if AudioContext is suspended, and window has been interacted with           if (context.state === 'suspended' && 'ontouchstart' in window) {           console.log(context.state);           var unlock = function() {               //resume AudioContext (allow playing sound), remove event listeners               context.resume().then(function() {                   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           this.elem.addEventListener('touchend', unlock, false);           } else {               console.log('context not suspended? Context is ' + context.state);               resolve(false);           }       });    }    playSound() {        this.webAudioTouchUnlock(this.context()).then(function (unlocked) {            if(unlocked) {                console.log('playing audio file');                var audio = new Audio('sound/' + soundFile);                if (!audio.playing) {                    audio.play();                } else {                    audio.pause();                }            }        }

Answer 1

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

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