JavaScriptの中の継承を深く分析する

4542 ワード

JavaScriptの継承には以下のような方法があります.
一、相手を偽る
	function Parent(username) {
		this.username = username;
		this.hello = function() {
			alert(this.username);
		}
	}

	function Child(username, password) {
		this.method = Parent;
		this.method(username);
		delete this.method;

		this.password = password;
		this.world = function() {
			alert(this.password);
		}
	}

	var p = new Parent("   ");
	var c = new Child("   ", "    ");

	p.hello();
	c.hello();
	c.world();
二、コール方法を使用して、コール方法の最初のパラメータをコールメソッドの関数としてのthisとします.
	function Parent(username) {
		this.username = username;
		this.hello = function() {
			alert(this.username);
		}
	}

	function Child(username, password) {
		Parent.call(this, username);

		this.password = password;
		this.world = function() {
			alert(this.password);
		}
	}

	var p = new Parent("   ");
	var c = new Child("   ", "    ");

	p.hello();
	c.hello();
	c.world();
三、アプリを使うと、前と似ています.
	function Parent(username) {
		this.username = username;
		this.hello = function() {
			alert(this.username);
		}
	}

	function Child(username, password) {
		//Parent.apply(this, new Array(username));
		Parent.apply(this, [username]);
		this.password = password;
		this.world = function() {
			alert(this.password);
		}
	}

	var p = new Parent("   ");
	var c = new Child("   ", "    ");

	p.hello();
	c.hello();
	c.world();
四、原型チェーン方式
	function Parent() {
	
	}

	Parent.prototype.username = "          ";
	Parent.prototype.hello = function() {
		alert(this.username);
	}

	function Child() {
		
	}

	Child.prototype = new Parent();
	Child.prototype.password = "  I.N.G";
	Child.prototype.world = function() {
		alert(this.password);
	}

	var parent = new Parent();
	var child = new Child();
	parent.hello();
	child.hello();
	child.world();
五、混合方式(おすすめ)
	function Parent(username) {
		this.username = username;
	}

	Parent.prototype.hello = function() {
		alert(this.username);
	}

	function Child(username, password) {
		Parent.call(this, username);
		//Parent.apply(this, new Array(username));
		this.password = password;
	}

	Child.prototype = new Parent();
	Child.prototype.world = function() {
		alert(this.password);
	}

	var p = new Parent("     ");
	var c = new Child("     ", "      ");

	p.hello();
	c.hello();
	c.world();
以下はJavaScriptを総合的に使って対象と継承に向かう小さい例で、より深く理解するのに役立ちます.
	function Shape(edge) {
		this.edge = edge;
	}

	Shape.prototype.getArea = function() {
		return 0;
	}

	Shape.prototype.getEdge = function() {
		return this.edge;
	}

	function Triangle(bottom, height) {
		Shape.call(this, 3);
		this.bottom = bottom;
		this.height = height;
	}

	Triangle.prototype = new Shape();
	Triangle.prototype.getArea = function() {
		return 0.5 * this.bottom * this.height;
	}

	function Rectangle(bottom, height) {
		Shape.call(this, 4);
		this.bottom = bottom;
		this.height = height;
	}

	Rectangle.prototype = new Shape();
	Rectangle.prototype.getArea = function() {
		return this.bottom * this.height;
	} 

	var triangle = new Triangle(10, 5);
	alert(triangle.getEdge());//3
	alert(triangle.getArea());//25

	var rectangle = new Rectangle(10, 10);
	alert(rectangle.getEdge());//4
	alert(rectangle.getArea());//100

	//       prototype    
	function class1(){
		  //    
	}
	class1.prototype={
		  method:function(){
			   alert(1);
		  },
		  method2:function(){
			   alert("method2");
		  }
	}
	function class2(){
		  //    
	}
	// class2   class1
	for(var p in class1.prototype){
		   class2.prototype[p]=class1.prototype[p];
	}

	//    class1  method  
	class2.prototype.method=function(){
		  alert(2);
	}
	//        
	var obj1=new class1();
	var obj2=new class2();
	//    obj1 obj2 method  
	obj1.method();
	obj2.method();
	//    obj1 obj2 method2  
	obj1.method2();
	obj2.method2();

	//        inherit       
	Function.prototype.inherit=function(baseClass){
		 for(var p in baseClass.prototype){
				this.prototype[p]=baseClass.prototype[p];
		 }
	}
	//          ( )    Function       ,           inherit  ,   //   ,            。  ,      :
	// class2   class1
	for(var p in class1.prototype){
		   class2.prototype[p]=class1.prototype[p];
	}
	//     :
	// class2   class1
	class2.inherit(class1)
	//            ,      。           ,     ,   class2      //   ,   prototype    ,