JS中通过call方法实现继承

浏览数：23 / 时间：2015年06月09日

讲解都写在注释里面了，有不对的地方请拍砖，谢谢！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS通过call方法实现继承</title>
</head>
<body>
    <script type="text/javascript">

        /*  js中的继承有多种实现方式，今天我们讨论下通过call方法实现的继承。
        
        此方法与 原型链继承 相比还是比较简单，容易理解的。

        那么，我们先对call方法进行简单的讲解：

        call 方法可以用一个对象来代替另一个对象调用一个方法。

        这句话蛮不好理解，

        还是看示例代码吧，更直观明了：

        */

        function a() {
            this.name = "我是a";

            this.showName = function () {
                alert(this.name);
            }
        }

        function b() {
            this.name = "我是b";
        }

        var _a = new a();
        var _b = new b();

        //下面这行代码的意思是：用 _b 来代替 _a 执行 _a 的showName方法。
        //因此执行对象从 _a 变成了 _b, showName方法里面的this此时指代的是 b 了，而不是 a
        //因此输出结果为： 我是b
        _a.showName.call(_b);

        /*
        哎，语文没学好，总感觉表达不清楚，也不知道大家能不能看懂。
        好了，进入正题，我们来看继承的实现。
        */


        /*
        首先我们要定义4个类：动物(animal) ; 人(person) ; 中国人(chinese) ; 日本人(japanese)。

        代码如下:
        */

        function animal() {
            this.eat = function () {
                alert("动物都要吃东西");
            }
        }

        function person() {
            this.say = function () {
                alert("人是会说话的");
            }
        }

//        function chinese() {
//            this.ch = function () {
//                alert("我是中国人");
//            }
//        }

//        function japanese() {
//            this.ja = function () {
//                alert("我是日本人");
//            }
//        }


        /*  然后实现4个类之间的关系
            
            关系如下： 中国人 继承自 人

                      日本人 继承自 动物 和 人

            说明： 
            
            在JS中是可以实现类的多继承的。
            因此 japanese 可以同时继承自 animal 和 person ,
            它不像C#和java语言，只支持接口的多继承，而不支持类的多继承。
            

            修改上面的chinese和japanese如下：
        
        */


        function chinese() {
            person.call(this); //继承自 person 类 （用chinese来代替person）

            this.ch = function () {
                alert("我是中国人");
            }
        }


        function japanese() {
            animal.call(this); //继承自 animal 类
            person.call(this); //继承自 person 类

            this.ja = function () {
                alert("我是日本人");
            }
        }


        /*
            我们知道：实现继承后，子类是可以拥有父类的公有字段和方法的。
            而父类不会拥有子类的任何东西

            说明：
            js中的 字段，方法 也是有公有和私有之分的。
            子类只能访问到父类的公有字段和方法。           
            关于 js 中的 公有，私有，全局，静态 等等的定义讲解我会另写一篇博文
            与大家讨论。

            请看如下代码：
        */

        //实例化对象
        var c = new chinese();
        var j = new japanese();
        var p = new person();

        c.say(); //拥有父类 person 的 say 方法
        c.ch();  //自身的 ch 方法

        j.eat();  //拥有父类 animal 的 eat 方法
        j.say();  //拥有父类 person 的 say 方法
        j.ja();   //自身的 ja 方法

        p.say();  //自身的 say 方法

        /*
            下面两句会报错，
            因为父类person是不会拥有子类的任何东西的，
            所以p没有ch和ja方法。

            p.ch();
            p.ja();
        */

    </script>
</body>
</html>