如何在HTML中调用JS构造函数原型方法showQuasiNewton？

Hey there! Since you're transitioning from C and Python, JavaScript's prototype-based object-oriented programming can feel a bit counterintuitive at first—let's fix that issue with your showQuasiNewton method step by step.

The Root of the Problem #

Your showQuasiNewton method is attached to the prototype of the QuasiNewton constructor function, which means it doesn't exist as a global function. When you write onclick="showQuasiNewton()", the browser looks for a function named showQuasiNewton in the global scope—and it can't find it, because this method only belongs to instances of QuasiNewton.

Step 1: Fix Your Constructor & Prototype Setup #

First, let's make sure your JavaScript structure is correct (I noticed a possible typo with new ModeDetect—that should be your constructor function definition):

// Define the constructor function for QuasiNewton
function QuasiNewton() {
  // If you need to initialize instance-specific properties, do it here
  // e.g., this.simulationState = "ready";
}

// Attach properties and methods to the prototype
QuasiNewton.prototype = {
  width: 1024,
  height: 768,
  top: 0,
  left: 0,
  showQuasiNewton: function(a) {
    // Replace with your actual method logic
    console.log("Simulation results displayed!", a);
    // Example: Update DOM to show results
    // document.getElementById("sim-results").textContent = "Simulation completed!";
  }
};

Step 2: Create an Instance of QuasiNewton #

To access the prototype method, you need to create an instance of the QuasiNewton object. For simplicity, we'll start with a global instance (we'll cover a cleaner approach next):

// Create a global instance to access from HTML
const mySimulation = new QuasiNewton();

Step 3: Call the Method from HTML #

Now you can reference the instance's method in your onclick handler. We'll add return false; to prevent the browser from navigating to # when the link is clicked:

<a href="#" onclick="mySimulation.showQuasiNewton(); return false;">Display simulation results</a>

Better Practice: Avoid Inline onclick (Modern Approach) #

Inline event handlers are fine for learning, but modern JavaScript prefers separating code from HTML using event listeners. Here's how to do it:

1. Update your HTML to remove the inline onclick:

<a href="#" id="show-results-link">Display simulation results</a>

2. Add this JavaScript (make sure it runs after the DOM is fully loaded):

document.addEventListener('DOMContentLoaded', function() {
  // Create your instance inside the DOM ready handler (no global variable needed!)
  const mySimulation = new QuasiNewton();
  // Get the link element from the DOM
  const resultsLink = document.getElementById('show-results-link');
  
  // Attach the click event listener
  resultsLink.addEventListener('click', function(e) {
    e.preventDefault(); // Stop the default link navigation behavior
    mySimulation.showQuasiNewton(); // Call the instance method
  });
});

Why This Works #

In JavaScript, prototype methods are only accessible through instances of the constructor. By creating mySimulation = new QuasiNewton(), you're making an object that inherits all properties and methods from QuasiNewton.prototype—including showQuasiNewton.

This is a key difference from Python's class-based OOP (where you can call some methods directly on the class) or C's struct functions, so it's a common gotcha for folks new to JS's prototype system.

内容的提问来源于stack exchange，提问作者AJW