Question

我想使用getDOM方法来收集DOM值。 getDOM（）函数返回一个具有键值对的对象（输入DOM的值）。

我想在另一个名为tempDifference（）的方法中使用getDOM对象。这不起作用：

app2.js：30未捕获的TypeError：无法读取未定义的属性'inputHeatFlow' 在Object.tempDifference（app2.js：30） at：1：24

// create app as object
var calcHeatFlow = {
    // collect DOM information
    getDOM: function() {
        // return DOM information as object
        return {
            // return getDOM properties with DOM values
            inputHeatFlow: parseFloat(document.getElementById("input__flow").value),
            inputHeatReturn: parseFloat(document.getElementById("input__return").value),
            inputHeatTemp: parseFloat(document.getElementById("input__temp").value),
            inputHeatExponent: parseFloat(document.getElementById("input__exponent").value),
            inputHeatValue: parseFloat(document.getElementById("input__value").value)
        }
    },
    // structure calculate methods
    calculate: {
        // calculate fixed value 
        fixedValue: function() {
            const normHeatFlow = 75, normHeatReturn = 65, normTemp = 20;
            
            return (normHeatFlow - normHeatReturn) / 
                    (Math.log((normHeatFlow - normTemp) / 
                    (normHeatReturn - normTemp)));
                
        },
        // calculate temperature difference
        tempDifference: function() {

            // return a value
            return (this.getDOM.inputHeatFlow - this.getDOM.inputHeatReturn) / 
                   (Math.log((this.getDOM.inputHeatFlow - this.getDOM.inputHeatTemp) / 
                   (this.getDOM.inputHeatReturn - this.getDOM.inputHeatTemp)));
        },
        // use fixedValue and tempDifference to calculate the result
        result: function() {
            // calculate result
        }
    }
};

// collect DOM information in execution phase
calcHeatFlow.getDOM();

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wärmeleistungsrechner</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <div class="wrapper">

        <form class="input">
            <input type="number" id="input__flow"  value="100">
            <input type="number" id="input__return" value="80">
            <input type="number" id="input__temp" value="20">
            <input type="number" id="input__exponent" value="1.2836">
            <input type="number" id="input__value" value="2103">
        </form>
        <div class="output">
            <div id="output__result">
                Result
            </div>
            <div id="output__history">
                History
            </div>
        </div>
        <button id="btn">Go</button>
    </div>

    <script src="js/app2.js"></script>
</body>
</html>

我是JS初学者，我试图了解OOP。每个解释都表示赞赏！

谢谢，Josef

Answer 1

问题是<link rel="stylesheet" type"text/css" href="/static/css/styles.css"/>被定义为一个函数，它返回一个对象而不是一个对象 - 这意味着你需要调用这个函数才能访问这个对象，为此你需要这样做替换所有：

getDOM

使用：

this.getDOM.someProperty

Answer 2

this中calcHeatFlow.calculate.tempDifference的使用不正确。如果您将该功能称为

calcHeatFlow.calculate.tempDifference()

this是指calcHeatFlow.calculate，它没有getDOM属性，因此错误报告：this.getDOM未定义且无法提供属性。

<小时/> 另外getDOM是一个函数，需要调用它来获取输入值。根据最终对象设计，getDOM可以返回已解析的输入值，将它们存储为calcHeatFlow对象的各个属性，或者将它返回的对象存储为calcHeatFlow的属性。

使用getDOM调用结果的函数必须调用它或使用上次调用时的值（如果它们被保存）。

需要对对象结构进行一些重新设计。将不同的计算函数存储为calculate的属性可能适用于自我记录代码，但如果getDOM使用this来引用calcHeatFlow，则可能更容易使它们成为#!/bin/bash FILES=/path/to/* for f in $FILES do # Do something for each file. In our case, just echo the first three fields: cut -f1-3 < "$f" done的属性。对象。

OOP：返回具有多个属性的对象，并使用另一个函数中的值

2 个答案: