这里为什么要改成箭头函数

视频中一带而过了

init(){
    const audio = new Audio();
    audio.src = '...';
     
    audio.oncanplay = () =>{
        audio.play();
        this.status = 1;
    }
}

hyperse 2020-09-17

源自：ES6 class 3-5 getter 与 setter（2）

收起

2回答

好帮手慕星星 2020-09-19 09:47:24

同学你好，问题解答如下：

1、audio是Audio()的实例，创建了一个audio标签

普通函数中使用this，就会指向创建的这个元素。

2、是的，可以输出看下

3、是封装好的。Audio构造函数和Image()是类似的，通过new就会创建并返回一个 HTMLAudioElement

祝学习愉快！

收起回答

好帮手慕夭夭 2020-09-18 11:28:21

同学你好，是因为this指向问题，普通的函数中，this指向的是函数调用者。这里是audio调用的，那么this指向的就是audio，函数中，this.status相当于audio.status，status属性并不是audio的，所以写成普通函数，无法通过this调用类上面定义的属性和方法了。

而箭头函数的this，是在箭头函数创建时绑定的，即箭头函数中this就会指向类的实例，从而可以通过this调用类里面定义的属性和方法了。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者 hyperse #1

如果用普通函数，this就指向audio，audio是Audio（）的实例对吗？然后改成箭头函数，this就指向init()方法所在的环境class AudioPlayer()，也就是实例化后的播放器类？那Audio（）是js给我们封装好的播放器类？

2020-09-18 22:07:39