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/>");