OOP：返回具有多个属性的对象并在另一个函数中使用这些值答案

【问题标题】：OOP: return an object with multiple properties and use the values in another functionOOP：返回具有多个属性的对象并在另一个函数中使用这些值
【发布时间】：2018-02-08 10:38:45
【问题描述】：

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

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

app2.js:30 Uncaught TypeError: Cannot read property 'inputHeatFlow' of undefined 在 Object.tempDifference (app2.js:30) 在: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。每一个解释都表示赞赏！

谢谢，约瑟夫

【问题讨论】：

标签： javascript function oop

【解决方案1】：

calcHeatFlow.calculate.tempDifference 中this 的用法不正确。如果你把函数称为

calcHeatFlow.calculate.tempDifference()

this 指的是 calcHeatFlow.calculate，它没有 getDOM 属性，因此错误报告：this.getDOM is undefined and can't have any properties。

另外getDOM是一个函数，需要调用才能获取输入值。根据最终的对象设计，getDOM 可以返回解析的输入值，将它们存储为calcHeatFlow 对象的单独属性，或者将它返回的对象存储为calcHeatFlow 的属性。

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

需要对对象结构进行一些重新设计。将不同的计算函数存储为calculate 的属性可能有利于自我记录代码，但如果他们使用this 来引用calcHeatFlow 对象，则将它们设为getDOM 的属性可能更容易。

【讨论】：

【解决方案2】：

问题在于getDOM 被定义为一个返回对象而不是作为对象的函数 - 这意味着您需要调用此函数才能访问此对象，为此您需要替换全部：

this.getDOM.someProperty

与：

this.getDOM().someProperty

【讨论】：

非常感谢，除非我将对象 calculate 注释掉，否则这是有效的。如果不注释掉我的父对象，它是如何工作的？
因为使用 calculate 您可能会像这样访问您的属性：calcHeatFlow.calculate.tempDifference() 将您的 this 上下文从 calHeatFlow 更改为 calculate 并且您丢失了您的如果您想了解如何以 OO 方式正确构建代码，请查看 ES6 类或 ES5 模块模式