javascript - 在 OOP Javascript 中设置类的高度和宽度

Question

我是 javascript 中 OOP 编码的初学者。

我正在尝试设置班级的大小。但是我的代码中有一个错误。

    (function($) {

    Block = function() {
        var self = this;
        this.el = $('<div></div>');
    }

    Block.prototype.appendTo = function(parent) {
        this.el.appendTo(parent);
    }

    Block.prototype.setSize = function(width, height) {
        var self = this;
        this.width = width;
        this.height = height;
    }

})(jQuery);

这就是我所说的类：

var block1 = new Block();
block1.appendTo('body').setSize(100,100);

在控制台中我得到：

Uncaught TypeError: Cannot call method 'setSize' of undefined 

Answer 1

您正在setSize调用appendTo. 但是，appendTo不返回任何内容 ( undefined)，因此当您尝试调用它时会引发错误setSize。

解决方案是从函数中返回Block对象appendTo，如下所示：

(function($) {

    Block = function(width, height) {
        this.el = $('<div></div>');
        if (width !== undefined && height !== undefined) {
            this.width = width;
            this.height = height;
        }
    }

    Block.prototype.appendTo = function(parent) {
        this.el.appendTo(parent);
        return this;
    }

    Block.prototype.setSize = function(width, height) {
        this.width = width;
        this.height = height;
    }

})(jQuery);