JS中通过call方法实现继承

简介: 原文:JS中通过call方法实现继承  讲解都写在注释里面了,有不对的地方请拍砖,谢谢!   JS通过call方法实现继承 /* 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>

 

     

目录
相关文章
|
19天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
23天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
8天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
101 52
|
22天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
22天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
11天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
22天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
28天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
22天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。