JS继承模式详解-优快云博客

1原型链继承

1 原型链继承要点：原型对象等于另一个类型的实例
缺点：子类型不同的实例之间会共享，造成污染

                function SuperType(){
			this.property = true;
		}
		//SuperType的原型
		SuperType.prototype.getSuperValue = function(){
			return this.property;
		}
		
		function SubType(){
			this.subproperty = false;
		}
		
		//继承了SuperType
                //subtype的原型对象  == supertype的实例      
		SubType.prototype = new SuperType();
		//subtype的原型
		SubType.prototype.getSubValue = function (){
			return this.subproperty;
		}
		
		var instance = new SubType();
		//instance.constructor现在指向supertype
		alert(instance.getSuperValue());//true
		alert(instance.getSubValue());//false

2借用构造函数继承

2 借用构造函数要点：在子类型构造函数内部调用超类型构造函数可用call和apply
缺点：函数不能复用

 function SuperType(){
       this.colors = ["red","bule","green"];
   }
   
   function SubType(){
   	//继承了supertype
        //SuperType.call(this);  还可以传参
        SuperType.apply(this);
   }
   
   var instance1 = new SubType();
   instance1.colors.push("black");
   alert(instance1.colors);//red,bule,green,black
   
   var instance2 = new SubType();
   alert(instance2.colors)//red,bule,green  此时无污染

3组合继承

3 组合继承要点：使用原型链实现对原型属性和方法的继承，用构造函数实现对实例属性的继承
缺点：两次调用SuperType（）

function SuperType(name){
  	this.name = name;
  	this.colors = ["red","bule","green"];
      }
      
      SuperType.prototype.sayName = function (){
      	alert(this.name);
      }
   
      function SubType(name,age) {
      	//继承属性
      	SuperType.call(this, name);
      	this.age = age;
      }
   //继承方法
 SubType.prototype = new SuperType();
 SubType.prototype.constructor = SubType;
 SubType.prototype.sayAge = function(){
 	alert(this.age);
 }
 
 var instance1 = new SubType("Nicholas",29);
 instance1.colors.push("black");
 alert(instance1.colors);    //"red,blue,green,black"
 instance1.sayName();      //Nicholas
 instance1.sayAge();       //29
 
 var instance2 = new SubType("Greg",27);
 alert(instance2.colors);    //"red,blue,green"
 instance2.sayName();      //Greg
 instance2.sayAge();       //27

4原型式继承

4原型式继承要点：借助原型可以基于已有的对象创建新对象
在object函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为
这个构造函数的原型,最后返回这个临时类型的一个新实例

 function object(o){
 	function F(){}
 	F.prototype = o;
 	return new F();
 }
  
 var person ={
 	name: "Nicholas",
 	friends: ["Shelby","Court","Van"]
 };
 var anotherPerson = object(person);
 anotherPerson.name = "Greg";
 anotherPerson.friends.push("Rob");
 
 var YetAnotherPerson = object(person);
 YetAnotherPerson.name = "Linda";
 YetAnotherPerson.friends.push("Barbie");
 
 alert(person.friends);//Shelby,Court,Van,Rob,Barbie

//新函数object.create
//    var anotherPerson2 = Object.create(person,{
//    	  name: {      //name会覆盖原型对象person上的同名属性
//    	  	value:"greg"
//    	  }
//    });
//    alert(anotherPerson2.name);//greg

5寄生式继承

寄生式继承要点：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象
最后再像真的是他做了所有工作一样返回对象

  function createAnthor(original){
  	var clone = object(original);//通过调用函数创建一个新对象
  	clone.sayHi = function (){   //以某种方式增强这个对象
  		alert("Hi");
  	};
  	return clone;                //返回这个对象
  }
  
  var person = {
  	name: "Nichols",
  	friends: ["Shelby","Court","Van"]
  };
  
  var anotherPerson = createAnthor(person);
  anotherPerson.sayHi();// Hi

　　 6寄生组合式继承

不必为了指定子类型的原型而调用超类型的构造函数
使用寄生式继承来继承超类型的原型，再讲结果指定给子类型的原型

function inheritPrototype(subType,superType){
 	var prototype = object(superType.prototype);//创建对象
 	prototype.constructor = subType;            //增强对象
 	subType.prototype = prototype;              //指定对象
 }
 
 function SuperType(name){
 	this.name = name;
 	this.colors = ["red","blue","green"];
 }
 
 SuperType.prototype.sayNmae = function(){
 	alert(this.name);
 }
 
 function SubType(name,age){
 	SuperType.call(this,name);
 	this.age = age;
 }
 
 inheritPrototype(SubType,SuperType);//
 
 SubType.prototype.sayAge = function(){
 	alert(this.age);
 }

　　对6的补充

function beget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。
    var F = function(){};
    F.prototype = obj;
    return new F();
   }
	function Super(){
	    // 只在此处声明基本属性和引用属性
    this.val = 1;
    this.arr = [1];
}
//  在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
var proto = beget(Super.prototype); // 核心
proto.constructor = Sub;            // 核心
Sub.prototype = proto;              // 核心
 
var sub = new Sub();
alert(sub.val);
alert(sub.arr);

转载于:https://www.cnblogs.com/zyxie154/p/7440497.html