原文:JS中通过call方法实现继承

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

<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>

　　　　　

JS中通过call方法实现继承的更多相关文章

  1. JS与OC交互，JS中调用OC方法(获取JSContext的方式)

    最近用到JS和OC原生方法调用的问题,查了许多资料都语焉不详,自己记录一下吧,如果有误欢迎联系我指出. JS中调用OC方法有三种方式: 1.通过获取JSContext的方式直接调用OC方法 2.通过继 ...

  2. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  3. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  4. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  5. JavaScript -- 时光流逝（二）：js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  6. ASP.NET#使用母版时，如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题

    当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...

  7. JS中split使用方法和数组中元素的删除

    JS中split使用方法和数组中元素的删除 JS中split使用方法 <script language="javascript"> function spli(){ d ...

  8. JS中的splice方法

    JS中的splice方法 定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组(集合). 语法 arrayObject.splice(ind ...

  9. JS中常见的几种继承方法

    1.原型链继承 // 1.原型链继承 /* 缺点:所有属性被共享,而且不能传递参数 */ function Person(name,age){ this.name = name this.age = ...

随机推荐

  1. net开源cms系统

    .net开源cms系统推荐 内容目录: 提起开源cms,大家第一想到的是php的cms,因为php开源的最早,也最为用户和站长们认可,随着各大cms系统的功能的不断完善和各式各样的开源cms的出现,. ...

  2. 上传文件块client实现

    首先由内容阻止所有文件(块大小的约束),然后对于每一个chunk构造单独的一个UDP 数据报进行传输,在应用层的開始是自己定义的包头,有块号,块长度,块指纹等元数据信息,这些信息便于接收端可以按序正确 ...

  3. 【2014 Multi-University Training Contest 2 1002】/【HDU 4873】 ZCC Loves Intersection

    果然,或滥用零件,啥都不说了.我们欣慰地学习阅读.这两天残疾儿童是数学. 这是求所需的问题,不明确.贴上官方的解题报告. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  4. Team Foundation Server 2015使用教程--默认团队checkin权限修改

  5. ViewGroup可实现上下、各地跑马灯效果滚动

    先上效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ25lbmd3dQ==/font/5a6L5L2T/fontsize/400/fill ...

  6. 写作Openwrt固件

    启动tftp软体.并设置文件夹的固件文件(Current Dircctory)和serverIP(Service interface).server指PC机.图.:                   ...

  7. 十天学Linux内核之第十天---总结篇(kconfig和Makefile & 讲不出再见)

    原文:十天学Linux内核之第十天---总结篇(kconfig和Makefile & 讲不出再见) 非常开心能够和大家一起分享这些,让我受益匪浅,感激之情也溢于言表,,code monkey的 ...

  8. DevExpress Report的简单应用

    原文:DevExpress Report的简单应用 创建一个简单的WPF应用程序包含一个报告的过程中,使用Microsoft®Visual Studio®中.您将学习如何添加一个静态文本一份报告,为您 ...

  9. 漫游Kafka实战篇clientAPI

    原文地址:http://blog.csdn.net/honglei915/article/details/37697655 Kafka Producer APIs 旧版的Procuder API有两种 ...

  10. 面向对象三大特征之多态——Java笔记（七）

    多态:     同一个实体同时具有多种形式     编译时的类型有声明该变量时使用的类型决定,运行时的类型有实际赋值给变量的对象决定     如果编译时类型和运行时类型不同,就出现多态 例: clas ...