有关JavaScript的几种继承方式请移步JavaScript的几种继承方式
原型链的缺陷
SubType.prototype = new SuperType();
这样做的话,SuperType构造函数中的属性也会变成SubType原型中的属性,而我们需要SubType原型只继承SuperType原型
还有一点就是引用类型值属性的共享
寄生组合式继承的理解
为了结合原型链、组合继承和寄生式继承的优点,可以新建一个临时的类temp,temp.prototype指向父类的Prototype,然后创建一个temp实例,并给它加上一个constructor属性
这样,相当于用原型链的方法继承temp,由于temp的构造函数为空,所以只继承了原型上的属性,构造函数上的属性再用call或apply来继承
于是,我们可以把封装继承的函数进行修改,不使用object()或Object.create(),便于理解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| function inheritPrototype(subType, superType){ var temp = function(){}; temp.prototype = superType.prototype; var tempInstance = new temp();
tempInstance.constructor = subType; subType.prototype = tempInstance; } function SuperType(name){ this.name = name; this.colors = []; } SuperType.prototype.sayName = function(){}; function SubType(name, age){ SuperType.call(this, name); this.age = age; } inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){};
|
不用temp,直接SubType.prototype = SuperType.prototype?
因为SubType.prototype直接指向了SuperType.prototype,所以改变子类prototype中的属性的话,父类prototype中的属性也会被改变
例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
|
function Animal(){ this.species = 'animal'; }
Animal.prototype.color = 'red';
function Cat(){ this.meow = 'meowmeowmeow'; }
function Dog(){ this.bark = 'bow-wow'; }
Cat.prototype = Animal.prototype; Dog.prototype = Animal.prototype;
var cat = new Cat(); var dog = new Dog();
console.log(cat.color); console.log(dog.color); console.log(Animal.prototype.color);
Cat.prototype.color = 'blue';
console.log(cat.color); console.log(dog.color); console.log(Animal.prototype.color);
function Animal(){ this.species = 'animal'; }
Animal.prototype.color = 'red';
function Cat(){ Animal.call(this); this.meow = 'meowmeowmeow'; }
var temp = function(){};
temp.prototype = Animal.prototype; var tempInstance = new temp(); tempInstance.constructor = Cat;
Cat.prototype = tempInstance;
var cat = new Cat();
console.log(cat.color); console.log(Animal.prototype.color);
Cat.prototype.color = 'blue';
console.log(cat.color); console.log(Animal.prototype.color);
|