网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 JavaScript模拟实现继承的方法
范文
    这篇文章主要介绍了JavaScript模拟实现继承的方法,实例分析了javascript类的操作与模拟实现继承的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下：
    我们都知道，在JavaScript中只能模拟实现OO中的"类"，也就意味着，在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。
    先定义一个父类，
    //父类
    function ParentClass() {
    this.className = "ParentClass";
    this.auth = "Auth";
    this.version = "V1.0";
    this.parentClassInfo = function () {
    return this.className + "\n" + this.auth + "\n" + this.version;
    }
    }
    一、prototype 实现：
    //子类
    //1、prototype继承
    function ChildClassByPrototype() {
    this.date = "2013-07-26";
    this.classInfo = function () {
    return this.parentClassInfo() + "\n" + this.date;
    }
    }
    ChildClassByPrototype.prototype = new ParentClass();
    var cctest1 = new ChildClassByPrototype();
    cctest1.parentClassInfo();
    cctest1.classInfo();
    这种方式很简单，只需把父类的实例赋值给子类的prototype属性就行了，然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性，比如这个例子中的 cctest1.parentClassInfo() 方法，JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法，子类中没有，所以继续查找ChildClassByPrototype.prototype属性，而其prototype属性的值是ParentClass的一个实例，该实例有parentClassInfo()方法，于是查找结束，调用成功。
    二、apply 实现：
    //2、apply继承
    function ChildClassByApply() {
    ParentClass.apply(this, new Array());
    //ParentClass.apply(this, []);
    this.date = "2013-07-26";
    this.classInfo = function () {
    return this.parentClassInfo() + "\n" + this.date;
    }
    }
    JavaScript中的apply可以理解为用A方法替换B方法，第一个参数为B方法的对象本身，第二个参数为一个数组，该数组内的值为需要传递给A方法对应的参数列表，如果参数为空，即没有参数传递，可通过 new Array()、[] 来传递。
    三、call + prototype 实现：
    //3、call+prototype继承
    function ChildClassByCall() {
    ParentClass.call(this, arguments);
    this.date = "2013-07-26";
    this.classInfo = function () {
    return this.parentClassInfo() + "\n" + this.date;
    }
    }
    ChildClassByCall.prototype = new ParentClass();
    call和apply作用类似，即都是用A方法替换B方法，只是传递的参数不一样，call方法的第一个参数为B方法的对象本身，后续的参数则不用Array包装，需直接依次进行传递。既然作用差不多，为何多了一句 原型赋值呢？这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。
    每种方法都有其适用环境，比如，如果父类带有有参构造函数：
    function ParentClass(className, auth, version) {
    this.className = className;
    this.auth = auth;
    this.version = version;
    this.parentClassInfo = function () {
    return this.className + "\n" + this.auth + "\n" + this.version;
    }
    }
    这种情况下，prototype就不适用了，可选用apply或call；
    function ChildClassByApply(className, auth, version) {
    ParentClass.apply(this, [className, auth, version]);
    this.date = "2013-07-26";
    this.classInfo = function () {
    return this.parentClassInfo() + "\n" + this.date;
    }
    }
    function ChildClassByCall(className, auth, version) {
    ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
    //ParentClass.call(this, className, auth, version);
    this.date = "2013-07-26";
    this.classInfo = function () {
    return this.parentClassInfo() + "\n" + this.date;
    }
    }
    ChildClassByCall.prototype = new ParentClass();
    实例化：
    var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
    var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");
    在apply和call中，又该如何取舍呢？在OO的继承中，子类继承于父类，那么它应该也是父类的类型。即，ChildClassByCall、ChildClassByApply应该也是ParentClass类型，但我们用"instanceof"检测一下就会发现，通过apply继承的子类，并非ParentClass类型。所以，我们建议用call + prototype 来模拟实现继承。据说，Google Map API 的继承就是使用这种方式哟。
    希望本文所述对大家的javascript程序设计有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 22:10:03