第201天：js---实现继承的5种方式

一、构造函数方式

 //构造函数
     function People(){
         this.race = '汉族';
     }
     People.prototype={
         eat:function(){
             console.log('123');
         }
     }

     /*学生对象*/
     function Student(name, skin) {
         People.apply(this, arguments);
         this.name = name;
         this.skin = skin;
     }
     //实例化
     var zhangsan = new Student('张三', '黄皮肤')
     console.log(zhangsan.name); //张三
     console.log(zhangsan.race); //汉族
     zhangsan.eat();//报错
     //原因：无法继承person原型对象中的方法

二、原型对象实现继承

 //基类
     var Person = function(){
         this.name = '张三';
         this.age = 20;
     }
     Person.prototype = {
         say : function(){
             console.log('Person.prototype - say');
         }
     }

     //构造函数
     var Student = function(name,age,sex){
         this.sex = sex;
     }
     //学生继承person,则拥有person原型中的方法
     Student.prototype = new Person();
     Student.prototype.getTeacher = function(){
         console.log('Student.prototype.getTeacher');
     }

     //测试 -- 学生类拥有了person中的方法
     var xiaoWang = new Student('小王',10,'男');
     //xiaoWang.name = '张三'
     console.log(xiaoWang.name);//张三
     xiaoWang.say();//Person.prototype - say
     xiaoWang.getTeacher();//Student.prototype.getTeacher

     /*存在的问题*/
     /*无法通过传参数定义对象*/
     console.log(xiaoWang.name);//张三
     console.log(xiaoWang.age);//

     /*解决方式*/
     xiaoWang.name = '小明';
     xiaoWang.age = 22;
     console.log(xiaoWang.name);//小明
     console.log(xiaoWang.age);//

三、组合方式（构造函数+原型）

 function Person(name, age) {
         this.name=name;
         this.age=age;
     }
     Person.prototype.say = function () {
         console.log("我是"+this.name);
     }

     function Student(name, age, no) {
         /*会自动调用Person的方法，同时将name age传递过去*/
         Person.call(this,name,age);
         //自己的属性
         this.no = no;
     }
     Student.prototype = new Person();
     var stu1 = new Student("小明",22,123);
     console.log(stu1.name);//小明
     console.log(stu1.say());//我是小明
     console.log(stu1.no);//

四、寄生组合式

 /*继承的固定函数*/
     function inheritPrototype(subType,superType){
         var prototype = Object(superType.prototype);
         prototype.constructor = subType;
         subType.prototype = prototype;
     }

     function Person(name){
         this.name = name;
     }
     Person.prototype.say= function(){
         console.log("我是"+this.name);
     }

     function Student(name,age){
         Person.call(this,name);
         this.age = age;
     }

     inheritPrototype(Student,Person);
     var xiaozhang = new Student('小张',20);
     console.log(xiaozhang.name);//小张
     xiaozhang.say();//我是小张

五、拷贝方式

 var Chinese = {nation:'中国'};
     var Doctor ={career:'医生'}

 //    请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？
 //    这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。

     function extend(p) {
         var c = {};
         for (var i in p) { 　　　　　
             c[i] = p[i];　　　　
         }
         c.uber = p;
         return c;
     }

     var Doctor = extend(Chinese);
     Doctor.career = '医生';
     alert(Doctor.nation); // 中国

六、继承的框架

1、base2.js

 <script src='base2.js'></script>
 <script>
     /*基类*/
     var Person = Class.extend ( {
         init: function (name ) {
             this.name = name;
         },
         dance: function ( ) {
             alert('跳舞');
         }
     } );

     /*子类*/
     var Student = Person.extend({
         init: function(){
             //false表示什么意思
             this._super( false );
         },
         /*重写父类方法*/
         dance: function(){
             /*调用父类*/
             this._super();
             alert('唱歌');
         },
         /*实现自己的方法*/
         swingSword: function(){
             return true;
         }
     });

     var xiaozhang = new Student();
     xiaozhang.dance();
 </script>

2、simple.js

 <script src='simple.js'></script>
 <script>
     var Person = Class.extend({
         init: function(age,name){
             this.age = age;
             this.name = name;
         },
         dance: function(){
             alert("跳舞");
         }
     });
     var Student = Person.extend({
         init: function(age,name,height){
             this._super(age,name);
             this.height = height;
         },
         dance: function(){
             /*调用父类的同名方法*/
             this._super();
             /*同时又可以调用自己的方法*/
             alert("唱歌");
         }
     });

     var xiaozhang = new Student(21,'小张','121');
     xiaozhang.dance();
 </script>

七、对象继承实现计算周长

 var sharp = function(name){
     this.name = name;
 }
 sharp.prototype = {
         //改方法被继承,这个方法是大家都有的,并且都一样,可以放在基类中
         getName : function(){
                 return this.name;
             }
         //会根据不同的形状而被重写
         ,zhouchang : function(){
                return 100;
             }
     };

 //矩形对象
 var Rectangle = function(length,width){
     sharp.call(this, name);
     this.name='矩形';
     this.length =length;
     this.width = width;
 }
 //重写计算周长的方法
 Rectangle.prototype = new sharp();
 Rectangle.prototype.zhouchang = function(){
      return (this.length + this.width) * 2;
 }

 //好处
 //以后新增一个计算其他形状的需求,不用修改原来的代码,只需要扩充即可.
 //新增一个正方形
 var Square  = function(length){
     sharp.call(this, name);
     this.name='正方形';
     this.length =length;
     //this.width = width;
 }
 //重写计算周长的方法
 Square.prototype = new sharp();
 Square.prototype.zhouchang = function(){
      return this.length * 4;
 }

 //新增一个圆形
 var Circle   = function(radius){
     sharp.call(this, name);
     this.name='圆形';
     this.radius =radius;
     //this.width = width;
 }

 //重写计算周长的方法
 Circle.prototype = new sharp();
 Circle.prototype.zhouchang = function(){
     //圆的周长=2×圆周率×半径 或 圆周率×直径
       return 2 * Math.PI * this.radius;
 }

 //使用对象 封装
 function computezhouchang(shape) {
     alert( shape.getName() + '的周长是' + shape.zhouchang() );
 }

 //组装世界
 //var rectangle = new Rectangle('矩形',10,20);
 //computezhouchang(rectangle);

 //去掉属性name
 var rectangle = new Rectangle(10,20);
 computezhouchang(rectangle);

 //正方形
 var square = new Square(10);
 computezhouchang(square);

 //圆形
 var circle = new Circle(10);
 computezhouchang(circle);