Question

我想要Success!＆amp;只要Oops!原型正常工作，就会在浏览器顶部显示goingOutChecker()横幅。我在goingOutChecker()函数中调用GeneralChecker()原型。但是，每当我评论goingOutChecker()原型＆amp;函数调用，monthlyBillCheckerAndSalaryChecker()原型，以及它的调用，完美地工作。换句话说，Success!＆amp;只要用户点击Oops!，就会显示Submit横幅广告，前两个字段的填写正确或不正确。

我的问题是，每当我在goingOutChecker()函数中调用goingOutChecker()原型时，为什么赢得GeneralChecker()原型才能正常工作？换句话说，每当正确或错误地填写所有3个字段时，为什么不会出现这些横幅？

另外，我在控制台中没有出现任何错误，只是作为旁注。

这里是gameTime.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WOMP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="gameTime.css">
</head>     
<body>
    <div class="container">
        <div id="success"></div>
        <div id="danger"></div>
        <div id="success2"></div>
        <div id="danger2"></div>
    </div> 
    <form class="col-md-4 col-md-offset-4" name="formHandler" id="handle">
        <div id="allFields">
            <div class="moveUsername">
                <h1>(All numbers inputted will be assumed that it's in dollars)</h1>
                <label for="usr">What's your annual salary?</label>
                <input type="field" class="form-control" id="salary" placeholder="What's your annual salary?" required="required">
            </div>

            <div class="ageMovement">
                <label for="usr">How much do you spend every month on bills?</label>
                <input type="field" class="form-control" id="monthlyBills" name="ageChecker" placeholder="How much do you spend every month on bills?" required="required">
            </div>

            <div class="emailMovement">
                <label for="usr">How much do you spend when going out?</label>
                <input type="field" class="form-control" id="goingOut" name="emailChecker" placeholder="How much do you spend when going out?" required="required">
            </div>
            <button type="submit" id="btnSubmit" class="btn btn-default" onsubmit="GeneralChecker()">Submit</button>
        </form>
        <script type="text/javascript" src="gameTime.js"></script>
    </body>
    </html>

这里是gameTime.js文件

function GeneralChecker(salary, fixedExpense, variableExpense) {
        var self = this;
        self.salary = salary;
        self.fixedExpense = fixedExpense;
        self.variableExpense = variableExpense;
        self.isSalaryZeroOrLess = function() {
            var s = parseInt(document.getElementById("salary").value);
            console.log(this); 
            if(s <= 0) {
                console.log("Looks like you have no income!");
            } else {
                console.log("Your annual salary is: ", s);
            }
            self.monthlyBillCheckerAndSalaryChecker();
            self.goingOutChecker();
        }
    }

    GeneralChecker.prototype.monthlyBillCheckerAndSalaryChecker = function() {
        var m = parseInt(document.getElementById("monthlyBills").value);
        var firstDiv = document.getElementsByTagName("div");
        var secondDiv = document.getElementsByTagName("div");
        var node = document.getElementById("danger");
        var node2 = document.getElementById("success");

        if(m <= 0 || isNaN(m)) {
            console.log("Looks like you have no monthly payments to make!");
            secondDiv[2].innerHTML = "<strong>Oops!</strong>  Looks like you have an invalid input.";
            node.className += " alert alert-danger";
        } else {            
            firstDiv[1].innerHTML = "<strong>Success!</strong> Check for advice below.";    
            node2.className += " alert alert-success";
        }

        var s = parseInt(document.getElementById("salary").value);
        var userMonthlySalary = s / 12;
        console.log(userMonthlySalary);

        if(userMonthlySalary) {
            console.log("That means you make " + userMonthlySalary + " a month.");
        }
    }   

    GeneralChecker.prototype.goingOutChecker = function() {
        var m = parseInt(document.getElementById("goingOut").value);
        var firstDiv = document.getElementsByTagName("div");
        var secondDiv = document.getElementsByTagName("div");
        var node = document.getElementById("danger2");
        var node2 = document.getElementById("success2");

        if(m <= 0 || isNaN(m)) {
            console.log("You don't go out much");
            secondDiv[4].innerHTML = "<strong>Oops!</strong>  Looks like you have an invalid input.";
            node.className += " alert alert-danger";
        } else {            
            firstDiv[3].innerHTML = "<strong>Success!</strong> Check for advice below.";    
            node2.className += " alert alert-success";
        }       
    }

    var fin = new GeneralChecker(1000, 1000, 1000);
    document.querySelector("#btnSubmit").addEventListener("click", fin.isSalaryZeroOrLess);

Answer 1

绑定事件处理程序时，您将丢失对象上下文。你可以这样做：

document.querySelector("#btnSubmit").addEventListener("click", function() {
  fin.isSalaryZeroOrLess();
});

或者像这样：

document.querySelector("#btnSubmit").addEventListener("click", fin.isSalaryZeroOrLess.bind(fin));

this的值不取决于如何针对某个对象创建函数，而取决于函数是如何调用。通过将引用传递给原始代码中的函数，与fin对象的关系将丢失。

为什么我的原型会被执行？

1 个答案: