请求解释Douglas Crockford的uber方法及相关示例疑问

Hey there! Let's break down Douglas Crockford's uber method and that confusing first line of code from his example—this stuff was a game-changer for handling inheritance back before JavaScript had native super support.

什么是uber方法？ #

Crockford coined the term uber (from German for "above") as a workaround to call parent class methods from child class methods in JavaScript. Back in the day, JS didn't have a built-in super keyword, so uber filled that gap, letting you access and execute the parent version of a method you've overridden in a subclass.

示例代码第1行的解释 #

Chances are the first line of your example looks like this:

Function.prototype.uber = function() {

Let's unpack why this line matters:

• Function.prototype refers to the prototype object shared by all functions in JavaScript. Since every constructor function (like your parent/child class definitions) is an instance of Function, modifying this prototype means every constructor gets access to the uber method automatically.
• Assigning function() {} to Function.prototype.uber creates a reusable method that any constructor (or its instances) can call to tap into parent class logic.

完整uber实现与用法示例 #

Here's a typical Crockford-style uber implementation paired with an inheritance example to make it concrete:

// 第1行：全局挂载uber方法到所有函数的原型
Function.prototype.uber = function() {
  // 获取当前函数所属构造函数的父类原型
  const parentProto = this.constructor.prototype.__proto__;
  // 找到父类中与当前方法同名的函数
  const parentMethod = parentProto[this.name];
  if (parentMethod) {
    // 以当前实例为上下文，传入参数调用父类方法
    return parentMethod.apply(this, arguments);
  }
};

// 父类构造函数
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 子类构造函数
function Student(name, grade) {
  Person.call(this, name); // 直接调用父类构造函数初始化属性
  this.grade = grade;
}

// 设置原型继承关系
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 子类重写greet方法
Student.prototype.greet = function() {
  this.uber(); // 通过uber调用父类的greet方法
  console.log(`I'm in grade ${this.grade}`);
};

// 测试代码
const alice = new Student('Alice', 5);
alice.greet();
// 输出：
// Hello, I'm Alice
// I'm in grade 5

In this example, this.uber() inside Student.prototype.greet uses the method we defined on Function.prototype to find and run Person.prototype.greet, then the child class adds its own custom logic afterward.

核心逻辑总结 #

• uber leverages JavaScript's prototype chain to traverse up to the parent class's method.
• The first line (Function.prototype.uber = function() {) makes this tool available to every constructor function, so you don't have to redefine it for each subclass.

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