JS中通过call方法实现继承

原文: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>

 

     

时间: 2024-09-14 16:42:17

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

JS中的Replace方法使用经验分享

  本文给大家分享的是我们在使用javascript中的replace方法的时候需要注意的一个事项,我就是没有注意到,才被这个bug烦了好久,这里记录下来,有需要的小伙伴可以参考下. 最近查一个bug,原因是JS中的Replace方法造成的,当将一个字符串中有处需要替换时,一般会用到JS中的Replace方法,Replace方法的第一个参数如果是传的字符串,只会替换第一处.代码如下: 复制代码 代码如下: var str = "0CEA65D5-DB8E-4876-A6F8-C88AC7F0E1

js中widow.open()方法使用详解

本文为大家详细介绍下js中widow.open()方法的各项参数及使用示例,有想学习的朋友可不要错过了,希望对大家有所帮助   一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三.示例: 复制代码 代码如下:

javascript-在同一个页面 js中两个方法传值

问题描述 在同一个页面 js中两个方法传值 js方法A()是接收webbrowser传来的值 而方法B()是去获取 方法A()传来的值如何实现? 如何实现?尽量写出具体代码! 解决方案 不知道我的理解是否正确,希望能帮到你 var val; //定义一个公共变量 function A(var_fromweb){ val = var_fromweb; //把方法A想要传出的值赋给 val } function B(){ //这里就可以直接使用val了 } 解决方案二: function getVa

浅谈JS中的bind方法与函数柯里化_javascript技巧

绑定函数bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定. 关于这个特性看<JS权威指南>原文的例子: var sum = function(x,y) { return x + y }; var succ = sum.bind(null, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

JS中的Replace方法使用经验分享_javascript技巧

最近查一个bug,原因是JS中的Replace方法造成的,当将一个字符串中有处需要替换时,一般会用到JS中的Replace方法,Replace方法的第一个参数如果是传的字符串,只会替换第一处.代码如下: 复制代码 代码如下: var str = "0CEA65D5-DB8E-4876-A6F8-C88AC7F0E185,E846C244-8A19-4374-879B-0B1DC08D1747,6CB3EBA4-1E22-4E4D-8800-AE31130B6F5D"; alert(st

JS中的异常处理方法分享

我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好)    代码如下: window.onerror=function(){return true;}        下面是为了获取js异常信息,方便开发者找回问题   1,try...catch...   代码如下: <script type="text/javascript&q

JS中的异常处理方法分享_javascript技巧

js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好) 复制代码 代码如下: window.onerror=function(){return true;} 下面是为了获取js异常信息,方便开发者找回问题 1,try...catch... 复制代码 代码如下: <script type="text/javascript">var txt=""function message(){try   {   adddlert

js中window.opener方法的跨域问题分析

最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个login页窗口B,登陆后callback地址回调成功后,需要关闭当前window.open打开的login小窗口B,再将打开这个小窗口的原窗口页(A)刷新显示正确状态. 这时就用到了这个方法: window.opener.location.reload() 与 window.opener.location.href=window.opener.locat

js中实现多态采用和继承类似的方法_javascript技巧

多态的实现可以采用和继承类似的方法.首先定义一个抽象类,其中调用一些虚方法,虚方法在抽象类中没用定义,而是通过其具体的实现类来实现. 如下面的例子: Object.extend=function(destination,source){ for(property in source){ destination[property]=source[property]; } return destination; } //定义一个抽象基类base,无构造函数 function base(){}; ba