打字稿静态函数没有接收参数答案

【问题标题】：Typescript static function isn't receiving arguments打字稿静态函数没有接收参数
【发布时间】：2020-12-15 14:05:00
【问题描述】：

我试图从 Typescript 对象的公共函数中访问静态函数，但它似乎不起作用。

目标是在 Vue 中实现一个 Angular 风格的表单验证器。父组件定义了一个ReactiveFormElement 对象数组，它们是实际表单控件的控制器。它们在创建时可以接收两个参数：一个值和一个验证器数组。

验证器是另一个对象中的静态函数。

这是一个简化的纲要：

父组件：

import ReactiveFormElement from '@/components/ReactiveFormElement';
import Validators from '@/services/validators';
...

    public formData = {
        title: new ReactiveFormElement('', [Validators.required]),
    };

反应式表单元素：

export default class ReactiveFormElement {

    constructor(
        public value?: any,
        public validators: Function[] = []) { }

    public validate() {
        console.log('Sending to validator: ' + this.value);
        const error = validator.call(this.value);
    }
}

验证器如下所示：

export default class Validators {

    static required(value: any) {
        console.log('Validator received: ', value);
        if (typeof value === 'undefined' || !value)
            return 'This value is required'
        else
            return null;
    }
}

问题：我传递给验证器的任何内容最终都会成为undefined。如您所见，我正在打印从ReactiveFormElement.validate() 到Validators.require() 发送到控制台的值。输出是：

Sending to validator: Some string
Validator received: undefined

为什么未定义？

如果验证器函数不是静态的，它也无济于事。如果我使用 apply 而不是 call （当然，将值放入数组中），这将无济于事。有趣的是，如果我从父组件调用验证器，它就可以工作。但它拒绝在 ReactiveFormElement 内部工作。

【问题讨论】：

你为什么使用.call？
字面意思是因为为什么不呢？
开个玩笑吧？这就是您的代码不起作用并且您没有做任何需要它的事情的原因。
为什么不呢？ call() 没有任何问题，它现在工作得很好。查看两个答案。

标签： angular typescript vue.js oop static

【解决方案1】：

问题在于您的范围。如果您将this 作为第一个参数传递给调用方法（请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call），您的方法将收到正确的输入。

工作sn-p：

class ReactiveFormElement {

    constructor(
        public value?: any,
        public validators: Function[] = []) { }

    public validate() {
        console.log('Sending to validator: ' + this.value);
        this.validators.forEach(validator =>
            validator.call(this, this.value));
    }
}

class Validators {

    static required(value: any) {
        console.log('Validator received: ', value);
        if (typeof value === 'undefined' || !value)
            return 'This value is required'
        else
            return null;
    }
}

const formElement = new ReactiveFormElement('foo', [Validators.required]);
formElement.validate();

【讨论】：