1. 通过原型链的继承
1 2 3 4 5 6 7 8 9 10 11
| function SuperClass(){ this.name = 'jack'; this.age = 12; } SuperClass.prototype.sayhi = function() { console.log('hi, i am '+ this.name) }
function SubClass() {} SubClass.prototype = new SuperClass(); var obj = new SubClass()
|
2. 通过call
实现继承
1 2 3 4 5 6 7 8 9 10 11
| function SuperClass(name, age){ this.name = name; this.age = age; } SuperClass.prototype.sayhi = function() { console.log('hi, i am '+ this.name) } function SubClass(name, age) { SuperClass.call(this, name, age) } var obj = new SubClass('ken', 23)
|
3. 组合继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| function SuperClass(name, age){ this.name = name; this.age = age; } SuperClass.prototype.sayhi = function() { console.log('hi, i am '+ this.name) } function SubClass(name, age, sex) { SuperClass.call(this, name, age) this.sex = sex } SubClass.prototype.getName = function() { console.log(this.name) } SubClass.prototype = SuperClass.prototype
SubClass.prototype.constructor = SubClass
var obj = new SubClass('ken', 23, 0)
|
4. 寄生继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| function SuperClass(name, age){ this.name = name; this.age = age; } SuperClass.prototype.sayhi = function() { console.log('hi, i am '+ this.name) } function SubClass(name, age, sex) { SuperClass.call(this, name, age) this.sex = sex } SubClass.prototype = Object.create(SuperClass.prototype,{ constructor: { value: SubClass } }) var obj = new SubClass('ken', 23, 0)
|
5. ES6
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| class SuperClass { construtor(name, age) { this.name = name; this.age = age; } } class SubClass extends SuperClass { constructor(name, age, num) { super(name, age) this.num = num } } var instance1 = new SubClass("1", 20, 1)
|
问: ES5/ES6 的继承除了写法以外还有什么区别?
可以从这个例子中可以看出区别在于 子类能否寻找到继承的父类
1 2 3 4 5 6
| class Super {} class Sub extends Super {}
const sub = new Sub();
Sub.__proto__ === Super;
|
1 2 3 4 5 6 7 8 9 10 11
| function Super() {} function Sub() {}
Sub.prototype = new Super(); Sub.prototype.constructor = Sub;
var sub = new Sub();
Sub.__proto__ === Super.prototype;
Sub.__proto__ === Function.prototype;
|