1.原型链
- 利用原型让一个引用类继承另一个引用类型的属性和方法
1 function superType() { 2 this.property = true; 3 } 4 5 superType.prototype.getSuperValue = function () { 6 return this.property; 7 } 8 9 function subType() { 10 this.subProperty = false; 11 } 12 13 subType.prototype = new superType(); 14 subType.prototype.getSubValue = function () { 15 return this.subProperty; 16 } 17 18 var instance = new subType(); 19 console.log(instance.getSuperValue());
2.借用构造函数
- 在子类的构造函数的内部调用超类的构造函数,使用call()或apply()函数。
1 function superType(name) { 2 this.name = name; 3 } 4 5 function subType() { 6 // 继承了超类,同时还传递了参数 7 superType.call(this, 'Nick'); 8 this.age = 29; 9 } 10 11 var instance = new subType(); 12 console.log(instance.name);
- 方法都是在构造函数中创建的,无法进行复用。
3.组合继承
- 结合原型链继承和借用构造函数继承的优点,可以让两个实例有不同的属性,又可以拥有共同的方法
1 function superType(name) { 2 this.name = name; 3 this.color = ["red", "blue"]; 4 } 5 6 superType.prototype.sayName = function () { 7 console.lgo(this.name); 8 } 9 10 function subType(name, age) { 11 superType.call(this, name); 12 this.age = age; 13 } 14 // 继承 15 subType.prototype = new superType(); 16 subType.prototype.sayAge = function () { 17 console.log(this.age); 18 } 19 20 var instance = new subType('Nick', 29); 21 instance.sayAge();
4.原型式继承
1 function object(o) { 2 function F() { }; 3 F.prototype = o; 4 return new F(); 5 } 6 // 这个方法和 Object.create()函数类似,不过后者只兼容主流浏览器 7 var person = { 8 name: "Nick", 9 age: 29 10 } 11 12 var another = Object.create(person); 13 console.log(another.name);
5.寄生
- 类似于寄生构造模式和工厂模式,即创建一个函数将这个过程封装。
1 function another(original) { 2 var clone = Object.create(original); 3 clone.sayHi = function () { 4 console.log('Hi'); 5 } 6 return clone; 7 } 8 9 var person = { 10 name: 'Nick', 11 age: 29 12 } 13 14 var ins = another(person); 15 ins.sayHi();
6.寄生组合式继承
- 只需要调用一次超类构造函数,效率高,并且避免了在prototype和子类上创建不必要的、多余的属性。与此同时,原型链不会变,还可以正常使用instance和isPrototypeOf()。
1 function inheritPrototype(subType, superType) { 2 var prototype = Object.create(superType.prototype); // 创建对象 3 prototype.costructor = subType; //增强对象 4 subType.prototype = prototype; // 指定对象 5 } 6 7 function superType(name) { 8 this.name = name; 9 this.color = ["red", "blue"]; 10 } 11 12 superType.prototype.sayName = function () { 13 console.log(this.name); 14 } 15 16 function subType(name, age) { 17 superType.call(this, name); 18 this.age = age; 19 } 20 21 inheritPrototype(subType, superType); 22 23 subType.prototype.sayAge = function () { 24 console.log(this.age); 25 } 26 27 // 实例化 28 var instance = new subType("Boer", 40); 29 instance.sayName();