Question

我正在尝试使用JavaScript中的方法构建自己的对象但是，在我第一次尝试使用以下代码时失败，返回完整代码以及chrome dev工具控制台中的“没有方法'writeOut'。

    var link = function bhLink(options)  { 

        defaultOptions = {
            targetURL: '#',
            target: '_blank',
            textColor: '#000',
            bgColor: '#fff',
            font: 'Arial',
            fontSize:  '12px',
            lineHeight: '12px',
            text: '[Test]'
        }

            if (typeof options == 'object') {
                options = $.extend(defaultOptions, options);
            } else {
                options = defaultOptions;
            }

        link.prototype.writeOut = function() {
            return $('<a></a>')
                .prop({'href':this.targetURL, 'target': this.target})
                .css({'font-family':this.font, 'color':this.textColor, 'font-size': this.fontSize, 'line-height':this.lineHeight});
        }
    } // end link

我像

一样使用它

$('#id_of_some_button').click(function(e) {
    e.preventDefault();
    $('#id_of_some_div').html(link.writeOut);
});

点击事件和链接都在$(document).ready({});块内。

有什么想法吗？

编辑 ======================================= =======

添加选项作为参数和if语句来检查是否提供了选项..

Answer 1

对于构建包含方法的对象的尝试，您的语法非常奇怪。首先，您只是使用defaultOptions尝试访问this对象。其次，writeOut块中对html()的调用仅传递函数引用，而不是实例化函数。试试这个：

var link = {    
    defaultOptions: {
        targetURL: '#',
        target: '_blank',
        textColor: '#000',
        bgColor: '#fff',
        font: 'Arial',
        fontSize: '12px',
        lineHeight: '12px',
        text: '[Test]'
    },
    writeOut: function () {
        return $('<a></a>', { 
            'text': this.defaultOptions.text,
            'href': this.defaultOptions.targetURL,
            'target': this.defaultOptions.target
        })
        .css({
            'font-family': this.defaultOptions.font,
            'color': this.defaultOptions.textColor,
            'font-size': this.defaultOptions.fontSize,
            'line-height': this.defaultOptions.lineHeight
        });
    }    
} // end link

$('#id_of_some_button').click(function (e) {
    e.preventDefault();
    $('#id_of_some_div').append(link.writeOut());
});

Example fiddle

带有方法的Javascript对象返回“没有方法'我的方法名称'”错误

1 个答案: