JavaScript 对象函数

Question

我正在尝试学习和理解 javascript 中的对象，并提出了以下脚本:

    jQuery(document).ready(function(){
    var test = new Project('Anton');
    $('#btn_add_project').click(function(){
        test.addElement();
    });
});
function Project(name)
{
    this.panel = $('#worksheet_panel');
    this.name = name;
    function changeName(name)
    {
        this.name = name;
    }

    function addElement()
    {
        this.element =
            '<div id="1" class="col-md-3 table-bordered worksheet_overall_box" draggable="true" ondragstart="drag(event)">'+
                '<div class="table-bordered title_box">'+
                '<h4 class="title text-center worksheet_title">Dansk handicap</h4>'+
                '</div>'+
                '<div class="worksheet_box">'+
                '    <div class="list-group ">'+
                '        <a href="#" class="list-group-item">'+
                '            <h5 class="list-group-item-heading">Marc</h5>'+
                '            <p class="list-group-item-text">...</p>'+
                '        </a>'+
                '    </div>'+
                '    <div class="list-group ">'+
                '        <a href="#" class="list-group-item">'+
                '            <h5 class="list-group-item-heading">'+name+'</h5>'+
                '            <p class="list-group-item-text">...</p>'+
                '        </a>'+
                '    </div>'+
                '    <div class="list-group">'+
                '        <button class="btn-block btn-primary btn">Add</button>'+
                '    </div>'+
                '</div>'+
                '</div>';
        this.panel.appendChild(this.element);
    }


}

但是，当我运行点击函数时，出现以下错误:

    TypeError: test.addElement is not a function

test.addElement();

谁能告诉我我做错了什么？

Answer 1

addElement 是仅在Project 范围内可用的函数声明。将函数附加到 prototype 以使其可用于新实例，其中 this 指的是实例。

Project.prototype.addElement = function() {
  this.element = ...
};