个人中心
gpt4 book ai didi

JavaScript:将继承的类添加到数组不起作用

转载 作者：数据小太阳 更新时间：2023-10-29 05:55:47 25 4
gpt4 key购买 nike

我在使用 JavaScript 时遇到了一些问题。我有以下代码:

<html>
<head>
<title>Test</title>
<script  type="text/javascript">
function Control(){
    var name;

    this.setName = function(newName){
        name = newName;
    };

    this.getName = function(){
        return name;
    };
}

function SpecializedControl(){
}
SpecializedControl.prototype = new Control();

function Form(){
    var formControls = [];

    this.addControl = function(control){
         formControls.push(control);

         alert(formControls[0].getName());
    };
}

var form = new Form();

var control1 = new SpecializedControl();
control1.setName("Control1");
form.addControl(control1);

var control2 = new SpecializedControl();
control2.setName("Control2");
form.addControl(control2);

</script>
</head>
<body>
</body>
</html>

SpecializedControl 继承自Control 类。

Form 类中的 addControl 函数只是将控件添加到数组中。

问题是，当我添加多个 SpecializedControl 时，数组中的值会被覆盖，这意味着当我访问数组中的第一个项目(应该是“Control1”)时，我得到了“Control2”。 Control1 不再在数组中。

当我将相同的函数与 Control 对象一起用作参数时，一切都按预期工作。

有人知道为什么会发生这种情况以及如何纠正这种情况吗？

最佳答案

数组中的值没有被覆盖；问题是两个控件共享相同的 name 变量。因为 Control 函数只执行一次，所以只声明了一个 name 变量。

你有两个主要的选择来解决这个问题。 (1) 使 name 成为特定于每个单独控件的实例变量(例如 this._name)。 (2) 从 SpecializedControl 构造函数中执行 Control 函数。 (实际上，IMO，对于一个平衡且彻底的继承模型，您应该同时使用这两种方法)。

这是三个可行的解决方案。前两个分别使用选项 (1) 和 (2)。第三种结合了这两种方法，这是我会采用的方式(但需要 joi )。

选项 1:

function Control(){

    this.setName = function(newName){
        this._name = newName;
    };

    this.getName = function(){
        return this._name;
    };
}

选项 2:

function SpecializedControl(){
    Control.apply(this, arguments);
}

选项 3:

var Control = joi.Unit.sub(function() {

    function constructor() {
        this.base();
    }

    constructor.prototype = {
        '#name': null,
        setName: function(name) {
            this['#name'] = name;
        },
        getName: function() {
            return this['#name'];
        }
    };

    return constructor;

}());

var SpecializedControl = Control.sub(function() {

    function constructor() {
        this.base();
    }

    return constructor;

}());

var Form = joi.Unit.sub(function() {

    function constructor() {
        this.base();
        this['#formControls'] = [];
    }

    constructor.prototype = {
        '#formControls': null,
        addControl: function(control) {
            this['#formControls'].push(control);
            alert(this['#formControls'][0].getName());
        }
    };

    return constructor;

}());

var form = new Form();

var control1 = new SpecializedControl();
control1.setName("Control1");
form.addControl(control1);

var control2 = new SpecializedControl();
control2.setName("Control2");
form.addControl(control2);​

关于JavaScript:将继承的类添加到数组不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11005628/

25 4 0
文章推荐： javascript - 到达另一个 div 时停止 div 滚动
文章推荐： redis - 使用 django-celery chord，celery.chord_unlock 一直在执行，不调用提供的回调
文章推荐： session - 如何使用 redis、express 和 socket.io 让 session 工作？
文章推荐： javascript - 避免从主干 View 重新渲染图像和其他内容
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com