Question

我有以下代码：

class userData {

    catchDropDownSelection(){
        this.dropDownSelection = $('#xDropDown').prop('selectedIndex');
        console.log("dropDownSelection is ", this.dropDownSelection)
    }
}

class sendData{
    constructor(userData){
        this.userDataClone = userData;

    }

    sendDropDownSelection(){
        //this.userDataClone.catchDropDownSelection();
        console.log("this.userDataClone.dropDownSelection inside sendDropDownSelection is ", this.userDataClone.dropDownSelection)
        $.post("MyFirstPhP.php", {
            userSelection : this.userDataClone.dropDownSelection
        }, function (data){
            //this.testFunction()
            $('#testOutput').html(data);
            //document.getElementById("testOutput").innerHTML = "data"
        }).fail(function(){
            console.log("$.post failed!");
        })
    }

    testFunction(){
        //document.getElementById("testOutput").innerHTML = "data"
        $('#testOutput').html("data");
    }
}


class setEvents {

  constructor(sendData, userData){
    this.sendDataClone = sendData;
    this.userDataClone = userData;
  }

  onClickEvents(){
    $('#sendDataButton').click(function(){
      this.userDataClone.catchDropDownSelection()
      //console.log("index catched is ", this.sendDataClone.userDataClone.dropDownSelection)
    })
    $('#sendDataButton').click(function(){
      this.sendDataClone.sendDropDownSelection()
    })
  }

  addAllEvents(){
    this.onClickEvents()
  }
}

var userDataInstance = new userData;
var sendDataInstance = new sendData(userDataInstance);
var setEventsInstance = new setEvents(sendDataInstance, userDataInstance);

<!DOCTYPE html>
<html>
    <head>
        <title>PHP is Awesome!</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "MyFirstPhP.css">
    </head>
        <body onload="setEventsInstance.addAllEvents()">
          <div id = "fancyBackGround">
            <form>
              <select id = "xDropDown">
                  <option value = "test1">test1</option>
                  <option value = "test2">test2</option>
              </select>
            </form>


            <button id="sendDataButton">ClickMe!</button>

            <p id = "testOutput">not yet</p>
          </div>





            <script src="MyFirstPhP.js"></script>
        </body>
</html>

这是AJAX调用的php：

<?php
session_start();
$dropDownSelection = $_POST['userSelection'];
echo $dropDownSelection
//$dropDownSelection = $dropDownSelection . "wurde verarbeitet!";

?>

现在，在我的浏览器（当前的Chrome）中运行此代码并单击“ clickme！”时，按钮，则会向控制台抛出以下错误：

MyFirstPhP.js:45 Uncaught TypeError: Cannot read property 'catchDropDownSelection' of undefined
    at HTMLButtonElement.<anonymous> (MyFirstPhP.js:45)
    at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

为什么要这么做？至少据我了解，一切都应该正确继承。

Answer 1

该函数上下文中的

this不是您的对象，因此它没有您声明的方法。解决此问题的一种方法是，您可以将this（这是您的类的实例）绑定到包装函数的绑定。像这样：

$('#sendDataButton').click(function () {
    this.userDataClone.catchDropDownSelection()
}.bind(this));

这是小提琴。 https://jsfiddle.net/2tgkx6ev/9/

为什么未定义此属性？

1 个答案: