Question

所以我有以下代码：

＆＃13;

class Process {

    constructor(){
        this.failedattempts = 0
    }
    
    generateNumber(){
        this.randomNumber = Math.floor(Math.random() * 20)
        document.getElementById("randomdisplay").innerHTML = this.randomNumber
        //this.guessNumber(this.randomNumber)
    }
    
    getNumber(test){
        var temp
        for (var i=0; i < test.elements.length; i++){
            temp = test.elements[i]
            //alert("getnumberloop iteration number " + i)
            if(temp.name){
                this.submittedContent = temp.value
            }
        }

        //alert(this.submittedContent)
    }

    guessNumber(){
        //alert(randomInput)
        //alert("submittedContent in guessNumber() is " + this.submittedContent)
        //alert("randomNumber in guessNumber() is " + this.randomNumber)
        if(this.submittedContent == this.randomNumber){
            document.getElementById("victorymessage").innerHTML = "You won!"
            document.getElementById("victorymessage").style.color = "red"
        }else{
            this.failedattempts++
            alert("failedattempts in guessnumber() is " + this.failedattempts)
        }
    }
}

class chartData {
    constructor () {
        this.processClone = new Process
    }
    displayfailedattempts(){
        alert("entered displayfailedattempts")
        alert(this.processClone.failedattempts)
    }
}

var processInstance = new Process
var chartDataInstance =  new chartData
//document.getElementById("randomdisplay").innerHTML = processinstance.guessNumber();

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>game with graphs!</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
        <link rel="stylesheet.css" type="text/css" href="gamestyle.css">
    </head>
    <body onload="processInstance.generateNumber()">
        <div id="div1">
            <p>input number between 0 and 19 here</p>
            <p>random number is</p>
            <p id="randomdisplay"></p>
            <form>
                <input type="text" name="place">
                <input type="button" value="senden" onclick='processInstance.getNumber(this.form)'/>
            </form>
            <input type = "button" value = "evaluate" onclick="processInstance.guessNumber()"></input>
            <p id="victorymessage">did you win?</p>
            <input type = "button" value = "showattempts" onclick="chartDataInstance.displayfailedattempts()">
        </div>
        <script src="gamejs.js"></script>
    </body>
    
</html>

＆＃13;

这整件事的目的是通过javascript在网页上练习处理用户输入。我之所以选择这种方法是因为我想主要使用javascript进行练习，而不是使用php和服务器。

稍后，我想显示使用chart.js创建的图表中失败尝试次数。这就是为什么我调用输出发生的第二类＆＃34; chartData＆＃34;。由于确定失败尝试的次数本质上与评估用户＆＃34; tip＆＃34;有关，我已将其放入guessNumber（）方法中。

现在，主要问题是当我使用源自＆＃34; Process＆＃34; class，然后＆＃34; displayfailedattempts（）＆＃34;方法始终显示＆＃34; 0＆＃34;。看起来ChartData类中的属性虽然来自进程类，但在那里看不到。我尝试了很多不同的尝试，我在ChartData类派生的进程类中创建了一个属性，但这并没有带来任何成功。我想知道我还有其他选择吗？

为了练习，我试图尽可能长时间地使用两个班级保持当前的方法。我也试着避免在课外编写代码，因为我想尝试在相互之间连接类的过程中能够走多远。

Answer 1

这是一个基本的OOP设计。

我不知道您的设计是否正确，但具体的方式是，processInstance应该接收已存在的实例的引用，而不是创建一个新实例。您可以将其作为构造函数参数传递给她：

class Process {

    constructor(){
        this.failedattempts = 0
    }
    
    generateNumber(){
        this.randomNumber = Math.floor(Math.random() * 20)
        document.getElementById("randomdisplay").innerHTML = this.randomNumber
        //this.guessNumber(this.randomNumber)
    }
    
    getNumber(test){
        var temp
        for (var i=0; i < test.elements.length; i++){
            temp = test.elements[i]
            //alert("getnumberloop iteration number " + i)
            if(temp.name){
                this.submittedContent = temp.value
            }
        }

        //alert(this.submittedContent)
    }

    guessNumber(){
        //alert(randomInput)
        //alert("submittedContent in guessNumber() is " + this.submittedContent)
        //alert("randomNumber in guessNumber() is " + this.randomNumber)
        if(this.submittedContent == this.randomNumber){
            document.getElementById("victorymessage").innerHTML = "You won!"
            document.getElementById("victorymessage").style.color = "red"
        }else{
            this.failedattempts++
            alert("failedattempts in guessnumber() is " + this.failedattempts)
        }
    }
}

class chartData {
    constructor (prc) {
        this.processClone = prc
    }
    displayfailedattempts(){
        alert("entered displayfailedattempts")
        alert(this.processClone.failedattempts)
    }
}

var processInstance = new Process
var chartDataInstance =  new chartData(processInstance )
//document.getElementById("randomdisplay").innerHTML = processinstance.guessNumber();

<!DOCTYPE html>
<html>
    <head>
        <title>game with graphs!</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
        <link rel="stylesheet.css" type="text/css" href="gamestyle.css">
    </head>
    <body onload="processInstance.generateNumber()">
        <div id="div1">
            <p>input number between 0 and 19 here</p>
            <p>random number is</p>
            <p id="randomdisplay"></p>
            <form>
                <input type="text" name="place">
                <input type="button" value="senden" onclick='processInstance.getNumber(this.form)'/>
            </form>
            <input type = "button" value = "evaluate" onclick="processInstance.guessNumber()"></input>
            <p id="victorymessage">did you win?</p>
            <input type = "button" value = "showattempts" onclick="chartDataInstance.displayfailedattempts()">
        </div>
        <script src="gamejs.js"></script>
    </body>
    
</html>

Answer 2

您可以使用课程extends中的Process并致电super()来运行父类的constructor

class chartData extends Process {
        constructor () {
            super();
            // this.processClone = new Process
        }
        displayfailedattempts(){
            alert("entered displayfailedattempts")
            alert(this.failedattempts)
        }
    }

    // var processInstance = new Process
    var chartDataInstance =  new chartData();
    chartDataInstance.displayfailedattempts();

请参阅codepen

如何在javascript中使用B类方法中的A类属性？

2 个答案: