Backbone Router报错：Uncaught TypeError: this.goto is not a function求助

Hey there, let's break down why you're hitting this error with your back button router setup from the CodePen example. This issue almost always boils down to how your goto function is attached to your App.Router or how this is being referenced when you call it. Here are the most common fixes to check:

1. Verify goto is properly attached to Router instances #

First, make sure your goto method is actually part of your Router's instance or prototype. Depending on how you're defining the Router (ES6 class vs. traditional constructor), the setup varies:

ES6 Class Example (correct): #

class Router {
  constructor() {
    // Use arrow functions here to preserve the Router's `this` context
    document.querySelector('.back-button').addEventListener('click', () => this.goto('/previous'));
  }

  // This method is automatically part of the class prototype
  goto(path) {
    // Your routing logic here
    console.log(`Navigating to ${path}`);
  }
}

const App = { Router };

Traditional Constructor Example (correct): #

function Router() {
  // Option 1: Attach goto directly to the instance
  this.goto = function(path) {
    console.log(`Navigating to ${path}`);
  };
}

// Option 2: Attach to the prototype (better for reusability)
Router.prototype.goto = function(path) {
  console.log(`Navigating to ${path}`);
};

const App = { Router };

If you forgot to attach goto to either the instance or prototype, calling this.goto will throw that "not a function" error.

2. Fix this binding issues #

If this isn't pointing to your Router instance when you call goto, it won't find the method. This often happens in event listeners or callbacks:

Wrong (lost this context): #

class Router {
  constructor() {
    // Here, `this` inside the callback refers to the button element, not the Router
    document.querySelector('.back-button').addEventListener('click', function() {
      this.goto('/previous'); // Error!
    });
  }

  goto(path) { /* ... */ }
}

Fixes: #

• Use an arrow function to preserve the Router's this context (as shown in the first ES6 example)
• Bind the callback to this:

document.querySelector('.back-button').addEventListener('click', function() {
  this.goto('/previous');
}.bind(this));

3. Ensure you're using an instance of Router, not the class itself #

Don't try to call goto directly on the App.Router class—you need to create an instance first:

Wrong (calling static method when goto is instance-only): #

// Error: Router is the class, not an instance
App.Router.goto('/home');

Correct: #

// Create an instance first
const routerInstance = new App.Router();
routerInstance.goto('/home');

4. Check code load order and spelling #

• Double-check that your goto method is defined before you try to call it. If you're using function expressions (not declarations) or module imports, make sure the definition loads first.
• Verify you didn't misspell goto (e.g., goTo with a capital T)—even a tiny typo will trigger this error!

Quick Debugging Tip #

Add a console.log(this) right before the line that calls this.goto. This will show you exactly what this is pointing to—if it's not your Router instance, that's the root of the problem.

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