创建具有不同范围的 ES6/ESNext 原型函数（不是内联函数）

Question

好吧，我们有这个：

class Car {
    constructor(name) {
        this.kind = 'Car';
        this.name = name;
    }

    printName() {
        console.log('this.name');
    }
}

我想做的是定义 printName，像这样：

class Car {
    constructor(name) {
        this.kind = 'Car';
        this.name = name;
    }

    // we want to define printName using a different scope
    // this syntax is close, but is *not* quite correct
    printName: makePrintName(foo, bar, baz) 
}

其中 makePrintName 是一个仿函数，如下所示：

exports.makePrintName = function(foo, bar, baz){
   return function(){ ... }
};

这在 ES6 中可行吗？我的编辑器和 TypeScript 不喜欢这个

注意：使用 ES5，这很容易做到，看起来像这样：

var Car = function(){...};

Car.prototype.printName = makePrintName(foo, bar, baz);

使用类语法，目前最适合我的是：

const printName = makePrintName(foo,bar,baz);

class Car {
  constructor(){...}
  printName(){
    return printName.apply(this,arguments);
  }
}

但这并不理想。 如果你尝试使用类语法来做 ES5 语法可以做的事情，你会发现问题。因此，ES6 类包装器是一个泄漏抽象。

要查看实际用例，请参阅：

https://github.com/sumanjs/suman/blob/master/lib/test-suite-helpers/make-test-suite.ts#L171

使用TestBlock.prototype.startSuite = ... 的问题在于，在这种情况下，我不能简单地在线返回课程：

https://github.com/sumanjs/suman/blob/master/lib/test-suite-helpers/make-test-suite.ts#L67

Answer 1

我还没有看到提到的另一个想法是使用method decorator。以下装饰器采用方法实现并根据需要将其放在原型上：

function setMethod<T extends Function>(value: T) {
    return function (target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<T>): void {
      descriptor.value = value;
      delete descriptor.get;
      delete descriptor.set;
    };
}

把它放在图书馆的某个地方。以下是您的使用方法：

class Car {
    constructor(name) {
        this.kind = 'Car';
        this.name = name;
    }

    @setMethod(makePrintName(foo, bar, baz))
    printName() {} // dummy implementation
}

唯一的缺点是你必须在类中放置一个带有正确签名的方法的虚拟实现，因为装饰器需要一些东西来装饰。但它在运行时的行为完全符合您的要求（它不是为每个实例花费一个新函数定义的实例方法，也不是在每次使用时花费一个额外函数调用的访问器）。

这有帮助吗？

Answer 2

是我没听懂还是..？？

class 关键字通常只是 ES5 中委托原型的语法糖。我只是在打字稿中尝试过

class Car {
private kind: string;
private name : string;
printName :Function;
    constructor(name) {
                this.kind = 'Car';
                this.name = name;
            }

   }
var makePrintName = function (foo, bar, baz) {
    return function () { console.log(foo, bar, baz); };
};
Car.prototype.printName = makePrintName('hello', 'world', 'did you get me');
var bmw = new Car('bmw');
bmw.printName();
console.log(bmw.hasOwnProperty('printName'));

Answer 3

由于类型系统的限制，在 JavaScript 和 TypeScript 中执行此操作的优选方法可能会有所不同，但如果 printName 应该是原型方法而不是实例方法（前者有利于 several reasons），那么没有那么多选择。

可以通过访问器检索原型方法。在这种情况下，最好将其记忆或缓存到变量中。

const cachedPrintName = makePrintName(foo, bar, baz);

class Car {
    ...
    get printName(): () => void {
        return cachedPrintName;
    }
}

并且可以懒惰地评估：

let cachedPrintName;

class Car {
    ...
    get printName(): () => void {
        return cachedPrintName || cachedPrintName = makePrintName(foo, bar, baz);
    }
}

或者可以直接分配给prototype类。在这种情况下，它应该被额外输入为类属性，因为 TypeScript 忽略了prototype 赋值：

class Car {
    ...
    printName(): () => void;
}

Car.prototype.printName = makePrintName(foo, bar, baz);

其中() => void 是makePrintName 返回的函数的类型。

TypeScript 很自然的一种方法是不修改类原型，而是扩展原型链并通过 mixin classes 引入新的或修改的方法。这在 JavaScript 中引入了不必要的复杂性，但让 TypeScript 对类型感到满意：

function makePrintNameMixin(foo, bar, baz){
  return function (Class) {
    return class extends Class {
      printName() {...}
    }
  }
}

const Car = makePrintNameMixin(foo, bar, baz)(
  class Car {
    constructor() {...}
  }
);

此时无法无缝使用 TypeScript 装饰器，因为类突变是 not supported at this moment。该类应另外补充接口以抑制类型错误：

interface Car {
  printName: () => void;
}

@makePrintNameMixin(foo, bar, baz)
class Car {
    constructor() {...}
}

Answer 4

只需将: 替换为=

printName = makePrintName()

: 用于类型表示法。

编辑
如 cmets 中所述，上述内容不会更改原型。相反，您可以使用 ES5 语法在类定义之外执行此操作：

// workaround: extracting function return type
const dummyPrintName = !true && makePrintName();
type PrintNameType = typeof dummyPrintName;

class Car {
    // ...
    printName: PrintNameType;
}
Car.prototype.printName = makePrintName();

Playground

Answer 5

你为什么不试试这样的东西

class Car {
    constructor(name) {
        this.kind = 'Car';
        this.name = name;
        this.printName = makePrintName(foo, bar, baz);

    }
}