Kendo UI扩展Form组件时构造函数中this为undefined的问题

问题根源 #

你在定义CustomKendoForm时，错误地在originalForm.extend(...)后追加了(window.kendo.jQuery, window.kendo)调用。这会导致刚生成的自定义组件构造函数被立即执行，而此时没有通过Kendo的组件初始化流程或new关键字创建实例，因此init方法内的this会是undefined。

修复步骤 #

1. 移除extend方法后的(window.kendo.jQuery, window.kendo)调用，kendo.ui.Widget.extend本身会返回合法的组件构造函数，无需额外执行。
2. 调用父类init方法时，使用originalForm.prototype.init.call(this, element, options)，确保上下文正确绑定到当前自定义组件实例。

修正后的完整代码 #

let originalForm = kendo.ui.Form;

let CustomKendoForm = originalForm.extend({
    init: function (element, options) {
        console.log('this', this);
        // 正确调用父类构造函数，绑定当前实例上下文
        originalForm.prototype.init.call(this, element, options);

        console.log('element', element);
        console.log('options', options);
    },

    _setModel: function () {
        var options = this.options,
            formData = options.formData || {};

        if (options.formData instanceof kendo.data.ObservableObject) {
            this._model = formData;
            return;
        }

        var MyModel = kendo.data.Model.define({ fields: this._fields });
        this._model = new MyModel(formData);
        console.log("Custom setModel called");
    }
});

// 注册为Kendo UI插件
kendo.ui.plugin(CustomKendoForm);

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