理解JavaScript super方法模拟实现及相关技术疑问

Alright, let’s dive into how this prototype chain-based super trick works, step by step. Since you said you don’t need help with Underscore or Backbone, we’ll ignore those libraries and focus purely on the core JavaScript mechanics driving this approach.

Core Idea Recap #

The whole system hinges on assigning an explicit name property to every method function. When you access this.super inside a method, a getter function kicks in that walks up the current object’s prototype chain, hunting for a method with the exact same name as the method that’s calling super. Once found, it returns that parent method so you can invoke it.

Key Technical Breakdown of the super Getter #

Let’s unpack what’s happening under the hood in that getter:

1. Grabbing the Current Method’s Name

   • First, the getter needs to know which method is trying to call super. Since the getter runs in the context of the object instance, it relies on the method having a set name property (modern JS has implicit function names, but explicit assignment ensures consistency across older environments).
   • For example: If you have a save method on a child prototype, the library would make sure save.name = 'save' is set, so the getter knows to look for a parent method named save.

2. Traversing the Prototype Chain

   • The getter starts at the immediate parent prototype of the current instance (Object.getPrototypeOf(this)) and moves upward until it hits the end of the chain:

     let proto = Object.getPrototypeOf(this);
     while (proto) {
       const parentMethod = proto[currentMethodName];
       if (parentMethod) return parentMethod;
       proto = Object.getPrototypeOf(proto);
     }
     

   • It stops as soon as it finds a method with a matching name—no need to go further up the chain.

3. Binding the Correct Context

   • A critical detail: When returning the parent method, it has to be bound to the current instance (this). If you don’t do this, this inside the parent method will refer to the prototype object instead of the actual instance you’re working with.
   • So the getter will typically return something like parentMethod.bind(this) to make sure the parent method operates on the right context.

Common Issues & Fixes #

If you’re hitting snags with this implementation, here are the most likely problems and how to fix them:

• Problem 1: Mismatched Method Names

  • If the parent method’s name property doesn’t exactly match the child’s, the getter won’t find it. This often happens if you’re using anonymous functions without explicitly setting the name property.
  • Fix: Make sure every parent and child method has a consistent name value. For example:

    // Parent method
    const parentSave = function() { /* Parent logic */ };
    parentSave.name = 'save';
    ParentModel.prototype.save = parentSave;
    
    // Child method
    const childSave = function() {
      this.super(); // Now correctly finds parentSave
    };
    childSave.name = 'save';
    ChildModel.prototype.save = childSave;
    

• Problem 2: Context Binding Errors

  • If you forget to bind the parent method to the current instance, calling this.super() might result in this being undefined (in strict mode) or pointing to the prototype instead of your object.
  • Fix: Update the getter to return the parent method bound to this:

    Object.defineProperty(YourModel.prototype, 'super', {
      get: function() {
        const methodName = this.name; // Uses the method's explicit name
        let proto = Object.getPrototypeOf(this);
        while (proto) {
          const parentMethod = proto[methodName];
          if (parentMethod) return parentMethod.bind(this);
          proto = Object.getPrototypeOf(proto);
        }
        return function() {}; // Fallback if no parent method exists
      }
    });
    

  • Note: Avoid using arguments.callee.caller to get the method name—it’s deprecated in strict mode, which is why explicit name properties are so important here.

• Problem 3: Prototype Chain Traversal Stops Too Soon

  • If your loop only checks the immediate parent prototype and stops, you’ll miss grandparent methods further up the chain.
  • Fix: Ensure your loop continues until proto is null (the end of the prototype chain). The loop example above does this correctly with while (proto).

Why This Works (and Its Limits) #

• Why it works: It leans into JavaScript’s native prototype inheritance, using shared method names to link child and parent methods. It’s a clever way to mimic native super behavior without relying on ES6 class syntax.
• Limits: It’s fragile if method names change, doesn’t handle multiple inheritance well, and can’t distinguish between methods with the same name from different ancestor chains. Native super is more robust because it’s aware of the exact parent class at definition time, not just runtime name matching.

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