原文: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. Android开发自学笔记(基于Android Studio1.3.1)—1.环境搭建(转)

    一.引言    本套学习笔记的开发环境是Windows 10 专业版和Android Studio 的最新版1.3.1. Android Studio 是一个Android开发环境,基于Intelli ...

  2. DOM attributes and properties

    element :attributes : DOM objects : properties 一个是元素属性的叙述性说明,它是对象属性的叙述性说明 版权声明:本文博客原创文章,博客,未经同意,不得转载 ...

  3. 2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件、设备

     2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件.设备 a)        3A/30V双路稳压电源(可并联): b)        60MHz示波器: c)        三位半数字万用 ...

  4. java 生产者消费者问题 并发问题的解决（转）

    引言 生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,如下图所示,生产者向空间里存放数据,而消费者取用数据,如果不加以协调可能会出现以下情况: 生产者消费者图 ...

  5. 苹果（APPLE）开发人员账号说明及注冊流程（99美元公司版/个人版及299美元企业版）

    APPLE的政策是,要公布到APP STORE必须用99美元的个人版或公司版Apple Developer Programs,要在非商店外下载仅仅能使用299美元的企业版iOS Developer E ...

  6. LinbDesk --- 新的extjs4.2 desktop demo : 技术交流Q群：336584192

    很多朋友对extjs desktop感兴趣,就在原来简单的dsktop基础上,作了很多拓展  主要例如以下: 软件更新情况介绍: LinbDesk 拓展自Extjs 4.2的桌面Demo 拓展代码适用 ...

  7. python 基础知识点整理 和详细应用

    Python教程 Python是一种简单易学,功能强大的编程语言.它包含了高效的高级数据结构和简单而有效的方法,面向对象编程.Python优雅的语法,动态类型,以及它天然的解释能力,使其成为理想的语言 ...

  8. linux(fedora) 下dvwa 建筑环境

    linux(fedora)下dvwa组态 1.下载httpd,dvwa,mysql,mysqlserver, php-mysql,php 除了dvwa 这是外界进入下一官方网站.该服务通过休息inst ...

  9. HDU 4349 Xiao Ming&#39;s Hope

    非常无语的一个题. 反正我后来看题解全然不是一个道上的. 要用什么组合数学的lucas定理. 表示自己就推了前面几个数然后找找规律. C(n, m) 就是 组合n取m: (m!(n-m!)/n!) 假 ...

  10. java Map 之 排序（key,value）

    一:起因: (1)现实中须要Map容器进行排序的情况非常多非常多:由于Map<key,value>键值对的存储结构特别是HashMap的结构是非常优秀的,数据存储就难免对其进行排序: (2 ...