第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);//20


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

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

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

四、寄生组合式

/*继承的固定函数*/
    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);