es5:
function Human(name){
this.name = name
}
Human.prototype.move = function(){}
function Man(name){
Human.call(this, name)
this.gender = '男'
}
Man.prototype.__proto__ === Human.prototype // 兼容性有问题
// 解决方案
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()
Man.prototype.fight = function(){}
es6: class
class Human {
constructor(name) {
this.name = name
}
move() {
console.log('动')
}
}
class Man extends Human {
constructor() {
super()
this.gender = '男'
}
fight() {
console.log('吃我一拳')
}
}
在原型上声明一个不是函数的属性:
es5:Human.prototype.race = '人类'
es6:
class Human {
constructor(name) {
this.name = name
}
race: '人类' // 不支持这样写法,会报语法错误
}
// 变通写法,
class Human {
constructor(name) {
this.name = name
}
get race(){
return '人类'
}
}
总结:
es5的写法稍微复杂一点,但是理解起来简单,看起来更舒服。而es6写法简单,但是更加抽象。
假设把Object和Aaary看作一个类,那么Object和Aaary有什么关系吗?答案是没有。但是Object的prototype和Aaary的prototype有一个关系,那就是JS里面有一个重要的原则,就是所有的类,所有的对象都是从new Object构造出来的。
在JS中继承的实质就是两次的原型链搜索。
网友评论