继承是什么?
现实生活中,继承是什么,大家应该都懂,不用多说。
那在 JavaScript 中,简单来说,就是一个对象拥有另一个对象的属性和方法。
怎么实现继承?
1. ES5实现继承(基于原型链):
function Human(name) { // 创建一个 Human 构造函数
this.name = name
}
Human.prototype.run = function () {
console.log('I can run')
}
function Man(name) { // 创建一个 Man 构造函数
Human.call(this, name)
this.gender = '男'
}
Man.prototype.fight = function () {
console.log('I can fight')
}
Man.prototype.__proto__ = Human.prototype // 让 Man 的原型对象的 proto 指向 Human 的原型对象
以上代码,就可以实现继承。可以new Man(name)来生成一个带继承的实例
但是 IE 不支持这样的写法,在 IE 中,你要把
Man.prototype.__proto__ = Human.prototype
换成
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()
至此,就实现了继承,Man 有了 Human 的 属性和方法。
那么上面的 new 又做了什么
(1) 创建一个新对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象;
(3) 将这个空对象的proto指向了构造函数对象的prototype;
(4) 执行构造函数中的代码(为这个新对象添加属性) ;
(5) 返回新对象。
2. ES6 实现继承(class 和 extends):
ES6 引入的「类」是一个特殊的函数,它可以帮助我们进一步简化继承的操作,但它依旧是「基于原型」的而不是引入新的面向对象继承模型,类语法只不过是一种语法糖。
class Human {
constructor(name) {
this.name = name
}
run() {
console.log('I can run')
}
}
class Man extends Human {
constructor(name) {
super(name)
this.gender = '男'
}
fight(){
console.log('I can fight')
}
}
可以看到 ES6 的写法比 ES5 的写法简洁了很多。
但是有个问题就是,它明明是个函数,但却不能被调用。
typeof Man // "function"
Man () // Uncaught TypeError: Class constructor Man cannot be invoked without 'new'