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

Javascript Object with a method returns "has no method 'my method name'" error

本文关键字：有方法 我的 方法 错误 没有方法 Javascript 对象 返回      更新时间：2023-09-26

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

    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 语句来检查是否提供了选项。.

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

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

示例小提琴

相关文章：