关于javascript:ES6class类

3次阅读

共计 1413 个字符,预计需要花费 4 分钟才能阅读完成。

通过 class 关键字,能够定义类。该办法定义的原型对象跟 ES5 定义的没有多少区别,只是用 class 的写法能让对象原型的定义更加清晰,更像面向对象编程的语法。

class Person{constructor(name,age){
        this.name = name;
        this.age = age;
        this.fun = ()=>console.log('constructor 内的办法能够被遍历到哦')
    }
    say() {console.log(`My name is ${this.name}`)
    }
}
let p1 = new Person('Liane',18)
p1.say()  //My name is Liane
// 应用 class 创立的构造函数,所有的办法都会被定义在 prototype 属性下面,因而是不可能被遍历到的。console.log(p1) //{name: 'Liane', age: 18,fun: f}
for(let k in p1){console.log(k) //name  //age  //fun
}
// 所以,增加类的办法能够应用 Object.assign() 办法,一次性向类增加多个办法
Object.assign(Person.prototype, {growUp(){return ++this.age},
    eat(food){console.log(`${this.name} 吃了 ${food}`)
    }
})
p1.growUp()
console.log(p1.age)   //19
p1.eat('apple')
// 也可应用 Object.getPrototypeOf(obj) 办法获取 obj 的原型对象,再为原型增加办法或属性
Object.getPrototypeOf(p1) === Person.prototype   //true

this 的指向:
类的办法外部如果有 this,它默认是指向类的实例,但如果将该办法提出来独自应用,this 会指向该办法运行时的环境。因而咱们能够应用 bind 绑定 this, 或者应用箭头函数来解决。

class Logger{printName(name){this.print(`Hello ${name}`)
    }
    print(text){console.log(text)
    }
}

const logger = new Logger();
const {printName} = logger;
printName('Liane')  // 报错 

应用 bind 绑定 this

class Logger{constructor(){this.printName = this.printName.bind(this)
    }
    printName(name){this.print(`Hello ${name}`)
    }
    print(text) {console.log(text)
    }
}

const logger = new Logger();
const {printName} = logger;
printName('Liane')  //'Hello Liane'

应用箭头函数

class Logger{constructor(){this.printName =(name)=>this.print(`Hello ${name}`);
    }
    print(text) {console.log(text)
    }
}

const logger = new Logger();
const {printName} = logger;
printName('Liane')  //'Hello Liane'
正文完
 0