class AudioPlayer{
constructor(val){
this._status = 0
if(val == undefined){
this.status = 0
}else{
this.status = val
}
this.init()
}
init() {
const audio = new Audio() //js原生提供的对象
audio.src = '...'
audio.oncanplay = () =>{
audio.play()
this.status = 1
}
}
get status() {
return this._status
}
set status(val) {
const STATUS_MAP = {
0:'pause',
1:'start',
2:'loading'
}
document.querySelector('#app .play-btn').innerText = STATUS_MAP[val]
this._status = val
console.log("TCL: AudioPlayer -> getstatus -> this._status", this._status)
}
}
const audio = new AudioPlayer(2)
注意点,get和set是原生方法,其后的status在这里实际上就是指代的上面的status,要求11对应,其相当于get和set的参数,get后返回,实际上这里的参数就是传入的status本身也就是2,get将其赋值给_status,然后set里的默认参数就是get返回的this._status,上面的init教程没体现
//es6的实现方法
class Person {
constructor(){
this._name = ''
}
get name() {
console.log('正在访问name')
return `我的名字是${this._name}`
}
set name(val) {
console.log('正在修改name')
this._name = val
}
}
const person = new Person()
person.name = 3
console.log("TCL: person.name", person.name)
这里的person.name实际上就是调用了set方法,person里面本身没有name,调用后将值付给this._name