原文: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. ContentMode 几个属性

    版权声明:本文博客原创文章,博客,未经同意,不得转载.

  2. WPF：警惕TextBox会占用过多内存

    原文:WPF:警惕TextBox会占用过多内存 问题源自这篇文章:WPF的TextBox产生内存泄露的情况. 整个问题是这样的,文章作者演示使用类似下方的代码来不停地像WPF的TextBox控件赋值: ...

  3. ORDER BY RAND()

    大概是因为需要研究了一下MYSQL随机样本实现.例如:离tablename表随机抽取了创纪录,我们一般的写法是:SELECT * FROM tablename ORDER BY RAND() LIMI ...

  4. NSIS文字及字符串函数与头文件介绍

    原文 NSIS文字及字符串函数与头文件介绍 文字函数,顾名思义就是处理字符串的函数.使用这些字符串函数前,必须先包含头文件WordFunc.nsh.该头文件目前包含如下一些函数:WordFind.Wo ...

  5. SSH-Struts（三）—ActionForm

    ActionForm ActionForm用于封装用户的请求数据.即用户在页面上输入的数据.它充当了一个运输工具的角色.为了能够立体的理解ActionFrom.以下从两个角度看看:     从封装的数 ...

  6. 【日报C在23】堆和栈的深入了解

    每日一C之堆与栈的深入理解        每天拾一个C语言贝壳,厚积薄发,积跬步以致千里.  今日贝壳:内存中堆与栈的深入理解.认识一个清晰地内存                          假 ...

  7. CSDN Markdown简明教程4-UML画画

    0.文件夹 文件夹 前言 序列图 1 序列图演示样例 2 序列图语法 流程图 1 流程图演示样例 2 流程图语法 节点定义 节点连接 Gravizo 声明 1. 前言 Markdown是一种轻量级的标 ...

  8. rabbitMQ说明文档

    rabbitMQ是什么 RabbitMQ     是由     LShift     提供的一个     Advanced Message Queuing Protocol (AMQP)     的开 ...

  9. Android相框 与 源代码结构

    一. Android 相框 Android框架层级 : Android 自下 而 上 分为 4层; -- Linux内核层; -- 各种库 和 Android执行环境层; -- 应用框架层; -- 应 ...

  10. Nagios显示器MySQL一个错误：NRPE: Unable to read output具体的解决过程

    前言:nagios介面.见监测mysql服务错误,如下面: Warning:NRPE: Unable to read output 1,跟nagios显示器server上check下 1.1.运行ch ...