javascript学习之继承

JavaScript实现继承

JavaScript实现继承的方式有三种，第一种，借用构造函数继承，第二种：原型继承。第三种：原型继承和借用构造函数继承的混合使用。

1. 借用构造函数继承： 是子类调用父类的模板，用调用函数的模式，调用父类函数，和变量。

代码：

	//继承  模板继承
			function Person(name,age){
				this.name = name;
				this.age = age;
				this.getName = function(){
					return "方法" + name;
				}
			}
			Person.prototype = {
				constructor:Person,//还原构造方法
				id:"1",
				test:function(){
					alert("父类原型方法");
				}
			}
			function Girls(sex,name,age){
				Person.call(this,name,age);
				this.sex = sex;
			} 
			
			//Girls.prototype = new Person("fxy","22");

			var girls = new Girls("fxy","22","女");

			alert("父类属性name:" + girls.name);//
			alert("父类属性属性age:" + girls.age);
			alert("子类属性sex:" + girls.sex);
			alert("父类方法:" + girls.getName());
			alert("父类原型属性" + girls.id);//访问不到
			girls.test();//父类原型方法//访问不到报错

执行结果如下：

虽然 继承了父类的模板，但是没有继承父类的原型。

2.原型继承

//继承  模板继承
			function Person(name,age){
				this.name = name;
				this.age = age;
				this.getName = function(){
					return "方法" + name;
				}
			}
			Person.prototype = {
				constructor:Person,//还原构造方法
				id:"1",
				test:function(){
					return "test父类原型方法";
				}
			}
			function Girls(sex){
				this.sex = sex;
			} 
			
			Girls.prototype = new Person("fxy","22");

			var girls = new Girls("女");

			document.write("父类属性name:" + girls.name + "<br/>");
			document.write("父类属性属性age:" + girls.age + "<br/>");
			document.write("子类属性sex:" + girls.sex + "<br/>");
			document.write("父类方法:" + girls.getName() + "<br/>");
			document.write("父类原型属性:" + girls.id + "<br/>");
			document.write("父类原型方法:" + girls.test() + "<br/>");//父类原型方法
			document.write("子类构造函数" + girls.constructor + "<br/>");

可以调用父类的所有属性和方法和原型属性和方法，但是子类的构造函数变成了父类的构造函数。

3.第三种继承 混合继承

//继承  模板继承
			function Person(name,age){
				this.name = name;
				this.age = age;
				this.getName = function(){
					return "方法" + name;
				}
			}
			Person.prototype = {
				constructor:Person,//还原构造方法
				id:"1",
				test:function(){
					return "test父类原型方法";
				}
			}
			function Girls(name,age,sex){
				Person.call(this,name,age);
				this.sex = sex;
			} 
			
			Girls.prototype = new Person();

			var girls = new Girls("fxy","22","女");

			document.write("父类属性name:" + girls.name + "<br/>");
			document.write("父类属性属性age:" + girls.age + "<br/>");
			document.write("子类属性sex:" + girls.sex + "<br/>");
			document.write("父类方法:" + girls.getName() + "<br/>");
			document.write("父类原型属性:" + girls.id + "<br/>");
			document.write("父类原型方法:" + girls.test() + "<br/>");//父类原型方法
			document.write("子类构造函数" + girls.constructor + "<br/>");

可以继承父类模板和父类原型对象

第四种：

集成以上所有优点，回避缺点

                        function extend(sub,sup){
				var f = new Function();
				f.prototype = sup.prototype;
				sub.prototype = new f();
				sub.prototype.constructor = sub;
				sub.supClass = sup;
				return sub;
			}
			//继承  模板继承
			function Person(name,age){
				this.name = name;
				this.age = age;
				this.getName = function(){
					return "方法" + name;
				}
			}
			Person.prototype = {
				constructor:Person,//还原构造方法
				id:"1",
				test:function(){
					return "test父类原型方法";
				}
			}
			extend(Girls,Person);
			function Girls(name,age,sex){
			        Girls.supClass.call(this,name,age);//继承模板
				this.sex = sex;
			} 
			
			//Girls.prototype = new Person();

			var girls = new Girls("fxy","22","女");

			document.write("父类属性name:" + girls.name + "<br/>");
			document.write("父类属性属性age:" + girls.age + "<br/>");
			document.write("子类属性sex:" + girls.sex + "<br/>");
			document.write("父类方法:" + girls.getName() + "<br/>");
			document.write("父类原型属性:" + girls.id + "<br/>");
			document.write("父类原型方法:" + girls.test() + "<br/>");//父类原型方法
			document.write("子类构造函数" + girls.constructor + "<br/>");