Typescript静态函数未接收参数

如何解决Typescript静态函数未接收参数

我正在尝试从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内部进行工作。

解决方法

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

工作片段：

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();